Search Bar in flutter
Tags: ios, dart, flutter, android
Published: 2020-06-23 13:46:36


[Link for the code](https://github.com/luizeduardotj/searchbarflutterexample)

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](https://dev-to-uploads.s3.amazonaws.com/i/gfsnwfq2meaxdwe0jj3j.gif)

#### **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](https://dev-to-uploads.s3.amazonaws.com/i/7ce4p1l0c9px6itevrbs.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/g0pj9h0678hjp3g640ws.PNG)

#### **The key**

Now, let's create a [class inherited](https://dart.dev/guides/language/language-tour#extending-a-class) from `SearchDelegate` class and do an override of the four main methods.

![SearchDelegate class created](https://dev-to-uploads.s3.amazonaws.com/i/v6io7b8z8atzvzqsa1zv.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/orids5arzdwvz0lvfwpj.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/2ib5awh69i1cznelx86q.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/8idy344fzxm8rirlxyoh.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/3h7y11nrhsiwgkg6r09r.PNG)

![New call for showSearch](https://dev-to-uploads.s3.amazonaws.com/i/wdkd860amk37gb7msdr6.PNG)

![The generated list](https://dev-to-uploads.s3.amazonaws.com/i/u6pblf72n7mgg7hgjg4g.PNG)

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 `ListView.build` that returns the `suggestionList`.

![buildSuggestion method](https://dev-to-uploads.s3.amazonaws.com/i/8jkogap58wfhymf13edm.PNG)

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.

![ListView.builder()](https://dev-to-uploads.s3.amazonaws.com/i/ivkz8gtddpe678p2fch0.PNG)

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!