AutoComplete is a nice feature for any possible input field, be it on Web or Mobile. In flutter you can implement a AutoComplete text field in various ways, starting from using your very own
TextEditingController. But there are easier ways. Let me show you one.
I'm going to use
flutter_typeahead package. Implementing AutoComplete with this package is really easy!
First add this to your
pubspec.yaml and run
flutter packages get:
Next start using it in our app. First we need a
List of data or a
Future with will return a List of data.
Future<List> getDataList(query) async => await serviceToGetData(query);
Now build up the Widget:
import 'package:flutter_typeahead/flutter_typeahead.dart'; final TextEditingController _controller; TypeAheadField( textFieldConfiguration: TextFieldConfiguration( controller: _controller, decoration: InputDecoration( icon: Icon(Icons.add), labelText: 'My Awesome AutoComplete', ), ), suggestionsCallback: getDataList, itemBuilder: (context, option) => ListTile(title: Text(option),), onSuggestionSelected: (option) => _controller.text = option, );
You can tweak
textFieldConfiguration to get your desired input field style and everything.
onSuggestionSelected is the place where you might want to set your state.
What is your preferred way to implement AutoComplete feature in your Flutter app? Please share with us in the comments below.