Shulou(Shulou.com)06/01 Report--

The editor today takes you to understand how to use Flutter to imitate the effect of Wechat search page. The knowledge points in the article are introduced in great detail. Friends who think it is helpful can browse the content of the article with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Follow the editor to learn in depth how to use Flutter to imitate the search page effect of Wechat.

Effect picture

As shown in the figure above, we use Flutter to copy the search page, where the chat home page clicks on the search bar to jump to the search page, which contains the top search box and the bottom ListView. In the search box, we enter the search term to retrieve the model that contains the search term in the chat list model and display it in the bottom list with the search term highlighted. Let's introduce the implementation of these functions respectively.

Top search bar

Class SearchBar extends StatefulWidget {final ValueChanged? OnChanged; const SearchBar ({this.onChanged}); @ override _ SearchBarState createState () = > _ SearchBarState ();} class _ SearchBarState extends State {final TextEditingController _ editingController = TextEditingController (); bool _ showClose = false; void _ onChange (text) {if (null! = widget.onChanged) {widget.onChanged! (text);} setState (() {_ showClose = ((text as String). Length > 0);}) } @ override Widget build (BuildContext context) {return Container (height: 84, color: CahtThemColor, child: Column (children: [SizedBox (height: 40,), / / leave the upper half blank Container (height: 44) Child: Row (children: [Container (width: screenWidth (context)-50, height: 34, margin: EdgeInsets.only (left: 5, right: 10), padding: EdgeInsets.only (left: 5, right: 5) Decoration: BoxDecoration (color: Colors.white, borderRadius: BorderRadius.circular,), child: Row (children: [Image (image: AssetImage ('images/ magnifying glass b.png`), width: 20, color: Colors.grey,) / / magnifying glass Expanded (child: TextField (controller: _ editingController, onChanged: _ onChange, autofocus: true, cursorColor: Colors.green, style: TextStyle (fontSize: 16.0) Color: Colors.black87, fontWeight: FontWeight.w400,), decoration: InputDecoration (contentPadding: EdgeInsets.only (left: 5, right: 5, bottom: 12,), border: InputBorder.none HintText: 'search', hintStyle: TextStyle (fontSize: 16.0, color: Colors.grey, fontWeight: FontWeight.w400,) ), if (_ showClose) GestureDetector (onTap: () {/ / clear the search box _ editingController.clear () SetState () {_ onChange ('');}) }, child: Icon (Icons.cancel, color: Colors.grey, size: 20,),] MainAxisAlignment: MainAxisAlignment.spaceBetween,), / / left white background GestureDetector (onTap: () {Navigator.pop (context)) }, child: Text ('cancel'), / / cancel button on the right],), / / search bar section],),);}}

According to the overall layout of the search page, we can be divided into two parts: the search bar at the top and the search list at the bottom. For the search bar, we define a SearchBar class to implement, and the bottom search list is packaged with Expanded parts.

SearchBar implementation details

For SearchBar, the overall height is set to 84, and the best height is defined as a variable, which is set according to the model. For the search bar, we are divided into two parts, the top blank and the content part, the top blank is realized by SizedBox parts, and the bottom content is realized by Row parts, which is divided into the left search box and the right cancel button.

The left search box is implemented.

We use Container components to implement the overall part of the search box, which can set width, height and fillet properties. We also use the Row widget to implement the child property, which is divided into the left search icon, the middle TextField and the right close button.

TextField implementation details

The TextField part has two more important properties, onChanged and controller. OnChanged We passed in an external method, _ onChange, to listen for changes in the input box text, display the close button when there is text, and hide the close button when there is no text. Controller We passed in an externally defined attribute, _ editingController, which can be used to control the editing of the TextField.

Turn off the implementation of the button

To close the button, we judge whether to display it according to _ showClose, and wrap it with GestureDetector parts. When you click, clear the input box and call the _ onChange method. The parameter is passed in an empty string. If the string in the _ onChange method is empty, the close button is hidden.

The right cancel button is implemented.

When the cancel button is clicked, it returns to the previous page.

Content retrieval

After we monitor the changes in the text input box, we need to retrieve the content and display it in the list at the bottom.

Delivery of content class SearchCell extends StatelessWidget {final List? Datas; const SearchCell ({this.datas});} class SearchPage extends StatefulWidget {final List? Datas; const SearchPage ({this.datas});}

Here we are based on the chat page list data model to find the model with search terms in the name for display. So we define the datas attribute in SearchCell and the datas attribute in SearchPage, which are passed during initialization, so that we can get the model data of the chat list on the search page.

Content search / / data array List _ models = []; / / content under search String _ searchStr =''; / / search data search void _ searchData (String text) {/ / clear _ models.clear () before each search; _ searchStr = text; if (text.length < 1) {setState (() {}); return } for (int I = 0; I < datas.length; iTunes +) {String name = widget.datas? [I]. Name as String; if (name.contains (text)) {_ models.add (widget.datas? [I] as ChatModel);} setState (() {});}

We extract the search logic into the _ searchData method and call the _ searchData method when the input changes. Here we define a _ models array that holds the retrieval data, and we iterate through the datas to add the retrieved model to _ models.

Search the list to achieve TextStyle _ normalStyle = TextStyle (fontSize: 16, color: Colors.black,); TextStyle _ hightlightedStyle = TextStyle (fontSize: 16, color: Colors.green,); Widget _ searchTitle (String name) {List textSpans = []; List searchStrs = name.split (_ searchStr); for (int I = 0; I < searchStrs.length; iTunes +) {String str = searchStrs [I] If (str = =''& & I < searchStrs.length-1) {textSpans.add (TextSpan (text: _ searchStr, style: _ hightlightedStyle));} else {textSpans.add (TextSpan (text: str, style: _ normalStyle); if (I < searchStrs.length-1) {textSpans.add (text: _ searchStr, style: _ hightlightedStyle)) Return RichText (text: TextSpan (children: textSpans));}

The cell of the search list is the cell that reuses the chat list, but what needs to be changed is the highlight of the search content, so we use RichText to implement the title property of the ListTile part, and the content is extracted into the _ searchTitle method. Name.split (_ searchStr) returns an array split according to the search word _ searchStr, but the element in the searchStrs array is an empty string when the beginning or end of the string has the same character as _ searchStr, so we need to make a special decision str =''. We iterate through the searchStrs array to create the TextSpan part, and specify styles _ normalStyle and _ hightlightedStyle based on whether the content is the same as the search content.

Thank you for your reading, the above is "how to use Flutter to imitate Wechat search page effect" all the content, learn friends hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.