flutter 搜索框过滤_在flutter中实施搜索和过滤

flutter 搜索框过滤

There are many flutter widgets to implement search feature just like in Android, yet there is a simpler way to implement this using flutter SearchDelegate class which gives you almost all that you want in only 4–5 simple steps so let’s see what we can do with this

就像Android中一样，有很多flutter小部件来实现搜索功能，但是有一种使用flutter SearchDelegate类实现此功能的简单方法，仅需4-5个简单步骤就可以提供几乎所有您想要的东西，因此让我们看看我们可以做什么这个

We will need to explore two classes before we start

在开始之前，我们需要探索两个课程

SliverAppBar (SliverAppBar)

When we want a dynamic toolbar that when we slide or expand it shows us content, we use the great widget called SliverAppBar which always be the first child for CustomScrollView.

当我们需要一个动态工具栏来滑动或展开它来显示内容时，我们使用了名为SliverAppBar的出色小部件 它始终是CustomScrollView的第一个孩子。

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      forceElevated: true,
      elevation: 4,
      floating: true,
      snap: true,
      title: Text(
        "Search Example",
      ),
      actions: <Widget>[
        IconButton(
          icon: Icon(
            Icons.search,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.filter_list,
          ),
          onPressed: () {},
        ),
      ],
    ),
  ],
)

This will make a cute app bar with two icons

这将使带有两个图标的可爱应用栏

Next we will implement the search feature.

接下来，我们将实现搜索功能。

CustomSearchDelegate (CustomSearchDelegate)

To make a custom search , you need to create a new class that extends the SearchDelegate class. after overriding the SearchDelegate method you will have this class

要进行自定义搜索，您需要创建一个扩展SearchDelegate类的新类。 覆盖SearchDelegate方法后，您将拥有此类

class CustomSearchClass extends SearchDelegate{
  @override
  List<Widget> buildActions(BuildContext context) {
    // here you will add the action you need in your search later we   will add a clear button.


    throw UnimplementedError();
  }


  @override
  Widget buildLeading(BuildContext context) {
    // here you will add the leading actions that will be shown before the search bar ( such a back button ) 
    throw UnimplementedError();
  }


  @override
  Widget buildResults(BuildContext context) {
    // in this method you will build your search results widget and how would you like to view them on screen
    throw UnimplementedError();
  }


  @override
  Widget buildSuggestions(BuildContext context) {
    // you can use this method to show suggestions before the user start search or to view a real time search results as we will show later 
    throw UnimplementedError();
  }
  
}

Now let's build our search class, a simple class will be shown below

现在，我们来构建搜索类，下面将显示一个简单的类

class CustomSearchClass extends SearchDelegate {


  @override
  List<Widget> buildActions(BuildContext context) {
  
// this will show clear query button
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }


  @override
  Widget buildLeading(BuildContext context) {
  
// adding a back button to close the search 
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }


  @override
  Widget buildResults(BuildContext context) {
//clear the old search list
    searchResult.clear();
    
//find the elements that starts with the same query letters.
// allNames is a list that contains all your data ( you can replace it here by an http request or a query from your database )
    searchResult =
        allNames.where((element) => element.startsWith(query)).toList();
        
// view a list view with the search result
    return Container(
      margin: EdgeInsets.all(20),
      child: ListView(
          padding: EdgeInsets.only(top: 8, bottom: 8),
          scrollDirection: Axis.vertical,
          children: List.generate(searchResult.length, (index) {
            var item = searchResult[index];
            return Card(
              color: Colors.white,
              child: Container(padding: EdgeInsets.all(16), child: Text(item)),
            );
          })),
    );
  }


  @override
  Widget buildSuggestions(BuildContext context) {


// I will add this step as an optional step later 
return null;  
}

Now we just have to connect our cute search app bar with our custom search class

现在，我们只需要将可爱的搜索应用栏与自定义搜索类连接即可

if you remember our search button icon from the above silver app bar we just need to add the showSearch method to connect the app to the searchClass, the rest is magic ^-^.

如果您还记得上面银色应用程序栏中的搜索按钮图标，我们只需要添加showSearch方法将应用程序连接到searchClass，剩下的就是神奇的^-^。

IconButton(
  icon: Icon(
    Icons.search,
  ),
  onPressed: () {
    showSearch(
      context: context,
      delegate: customSearchClass(),
    );
  },
),

the search widget view

搜索窗口小部件视图

I added some optional features like instant search suggestions and recent search suggestions to the example, the source code can be found here.

我在示例中添加了一些可选功能，例如即时搜索建议和最近的搜索建议，可在此处找到源代码。

https://github.com/Ezaldeen99/search_demo

https://github.com/Ezaldeen99/search_demo

翻译自: https://levelup.gitconnected.com/implement-a-search-and-filter-in-flutter-56d046e12c05

flutter 搜索框过滤