Autocomplete can show some suggestions to users as they type. AutoComplete is one of the common features available in lot of mobile applications as well as website applications. In web application we can achieve this functionality using some jQuery plugins .Jquery UI is the one of the best solution for making auto complete.
Today iam sharing similar type of autocomplete plugin in Flutter. If you are new in Flutter please read some beginners guide to catch .
In this tutorial we are using a third party library called flutter_typeahead . Using this library we can easy to create auto complete plugins.

Features
- Showing suggestions in an overlay of other widgets
- Allows you to specify what the suggestions will look like through a builder function
- Allows you to specify what happens when the user taps a suggestion
- Accepts all values similar to textbox.
- There are wo versions, First one is normal version and the next one is FormField version that accepts validation, submitting, etc.
- Easy to customize like box decorations ,loading bar, animations etc.
Installation
Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section
dependencies:
flutter_typeahead: ^1.9.1
After save the flutter_typeahead packages are automatically downloaded and included into your project.
Import
You can import the package with:
import 'package:flutter_typeahead/flutter_typeahead.dart';
For Cupertino users import:
import 'package:flutter_typeahead/cupertino_flutter_typeahead.dart';
Use it as follows:
Material Example 1:
TypeAheadField( textFieldConfiguration: TextFieldConfiguration( autofocus: true, style: DefaultTextStyle.of(context).style.copyWith( fontStyle: FontStyle.italic ), decoration: InputDecoration( border: OutlineInputBorder() ) ), suggestionsCallback: (pattern) async { return await BackendService.getSuggestions(pattern); }, itemBuilder: (context, suggestion) { return ListTile( leading: Icon(Icons.shopping_cart), title: Text(suggestion['name']), subtitle: Text('\$${suggestion['price']}'), ); }, onSuggestionSelected: (suggestion) { Navigator.of(context).push(MaterialPageRoute( builder: (context) => ProductPage(product: suggestion) )); }, )
In the code above, the textFieldConfiguration
property allows us to configure the displayed TextField
as we want. In this example, we are configuring the autofocus
, style
and decoration
properties.
The suggestionsCallback
is called with the search string that the user types, and is expected to return a List
of data either synchronously or asynchronously.
The itemBuilder
is called to build a widget for each suggestion. In this example, we build a simple ListTile
that shows the name and the price of the item.
The onSuggestionSelected
is a callback called when the user taps a suggestion. In this example, when the user taps a suggestion, we navigate to a page that shows us the information of the tapped product.
Material Example 2:
Here’s another example, where we use the TypeAheadFormField inside a Form
:
final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); final TextEditingController _typeAheadController = TextEditingController(); String _selectedCity; ... Form( key: this._formKey, child: Padding( padding: EdgeInsets.all(32.0), child: Column( children: <Widget>[ Text( 'What is your favorite city?' ), TypeAheadFormField( textFieldConfiguration: TextFieldConfiguration( controller: this._typeAheadController, decoration: InputDecoration( labelText: 'City' ) ), suggestionsCallback: (pattern) { return CitiesService.getSuggestions(pattern); }, itemBuilder: (context, suggestion) { return ListTile( title: Text(suggestion), ); }, transitionBuilder: (context, suggestionsBox, controller) { return suggestionsBox; }, onSuggestionSelected: (suggestion) { this._typeAheadController.text = suggestion; }, validator: (value) { if (value.isEmpty) { return 'Please select a city'; } }, onSaved: (value) => this._selectedCity = value, ), SizedBox(height: 10.0,), RaisedButton( child: Text('Submit'), onPressed: () { if (this._formKey.currentState.validate()) { this._formKey.currentState.save(); Scaffold.of(context).showSnackBar(SnackBar( content: Text('Your Favorite City is ${this._selectedCity}') )); } }, ) ], ), ), )
Here, we assign to the controller
property of the textFieldConfiguration
a TextEditingController
that we call _typeAheadController
.
The transitionBuilder
allows us to customize the animation of the suggestion box. In this example, we are returning the suggestionsBox immediately, meaning that we don’t want any animation.