Flutter simple search function

First create a master file, inheritance StatelessWidget, then add in home property SearchBarDemo, which is a custom Widget, the main code in this file.

import 'package:flutter/material.dart';
import 'search_bar_demo.dart';

void main() =>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
      theme: ThemeData.light(),
      home: SearchBarDemo()
    );
  }
}

Then the search page, which contains data and search function.

Work in these data are passed back to us, or write the configuration file, here we have a way to List instead. We define two List in this file:

const searchList = [
   ' jiejie- big legs ' ,
   ' jiejie- water Yi Yao ' ,
   ' gege- cool Obama ' ,
   ' gege- small meat ' 
]; 

const recentSuggest = [
   ' recommended -1 ' ,
   ' Recommended -2 ' , 
];

Click the Search button

class SearchBarDemo extends StatefulWidget {
  _SearchBarDemoState createState() => _SearchBarDemoState();
}

class _SearchBarDemoState extends State<SearchBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SearchBarDemo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              showSearch(context: context,delegate: SearchBarDelegate());
            },
          )
        ],
        ),
      
    );
  }
}

Click on the icon to perform in the S earchBarDelegate class, inheritance and SearchDelegateclass, four methods inside of the inheritance to be rewritten.

Rewrite buildActions method:

buildActionsButton to execute the search bar on the right side when the method approach, we put a clear method where an icon here. When you click on the picture, emptied the contents of the search.

buildLeading method overrides

The writing icon and function on the left side of the search bar, where we use AnimatedIcon, and then shut down the entire search page when clicked.

buildResults method overrides

buildResultsThe method is found to show the contents, because our data are analog, so here I use the most simple Container+ Cardcomponents demonstrates.

buildSuggestions method overrides

The main role of this method is to set recommended that we enter a word, and then automatically push relevant search results for us.

class SearchBarDelegate extends SearchDelegate<String>{
  //清空按钮
  @override
  List<Widget>buildActions(BuildContext context){
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = "", //搜索值为空
      )
    ]; 
  }
  //返回上级按钮
  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow, progress: transitionAnimation
      ),
      onPressed: ()=> Use Close (context, null )   // shut down the entire search page when clicked 
    ); 
  } 
  // search to the contents of the show 
  @override 
  Widget buildResults (BuildContext context) { 
    return Container ( 
      width: 100.0 , 
      height: 100.0 , 
      Child: Card ( 
        Color: Colors.redAccent, 
        Child: Center ( 
          Child: the Text (Query), 
        ), 
      ), 
    ); 
  } 
  // set the recommended 
  @override 
  the Widget buildSuggestions (BuildContext context) { 
    Final suggestionsList = query.isEmpty
      ? recentSuggest 
      : searchList.where((input)=> input.startsWith(query)).toList();

    return ListView.builder(
      itemCount:suggestionsList.length,
      itemBuilder: (context,index) => ListTile(
        title: RichText( //富文本
          text: TextSpan(
            text: suggestionsList[index].substring(0,query.length),
            style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                text: suggestionsList[index].substring(query.length),
                style: TextStyle(color: Colors.grey)
              )
            ]
          ),
        ),
      ),
    );  
  }

}

Complete search_bar_demo.dart file code is as follows:

Import ' Package: Flutter / material.dart ' ; 

const searchList = [
   ' jiejie- big legs ' ,
   ' jiejie- water Yi Yao ' ,
   ' gege- cool Obama ' ,
   ' gege- small meat ' 
]; 

const recentSuggest = [
   ' recommended -1 ' ,
   ' recommended -2 ' , 
]; 

class SearchBarDemo the extends StatefulWidget { 
 
  _SearchBarDemoState createState () => _SearchBarDemoState (); 
} 

class _SearchBarDemoState extends State<SearchBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SearchBarDemo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              showSearch(context: context,delegate: SearchBarDelegate());
            },
          )
        ],
        ),
      
    );
  }
}

class SearchBarDelegate extends SearchDelegate<String>{
  //清空按钮
  @override
  List<Widget>buildActions(BuildContext context){
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = "", //搜索值为空
      )
    ]; 
  }
  //返回上级按钮
  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow, progress: transitionAnimation
      ),
      onPressed: () => Use Close (context, null )   // shut down the entire search page when clicked 
    ); 
  } 
  // search to the contents of the show 
  @override 
  Widget buildResults (BuildContext context) { 
    return Container ( 
      width: 100.0 , 
      height: 100.0 , 
      Child: Card ( 
        Color: Colors.redAccent, 
        Child: Center ( 
          Child: the Text (Query), 
        ), 
      ), 
    ); 
  } 
  // set the recommended 
  @override 
  the Widget buildSuggestions (BuildContext context) { 
    Final suggestionsList = query.isEmpty
      ? recentSuggest 
      : searchList.where((input)=> input.startsWith(query)).toList();

    return ListView.builder(
      itemCount:suggestionsList.length,
      itemBuilder: (context,index) => ListTile(
        title: RichText( //富文本
          text: TextSpan(
            text: suggestionsList[index].substring(0,query.length),
            style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                text: suggestionsList[index].substring(query.length),
                style: TextStyle(color: Colors.grey)
              )
            ]
          ),
        ),
      ),
    );  
  }

}