Implementing search in Flutter

One issue I’ve had to deal with in each Flutter app that I’ve made is search. Originally I was using a third-party package like Material Search or Flutter Search Bar. Until I saw the Boring Flutter Show’s episode on implementing search in the Hacker News app. This led me to using the ShowSearch method in Flutter.

ShowSearch

ShowSearch is a method in the material library in Flutter. Because of this, it can be accessed from anywhere in your widget tree. Below is an example of a SliverAppBar that contains a title and an IconButton that calls the ShowSeach method when it is pressed. This method takes the build context and a SearchDelegate to handle the actual searching.

What the app bar looks like in the example app

CustomSearchDelegate

To implement a custom search delegate, you need to create a new class that extends the SearchDelegate class. When you first implement that class you will have the following code.

For an in depth walkthrough of implementing these methods, I recommend watching the boring flutter show episode starting at 6 minutes in. They talk more in depth about what each method of the delegate does.

For the sake of brevity, here is my final CustomSearchDelegate class.

I’m using the BLOC pattern with an inherited widget to submit the search term and then using a StreamBuilder to build based on the results of that search.

And this is what it looks like when the search results are shown.

Customizing the ThemeData of your search page AppBar

One thing you may notice is that when the search page is shown, the theme is not the same as the app’s theme. You can see this specifically in the AppBar’s colors.

The AppBar is blue with white text on the main page

On the search page, the AppBar is white with black text

This won’t work if you need your search page theme to match the rest of your application. And there isn’t an abstract method to override in SearchDelegate. However, there is an implemented method for setting the ThemeData of the AppBar. All you need to do is override that method to set the theme of your AppBar.

The code below, will just pass the ThemeData from your app directly to the AppBar on the search page.

Now, we have the correct theming on our search page!

The search term’s color is set using the theme.textTheme.title

I hope all of this will help you when you try to implement search in your Flutter app!

Edits:

Michael Gallego asked that I share the code for the InheritedBloc class. While that wasn’t part of the initial scope of this article, I figured it wouldn’t hurt. Below is the class code. The way this would be used is by placing your app as the child for this InheritedBloc class, then it could be referenced from any child in your tree.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.