flutter search bar with listview
Flutter search bar with list in these flutter tutorials we share how to filter out a list. like you have a large number of items so finding a particular item from the list it’s very difficult. So that we make it easy to implement search view. Search view widgets are user an edit field user can enter any keyword then search filter out the list according to input word.
flutter search View example.
Table of Contents
So Let’s implement a flutter search view firstly create a flutter project and sync your project after that open your main.dart file and clear the main dart file code. and follow the below code example for the flutter search bar. In this example, we used a static list of data and filter out the list with user input.
Create a Search bar widgets in flutter used below code.
// Search bar in app bar flutter
class SearchAppBar extends StatefulWidget {
@override
_SearchAppBarState createState() => new _SearchAppBarState();
}
class _SearchAppBarState extends State<SearchAppBar> {
Widget appBarTitle = new Text("AppBar Title");
Icon actionIcon = new Icon(Icons.search);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title:appBarTitle,
actions: <Widget>[
new IconButton(icon: actionIcon,onPressed:(){
setState(() {
if ( this.actionIcon.icon == Icons.search){
this.actionIcon = new Icon(Icons.close);
this.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search,color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)
),
);}
else {
this.actionIcon = new Icon(Icons.search);
this.appBarTitle = new Text("AppBar Title");
}
});
} ,),]
),
);
}
After that create a list of items and filter data add a new list and How to Create Searching with ListView in Flutter?
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(),
),
)
],
),
);
}
}
Main.Dart File full Source code
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(),
),
)
],
),
);
}
}
// Search bar in app bar flutter
class SearchAppBar extends StatefulWidget {
@override
_SearchAppBarState createState() => new _SearchAppBarState();
}
class _SearchAppBarState extends State<SearchAppBar> {
Widget appBarTitle = new Text("AppBar Title");
Icon actionIcon = new Icon(Icons.search);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title:appBarTitle,
actions: <Widget>[
new IconButton(icon: actionIcon,onPressed:(){
setState(() {
if ( this.actionIcon.icon == Icons.search){
this.actionIcon = new Icon(Icons.close);
this.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search,color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)
),
);}
else {
this.actionIcon = new Icon(Icons.search);
this.appBarTitle = new Text("AppBar Title");
}
});
} ,),]
),
);
}
}
hare we create a static list of data and show it
