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:

flutter_typeahead: ^1.0.5

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.




What's on your mind?