The Flutter search page is implemented

In general App pages, search function may be required. A common one is that there is a search bar on the home page, and clicking on it will jump to a search page.

This function is also implemented in Flutter, mainly through showSearch to jump to a search page. So let’s see how that works.

1. Customize SearchDelegate

To use the search page provided by Flutter, you need to implement your own Delegate by inheriting the SearchDelegate. The SearchDelegate provides some methods that we need to override ourselves to implement our own functionality.

  • BuildActions displays the list of ICONS on the far right.
  • The icon to the left of the buildLeading search bar is usually returned.
  • BuildResults this callback does a search and returns its own search results.
  • BuildSuggestions returns suggested search results.

Example:

class SearchBarViewDelegate extends SearchDelegate<String>{

  String searchHint = "Please enter search content...";
   var sourceList = [
    "dart"."Introduction to dart"."flutter"."Flutter programming"."Flutter programming development",]; var suggestList = ["flutter"."Flutter programming development"]; @override String get searchFieldLabel => searchHint; @override List<Widget> buildActions(BuildContext context) {/// Display the List of controls on the rightreturn [

    IconButton(
      icon: Icon(Icons.clear),
      onPressed: (){
        query = ""; /// Search for suggested content showSuggestions(context); }, ), IconButton( icon: Icon(Icons.search), onPressed: ()=>query ="", a)]; } // override Widget buildLeading(BuildContext context) {returnIconButton( icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: OnPressed: ()=>close(context,null),); } @override Widget buildResults(BuildContext context) {List<String> result = List(); /// simulate the search processfor (var str in sourceList){///query is the TextEditingController of the input fieldif(query.isNotEmpty && str.contains(query)){ result.add(str); }} /// display the search resultsreturn ListView.builder(
      itemCount: result.length,
      itemBuilder: (BuildContext context, int index)=>ListTile(
        title: Text(result[index]),
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {

    List<String> suggest = query.isEmpty ? suggestList : sourceList.where((input)=>input.startsWith(query)).toList();
    return ListView.builder(
        itemCount: suggest.length,
        itemBuilder: (BuildContext context, int index)=>
    InkWell(
      child:         ListTile(
        title: RichText(
          text: TextSpan(
            text: suggest[index].substring(0, query.length),
            style: TextStyle(color: Colors.blue,fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                text: suggest[index].substring(query.length),
                style: TextStyle(color: Colors.grey),
              ),
            ],
          ),
        ),
      ),
        onTap: (){
       //  query.replaceAll("", suggest[index].toString());
          searchHint = ""; query = suggest[index].toString(); showResults(context); },),); }}Copy the code

2. Display the search page using a custom SearchBarViewDelegate

IconButton( icon: Icon(Icons.search), onPressed: (){ showSearch(context: context, delegate: SearchBarViewDelegate()); })Copy the code

Effect:

Flutter AnimatedIcon

Flutter also provides a widiget — AnimatedIcon to display the drawing ICONS, which can provide a good user experience. In the search bar above, the back button uses this widget.

Not all ICONS can display this effect. The AnimatedIcons provided by flutter include the following:

abstract class AnimatedIcons {

  /// The material design add to event icon animation.
  static const AnimatedIconData add_event = _$add_event;

  /// The material design arrow to menu icon animation.
  static const AnimatedIconData arrow_menu = _$arrow_menu;

  /// The material design close to menu icon animation.
  static const AnimatedIconData close_menu = _$close_menu;

  /// The material design ellipsis to search icon animation.
  static const AnimatedIconData ellipsis_search = _$ellipsis_search;

  /// The material design event to add icon animation.
  static const AnimatedIconData event_add = _$event_add;

  /// The material design home to menu icon animation.
  static const AnimatedIconData home_menu = _$home_menu;

  /// The material design list to view icon animation.
  static const AnimatedIconData list_view = _$list_view;

  /// The material design menu to arrow icon animation.
  static const AnimatedIconData menu_arrow = _$menu_arrow;

  /// The material design menu to close icon animation.
  static const AnimatedIconData menu_close = _$menu_close;

  /// The material design menu to home icon animation.
  static const AnimatedIconData menu_home = _$menu_home;

  /// The material design pause to play icon animation.
  static const AnimatedIconData pause_play = _$pause_play;

  /// The material design play to pause icon animation.
  static const AnimatedIconData play_pause = _$play_pause;

  /// The material design search to ellipsis icon animation.
  static const AnimatedIconData search_ellipsis = _$search_ellipsis;

  /// The material design view to list icon animation.
  static const AnimatedIconData view_list = _$view_list;
}
Copy the code

Using the step

1. Define AnimationController to control animation

controller = AnimationController(vsync: this) .. drive(Tween(begin: 0, end: 1)) .. duration = Duration(milliseconds: 500);Copy the code

AnimatedIcon Specifies the animation controller and the animation Icon to display

     AnimatedIcon(
        icon: AnimatedIcons.play_pause,
        progress: controller,
        size: 35,
        semanticLabel: "play_pause",),Copy the code

3. Control playback

     InkWell(
                child:   _icons[index],

           onTap: () {
                  if (controller.status == AnimationStatus.completed) {
                    controller.reverse();
                  } else if(controller.status == AnimationStatus.dismissed) { controller.forward(); }}),Copy the code

Effect:

github

The last

Welcome to follow the wechat public account “Flutter Programming and Development”.