Want to create toolbar searchview in Flutter? You can use the below code snippet of search view with list filter below. it will help for others.
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | 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)); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
