DEV Community

Cover image for Search Bar in flutter
Luiz Eduardo
Luiz Eduardo

Posted on • Updated on

Search Bar in flutter

Link for the code

Hey devs, today I'll show how to implement a search bar in flutter. This beautiful framework has tools to help us in this and other cases.

(Don't need any state management)

Let's see a simple example

In this example, I going to implement a search field to open a text from a simple text list. The list will be generated.

Demo: Demo

What we need?

  • One Stateful widget
  • One Scaffold
  • One AppBar
  • Data to be searched

Just it?

No. I'll create a class that will manage our search mechanics. First of all, this is our basic struct:

Basic struct of exemple

What is the next step? Let's call the function showSearch() in onPressed parament of IconButton on actions of the AppBar. This function needs two paramete, the first is the context, just pass the BuildContext inherited of Scaffold. The second and the key to this implementation is the delegate, where I need to pass a SearchDelegate that I'll create now.

IconButton finished

The key

Now, let's create a class inherited from SearchDelegate class and do an override of the four main methods.

SearchDelegate class created

The first method is buildActions() that return a list of widgets. These widgets are on the right side of the text field. In this example, I'll create a single widget. It'll an IconButton that will clean up our query text.
For this, I created IconButton and on the icon parament I give her the close icon, and in onPressed, I just pass a VoidCallback that will set the query (the text of built-in TextField()) to an empty string.

buildActions method

Now, let's implement the buildLeading(). It's a single widget on the left of the search field. Usually, it's used the arrow_back icon with Navigator.pop() in the onPressed parament.

buildLeading method

The next method to be overridden is buildResult(). It returns a widget that it'll cover the body of scaffold when the function showResult() was called. In this simples example, I'll just display a Container with a Text in a Center. For the text, I'll create a string that will receive the selected text.

buildResults method

The last method is buildSuggestion() that also is a "single widget". In fact, I'll return a ListView.builder(). And for this, I need a list, that I already have. So, I just will create a final variable and create a class constructor to pass this list through a parameter.

Class constructor

New call for showSearch

The generated list

Now, in the buildSuggestion() I'll create an auxiliary list, that will receive different values depending on a condition. In the case of the search field is empty (or query.isEmpty == true), the auxiliary list will receive a list of recent items searched. In the other case, it'll receive a list of items that contain the text of query. After, I'll create a that returns the suggestionList.

buildSuggestion method

In the onTap parameter of ListTile, I'll define the String selectedResult equal the text pressed and call the function showResults(context) that will call the buildResult method.


Now is the time for your developer superpower to take action. I just pass how works the native search mechanic of flutter with a very simple example. You can customize many of these widgets.

Have a suggestion? Leave a comment!

Top comments (8)

appsmaker_ profile image
Apps Maker

fristaly I wan thank you ..

sacend can coustom this code for my app in which make the search suggestions is my listview and when clicked the search result from search box navigator to dateiles of my listview
that's clicked

please help my

luizeduardotj profile image
Luiz Eduardo

Hey... First of all, glad to know the article was helpful.

In this case, you'll need a data list to provider for Widget buildSuggestion() method generates the suggestions. With the list you can use ListView.builder() to generate ListTile, and in the onTap attribute, navigate to detail page passing the object as parameter.

I hope helped. If don't work or if i wasn't clear in the answer, please reply this answer.

moh2dar profile image
Mohssine Dardar

Amazing, Thanks

kabirnayeem99 profile image
Naimul Kabir


thuanpv1 profile image


luizeduardotj profile image
Luiz Eduardo


jovane21 profile image
Jovane Mullings

why is it saying missing concrete implementation?

luizeduardotj profile image
Luiz Eduardo

Sorry, i didn't understand the question. Where's missing the implementation?