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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root view class named as MyApp extends with State less widget. In this class we would call ListSearch() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Apply Search on ListView') ), body: Center( child: ListSearch() ) ) ); } } |
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.
|
1 2 3 |
class ListSearch extends StatefulWidget { ListSearchState createState() => ListSearchState(); } |
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.
|
1 2 3 4 5 |
class ListSearchState extends State<ListSearch> { } |
6. Creating a TextEditingController named as _textController. We would use _textController to get the entered value from TextField widget.
|
1 |
TextEditingController _textController = TextEditingController(); |
7. Creating a String List array named as mainDataList. This is our main items list for ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
static List<String> mainDataList = [ "Apple", "Apricot", "Banana", "Blackberry", "Coconut", "Date", "Fig", "Gooseberry", "Grapes", "Lemon", "Litchi", "Mango", "Orange", "Papaya", "Peach", "Pineapple", "Pomegranate", "Starfruit" ]; |
8. Now we have to copy the above List Items into another List String because we are making changes in newDataList.
|
1 2 |
// Copy Main List into New List. List<String> newDataList = List.from(mainDataList); |
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.
|
1 2 3 4 5 6 7 |
onItemChanged(String value) { setState(() { newDataList = mainDataList .where((string) => string.toLowerCase().contains(value.toLowerCase())) .toList(); }); } |
10. Creating Widget Build area -> Scaffold widget -> Column widget -> Padding widget -> TextField widget and ListView widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(12.0), child: TextField( controller: _textController, decoration: InputDecoration( hintText: 'Search Here...', ), onChanged: onItemChanged, ), ), Expanded( child: ListView( padding: EdgeInsets.all(12.0), children: newDataList.map((data) { return ListTile( title: Text(data), onTap: ()=> print(data),); }).toList(), ), ) ], ), ); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Apply Search on ListView') ), body: Center( child: ListSearch() ) ) ); } } class ListSearch extends StatefulWidget { ListSearchState createState() => ListSearchState(); } class ListSearchState extends State<ListSearch> { TextEditingController _textController = TextEditingController(); static List<String> mainDataList = [ "Apple", "Apricot", "Banana", "Blackberry", "Coconut", "Date", "Fig", "Gooseberry", "Grapes", "Lemon", "Litchi", "Mango", "Orange", "Papaya", "Peach", "Pineapple", "Pomegranate", "Starfruit" ]; // Copy Main List into New List. List<String> newDataList = List.from(mainDataList); onItemChanged(String value) { setState(() { newDataList = mainDataList .where((string) => string.toLowerCase().contains(value.toLowerCase())) .toList(); }); } @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(12.0), child: TextField( controller: _textController, decoration: InputDecoration( hintText: 'Search Here...', ), onChanged: onItemChanged, ), ), Expanded( child: ListView( padding: EdgeInsets.all(12.0), children: newDataList.map((data) { return ListTile( title: Text(data), onTap: ()=> print(data),); }).toList(), ), ) ], ), ); } } |
Screenshots:
Amazing….exactly what i was looking !!
Perfect !!
Welcome 🙂 .
Perfect work.
Nice one. Thanks
onTap: ()=> print(data),
I want to navigate all list to another screen with different properties they have .. how can I do?
Dev you want to navigate to each search item through individual screen Am I right ?
Yes , you’re right
Hey,
Thanks for this, I just have one question what if we want the list of fruits to be in Cloud Firestore and retrieve from there, what changes we need to make?
Read my this tutorial this would help you : https://flutter-examples.com/flutter-http-pub-package/ now all we have to do is set the data here with new object.