preface

Hello, everyone! It has been a while since I updated my article to you. While I have time, I wrote a fuzzy search box version of FLUTTER that imitated the search engine and shared it with you. I hope you can point out any mistakes and mistakes in time

The preparatory work

Need to install the flutter development environment: everyone can look at the previous tutorial: 1 win flutter system development environment installed tutorial: www.jianshu.com/p/152447bc8… 2 MAC flutter development environment installed tutorial: www.jianshu.com/p/bad2c35b4…

Effect:

Concrete implementation:

First of all, we wrote an Appbar on the home page, and then on the right side there is a fuzzy search box page that will jump to the next page after clicking on a button

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
     appBar: AppBar(
       title: Text("searchDemo"),
       actions: <Widget>[
         IconButton(
           icon: Icon(
             Icons.search
           ),
           onPressed: (){
             showSearch(context: context, delegate: searchBarDelegate());
           },
         )
       ],
     ),
    );
  }
Copy the code

We add an IconButton to the Actions property of the AppBar component to implement the UI display of the search button on the right.

Fuzzy search box implementation

Search box we’ve written a component that inherits SearchDelegate and overwrites buildActions buildLeading

BuildResults buildSuggestions and other methods

To the right of the buildActions method, delete the contents of the input box:
    @override
    List<Widget>buildActions(BuildContext context){
      return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: ()=>query="",
      )
      ];
    }
Copy the code

When we click on the right to delete the button and trigger the onPressed method we empty the input field

The buildLeading method returns the key method to the left
    @override
     Widget buildLeading(BuildContext context) {
     return IconButton(
       icon: AnimatedIcon(
           icon: AnimatedIcons.menu_arrow,
           progress:transitionAnimation),
       onPressed: ()=>close(context,null),
     );
  }
Copy the code

Call the onPressed method when we click the left back button and close the fuzzy search page

BuildResults search results method:

  @override
  Widget buildResults(BuildContext context) {
      return Center(
          child:Container(
              width: 100,
              height: 100,
            child:Card(
               color: Colors.redAccent,
            child: Text(query),
           ),
          ),
      );
  }
Copy the code

So what we’re going to do is we’re going to create a Center component and then we’re going to have a Container component that’s going to be 100 units wide and 100 units high, And then we have a Card component in there to beautify our results page and then we have a text component embedded in there to show what we’ve found and this is just an example of a search results page that you can play with

The buildSuggestions fuzzy search list method:

@override Widget buildSuggestions(BuildContext context) { final suggestionList=query.isEmpty? reecntSuggest:serchList.where((input) => input.startsWith(query)).toList(); return ListView.builder( itemCount: suggestionList.length==0? 0:suggestionList.length, itemBuilder: (context ,index)=>ListTile( title: RichText( text: TextSpan( text: suggestionList[index].substring(0,query.length), style: TextStyle( color: Colors.black,fontWeight: FontWeight.bold ), children: [ TextSpan( text:suggestionList[index].substring(query.length), style: TextStyle(color: Colors.grey ) ) ] ), ), ), ); }Copy the code

So we define a list array and we use a ternary operation to determine if the input is empty and if it’s empty we use our default recommended data display, if it’s not empty we use the data source to determine the input prefix and match it and then return the list

   final suggestionList=query.isEmpty?
        reecntSuggest:serchList.where((input) => input.startsWith(query)).toList();
Copy the code

Simulate a search for dead data sources

Const serchList = [" uchiha - spot ", "nai uchiha - spring", "uchiha itachi -", "uchiha - = sasuke", "thousand - between column", "thousand - between the door leaf,"]. Const reecntSuggest=[" recommend-1 ", "recommend-2"];Copy the code

And in the display section we’ve got a ListView component to display the item and we’ve got a ListTile, and inside the ListTile we’ve got the title that matches the search in black, If there is no match, it shows gray and if there is no match, it shows gray by substring

return ListView.builder( itemCount: suggestionList.length==0? 0:suggestionList.length, itemBuilder: (context ,index)=>ListTile( title: RichText( text: TextSpan( text: suggestionList[index].substring(0,query.length), style: TextStyle( color: Colors.black,fontWeight: FontWeight.bold ), children: [ TextSpan( text:suggestionList[index].substring(query.length), style: TextStyle(color: Colors.grey ) ) ] ), ), ), );Copy the code

All over and we’re done with the whole fuzzy search box

The final summary

Instead of native Android or iOS, Flutter provides a rich set of components that we inherit to achieve the desired effect. We inherit the SearchDelegate component to override buildActions buildLeading buildResults BuildSuggestions and so on, the data source is something THAT I wrote down and those of you who are local can try to find some interfaces to use network requests, but I’m not going to go into that for those of you who are interested in doing more research and hopefully this article will help you solve the problem, I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention to it and star it. Thank you and you can add my personal QQ/ wechat

Project Address:

Yards cloud: gitee.com/qiuyu123/fl…