Requirement:

To perform a search operation such that search result would occur instantaneous according to the input given by the user without changing the appbar. Usually, as per the material design, search is done by changing the App Bar to a search but to obtain the result as per requirement follow the below article.

Native Search operation using search bar:

The below image is an example of native search where search operation is done as per material design.

Requirement:

The below image explains the requirement.

Design:

The implementation is designed using basic widgets such as TextField(a text input widget), ListView(a widget to build a scrollable list) and ‘Contains’ method of Flutter.

The below prototype has been used to build the solution to address the above scenario.

Take the input from the user using text input widget(TextField)

Make the search operation to it with “Contains” method

Generate the search result list of it using the ListView builder widget

Implementation:

The below are the series of steps that are required to be performed to implement a search operation in a list page of an app. The below steps are the brief of the prototype defined.

Step 1:

Here, the inclusion of text input widget is detailed and also the advantage of using this in an app is defined.

The text field is one of the text input widget offered by Flutter that helps the user to type text into the app.Text fields can be used to build forms, messaging apps, search experiences and more. Using text field input for search is taken from user. The below screenshot holds the code of it.

Step2:

Here, the code for search operation is defined.

Text field class holds a property named “On changed” — a callback. This callback functions whenever there is a change in the text that is being typed. Write a method for this callback to perform a search operation. The reason for defining a method to this callback is to perform search operation continuously whenever the text changes, so that the search result can be seen instantaneous . The below screenshot holds the code of it.

Step 3:

Here the code where the search result generation is defined.

The “contains” method which is used in the previous step will fetch the search result. Add the search result obtained to another new list. Using the ListView.builder constructor of ListView class, generate the series of list tile with the newly created list as an input. ListView.builder constructor creates a scrollable, linear array of widgets that would be created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. The below screenshot holds the code of it.

Output:

on succesful implementation of the above detailed steps the following output is obtained.

You can get the full source code of this app at the following Github repo.

https://github.com/ThiranTech/Flutter_search