How to create toolbar searchview in flutter - dart

Question

I need to implement searchview in toolbar my app to filter a list view:

Answer 1

With the help #aziza answer i write detail code snippet of search view with list filter below. it will help for others
import 'package:flutter/material.dart';
class SearchList extends StatefulWidget {
SearchList({ Key key }) : super(key: key);
#override
_SearchListState createState() => new _SearchListState();
}
class _SearchListState extends State<SearchList>
{
Widget appBarTitle = new Text("Search Sample", style: new TextStyle(color: Colors.white),);
Icon actionIcon = new Icon(Icons.search, color: Colors.white,);
final key = new GlobalKey<ScaffoldState>();
final TextEditingController _searchQuery = new TextEditingController();
List<String> _list;
bool _IsSearching;
String _searchText = "";
_SearchListState() {
_searchQuery.addListener(() {
if (_searchQuery.text.isEmpty) {
setState(() {
_IsSearching = false;
_searchText = "";
});
}
else {
setState(() {
_IsSearching = true;
_searchText = _searchQuery.text;
});
}
});
}
#override
void initState() {
super.initState();
_IsSearching = false;
init();
}
void init() {
_list = List();
_list.add("Google");
_list.add("IOS");
_list.add("Andorid");
_list.add("Dart");
_list.add("Flutter");
_list.add("Python");
_list.add("React");
_list.add("Xamarin");
_list.add("Kotlin");
_list.add("Java");
_list.add("RxAndroid");
}
#override
Widget build(BuildContext context) {
return new Scaffold(
key: key,
appBar: buildBar(context),
body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: _IsSearching ? _buildSearchList() : _buildList(),
),
);
}
List<ChildItem> _buildList() {
return _list.map((contact) => new ChildItem(contact)).toList();
}
List<ChildItem> _buildSearchList() {
if (_searchText.isEmpty) {
return _list.map((contact) => new ChildItem(contact))
.toList();
}
else {
List<String> _searchList = List();
for (int i = 0; i < _list.length; i++) {
String name = _list.elementAt(i);
if (name.toLowerCase().contains(_searchText.toLowerCase())) {
_searchList.add(name);
}
}
return _searchList.map((contact) => new ChildItem(contact))
.toList();
}
}
Widget buildBar(BuildContext context) {
return 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, color: Colors.white,);
this.appBarTitle = new TextField(
controller: _searchQuery,
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)
),
);
_handleSearchStart();
}
else {
_handleSearchEnd();
}
});
},),
]
);
}
void _handleSearchStart() {
setState(() {
_IsSearching = true;
});
}
void _handleSearchEnd() {
setState(() {
this.actionIcon = new Icon(Icons.search, color: Colors.white,);
this.appBarTitle =
new Text("Search Sample", style: new TextStyle(color: Colors.white),);
_IsSearching = false;
_searchQuery.clear();
});
}
}
class ChildItem extends StatelessWidget {
final String name;
ChildItem(this.name);
#override
Widget build(BuildContext context) {
return new ListTile(title: new Text(this.name));
}
}
Output :

Answer 2

You just need to alternate between the state whenever the user taps on the icon. Beside a little bit of refactoring an code cleaning on your side, this simple example should get you going.
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");
}
});
} ,),]
),
);
}
}

Answer 3

Screenshot (Null safe):
You should use SearchDelegate which comes out of the box with Flutter. Here is a small video how it works:
Full code:
class SearchPage extends StatefulWidget {
#override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
String? _result;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Search')),
body: Center(
child: Column(
children: <Widget>[
Text(_result ?? '', style: TextStyle(fontSize: 18)),
ElevatedButton(
onPressed: () async {
var result = await showSearch<String>(
context: context,
delegate: CustomDelegate(),
);
setState(() => _result = result);
},
child: Text('Search'),
),
],
),
),
);
}
}
class CustomDelegate extends SearchDelegate<String> {
List<String> data = nouns.take(100).toList();
#override
List<Widget> buildActions(BuildContext context) => [IconButton(icon: Icon(Icons.clear), onPressed: () => query = '')];
#override
Widget buildLeading(BuildContext context) => IconButton(icon: Icon(Icons.chevron_left), onPressed: () => close(context, ''));
#override
Widget buildResults(BuildContext context) => Container();
#override
Widget buildSuggestions(BuildContext context) {
var listToShow = data;
if (query.isNotEmpty)
listToShow = data.where((e) => e.contains(query)).toList();
return ListView.builder(
itemCount: listToShow.length,
itemBuilder: (_, i) {
var noun = listToShow[i];
return ListTile(
title: Text(noun),
onTap: () => close(context, noun),
);
},
);
}
}

Answer 4

If you want a simple search bar, you can do it with a customized TextField
import 'package:flutter/material.dart';
class SearchBar extends StatelessWidget {
final void Function(String) onTextChange;
SearchBar({ this.onTextChange });
#override
Widget build(BuildContext context) {
return Container(
height: 50,
padding: EdgeInsets.all(8),
child: TextField(
onChanged: onTextChange,
decoration: InputDecoration(
fillColor: Colors.black.withOpacity(0.1),
filled: true,
prefixIcon: Icon(Icons.search),
hintText: 'Search something ...',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
contentPadding: EdgeInsets.zero
)
)
);
}
}

Answer 5

You can do by edit leading, title and actions of AppBar. As you can see bellow.
appBar: new AppBar(
leading: _isSearching ? const BackButton() : null,
title: _isSearching ? _buildSearchField() : _buildTitle(context),
actions: _buildActions(),
),
You can see it here in detail. They guys have built a simple demo for that.