Implement a search and filter in flutter

Ezaldeen sahb
Level Up Coding
Published in
2 min readJul 24, 2020

--

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

Flutter search

We will need to explore two classes before we start

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.

This will make a cute app bar with two icons

Next we will implement the search feature.

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

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

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 ^-^.

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

--

--