Flutter AutoComplete Widget Example

This article helps you how to integrate flutter autocomplete widget in mobile app to provide suggestions when user is entering something in textfield. We already implemented search bar with listview in flutter application.

Flutter AutoComplete widget has many properties to customize textfield widget with suggestions. optionsBuilder property is used to get suggestions which are filtered with textfield value. onSelected callback is used to detect when suggestion value is selected by users. displayStringForOption property is used to display suggestions to users according to their entered text.

optionsViewBuilder property is used to assemble selectable options widgets from suggestions list. fieldViewBuilder property is used to build material styled textfield in flutter app. In this flutter example, we are displaying popular football players names as suggestions. We are not using any third party library or plugin to integrate autocomplete widget in flutter application.

Add suggestions in array

List<String> listSoccerPlayers = [];

@override
void initState() {
super.initState();
listSoccerPlayers.add(‘Mohamed Salah’);
listSoccerPlayers.add(‘Joao Felix’);
listSoccerPlayers.add(‘Georginio Wijnaldum’);
listSoccerPlayers.add(‘Serge Gnabry’);
listSoccerPlayers.add(‘Romelu Lukaku’);
listSoccerPlayers.add(‘Cristiano Ronaldo’);
listSoccerPlayers.add(‘Son Heung-min’);
listSoccerPlayers.add(‘Andy Robertson’);
listSoccerPlayers.add(‘Jadon Sancho’);
listSoccerPlayers.add(‘Thiago Silva’);
listSoccerPlayers.add(‘Jan Oblak’);
listSoccerPlayers.add(‘Joshua Kimmich’);
listSoccerPlayers.add(‘Sergio Ramos’);
}

Flutter AutoComplete Widget

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter AutoComplete Sample’)),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
return listSoccerPlayers
.where((String playerName) => playerName.toLowerCase()
.startsWith(textEditingValue.text.toLowerCase())
)
.toList();
},
displayStringForOption: (String playerName) => playerName,
fieldViewBuilder: (
BuildContext context,
TextEditingController fieldTextEditingController,
FocusNode fieldFocusNode,
VoidCallback onFieldSubmitted
) {
return TextField(
controller: fieldTextEditingController,
focusNode: fieldFocusNode,
style: const TextStyle(fontWeight: FontWeight.bold),
);
},
onSelected: (String selectedPlayerName) {
print(‘Selected: ${selectedPlayerName}’);
},
optionsViewBuilder: (
BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options
) {
return Align(
alignment: Alignment.topLeft,
child: Material(
child: Container(
width: 250,
color: Colors.greenAccent,
child: ListView.builder(
padding: EdgeInsets.all(12),
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final String optionStr = options.elementAt(index);
return GestureDetector(
onTap: () {
onSelected(optionStr);
},
child: ListTile(
title: Text(optionStr, style: const TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold)),
),
);
},
),
),
),
);
},
),
),
);
}