Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial

Search Bar filter is one of the most popular filter techniques used in mobile applications. In search bar filters we would use TextField widgets to filter complete JSON or Static List data. Every time when user types something in TextInput widget it would start searching that particular word or character in List and show only matched data. This searching technique is fully non case sensitive so not matter your data in capital or small format it will filter them all. In current tutorial we are using Local list items array and filter them but in upcoming tutorials we would apply same filter technique on JSON arrays. So in this tutorial we would Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial.

Contents in this project Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main MyApp class.

3. Creating our main Root view class named as MyApp extends with State less widget. In this class we would call ListSearch() class.

4. Create a class named as ListSearch extends StatefulWidget. In this class we would make createState() method and call ListSearchState() class. The createState() method would enable mutable state management in given class tree.

5. Create a class named as ListSearchState extends State<ListSearch>. This is our main Child class in which we would make ListView with Search bar.

6. Creating a TextEditingController named as _textController. We would use _textController to get the entered value from TextField widget.

7. Creating a String List array named as mainDataList. This is our main items list for ListView.

8. Now we have to copy the above List Items into another List String because we are making changes in newDataList.

9. Create a function named as onItemChanged() with String parameter. We would call this function on onChanged event of TextField widget. So every time when user starts typing in TextField widget it will start filtering the data and set the filter data into State.

10. Creating Widget Build area -> Scaffold widget -> Column widget -> Padding widget -> TextField widget and ListView widget.

11. Complete source code for main.dart file:

Screenshots:

Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial

Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial Apply Search Bar Filter on ListView in Flutter Android iOS Example Tutorial

7 Comments

  1. Chandravardhan Singh Raghaw

    Amazing….exactly what i was looking !!

    Perfect !!

  2. ‪ammar saleem‬‏

    Perfect work.

  3. Nice one. Thanks

  4. onTap: ()=> print(data),
    I want to navigate all list to another screen with different properties they have .. how can I do?

  5. Yes , you’re right

Leave a Reply

Your email address will not be published. Required fields are marked *