A custom made search field with selectable search suggestions.
import 'package:flutter/material.dart'; class Searching extends StatefulWidget { @override _SearchingState createState() => _SearchingState(); } class _SearchingState extends State<Searching> { TextEditingController editingController = TextEditingController(); final _items = List<String>.generate(100, (i) => "Søgetekst $i"); List<String> _itemsSuggestions = []; void searchResults(String query) { setState(() { _itemsSuggestions = _items .where((data) => data.toLowerCase().contains(query.toLowerCase())) .toList(); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Søgning'), ), body: Container( child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: TextField( onChanged: (value) => searchResults(value), onSubmitted: (value) { setState(() { _itemsSuggestions = []; }); print(value); }, controller: editingController, decoration: InputDecoration( isDense: true, labelText: "Søg efter varer", hintText: "Varenavn", prefixIcon: IconButton( icon: Icon(Icons.arrow_back), onPressed: () {}, ), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { editingController.text = ''; }); }), border: OutlineInputBorder( borderRadius: BorderRadius.all( Radius.circular(10.0), ), ), ), ), ), Expanded( child: ListView.builder( itemCount: _itemsSuggestions.length, itemBuilder: (context, index) { return ListTile( dense: true, leading: Icon(Icons.search, color: Colors.grey,), title: Text( '${_itemsSuggestions[index]}', style: TextStyle( color: Colors.grey, fontSize: 16, ),), onTap: () { setState(() { editingController.text = _itemsSuggestions[index]; }); }, ); }, ), ), ], ), ), ); } }
![](https://flutter-dart.dk/wp-content/uploads/2020/03/Flutter-search-field.png)