A TypeAhead (autocomplete) widget for Flutter

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.