autocomplete_textfield 1.7.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

autocomplete_textfield #

An autocomplete textfield for flutter

pull requests #

Feel free to submit pull requests for desired changes / features / bug fixes... It makes the maintenance of this code much easier as I no longer use Flutter frequently.

Pub Package Can Be Found At #

Pub Package

Breaking Changes #

TextField is set by default to call onSubmitted on a suggestion tap and also to clear the TextField on submit.

These can both be disabled with submitOnSuggestionTap and clearOnSubmit respectively.

Usage #

AutoCompleteTextField supports any data type suggestions

new AutoCompleteTextField<YOURDATATYPE>()

The suggestions parameter must have data that matches <YOURDATATYPE>

A global key of type GlobalKey<AutoCompleteTextFieldState<T>> is required so that the clear() method can be called to clear AutoCompleteTextField.

Strings and itemFilter #

Filtering is case sensitive so when using strings a common implementation of itemFilter is .
itemFilter: (item, query) { return item.toLowerCase().startsWith(query.toLowerCase()); }

Changelog #


Works great published version 1


A few bug fixes and more functionality added.

Added textInputAction.

Breaking Changes [1.4.0] #

TextField is set by default to call onSubmitted on a suggestion tap and also to clear the TextField on submit.

These can both be disabled with submitOnSuggestionTap and clearOnSubmit respectively.

[1.4.1] Added textCapitalization option


Added the ability to update suggestions dynamically!

Use updateSuggestions, addSuggestion and removeSuggestion.


Oops, spelling error.


Fixed the non-string datatype issue.


Exposed textField


Fixed example and new vid thing

[1.6.4] Added input formatters.

[1.6.7] Added TextEditingController to SimpleAutoCompleteTextfield. Added null check to focus node listener.

[1.6.8] Implemented dispose for autocomplete_textfield, cleans up resources after using. Also added focusNode which can be passed in by user.

[1.7.0] Added the ability to specify starting text through TextEditingController, and the new method triggerSubmit was added.

Breaking Changes #

Now submitting text calls triggerSubmit and clearText clears internal current text.

[1.7.1] All fields are final now in AutoCompleteTextField.

[1.7.3] InputDecoration and styles etc can now be changed dynamically with the updateDecoration() method.


import 'package:autocomplete_textfield/autocomplete_textfield.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Auto Complete TextField Demo',
      theme: new ThemeData(
      home: new MyHomePage(),

class MyHomePage extends StatefulWidget {
  State<StatefulWidget> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> pages = [new FirstPage(), new SecondPage()];
  int selectedIndex = 0;

  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
              icon: new Center(child: new Text("1")),
              title: new Text("Simple Use")),
          new BottomNavigationBarItem(
              icon: new Center(child: new Text("2")),
              title: new Text("Complex Use")),
        onTap: (index) => setState(() {
              selectedIndex = index;
        currentIndex: selectedIndex,
      body: pages[selectedIndex],

class FirstPage extends StatefulWidget {
  _FirstPageState createState() => new _FirstPageState();

class _FirstPageState extends State<FirstPage> {
  List<String> added = [];
  String currentText = "";
  GlobalKey<AutoCompleteTextFieldState<String>> key = new GlobalKey();

  _FirstPageState() {
    textField = SimpleAutoCompleteTextField(
      key: key,
      decoration: new InputDecoration(errorText: "Beans"),
      controller: TextEditingController(text: "Starting Text"),
      suggestions: suggestions,
      textChanged: (text) => currentText = text,
      clearOnSubmit: true,
      textSubmitted: (text) => setState(() {
            if (text != "") {

  List<String> suggestions = [
    "Ice Cream",
    "Kiwi Fruit",
    "Palm Oil",
    "T-Bone Steak",
    "Urid Dal",

  SimpleAutoCompleteTextField textField;
  bool showWhichErrorText = false;

  Widget build(BuildContext context) {
    Column body = new Column(children: [
      new ListTile(
          title: textField,
          trailing: new IconButton(
              icon: new Icon(Icons.add),
              onPressed: () {
                showWhichErrorText = !showWhichErrorText;
                    decoration: new InputDecoration(
                        errorText: showWhichErrorText ? "Beans" : "Tomatoes"));

    body.children.addAll( {
      return new ListTile(title: new Text(item));

    return new Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: new AppBar(
            title: new Text('AutoComplete TextField Demo Simple'),
            actions: [
              new IconButton(
                  icon: new Icon(Icons.edit),
                  onPressed: () => showDialog(
                      builder: (_) {
                        String text = "";

                        return new AlertDialog(
                            title: new Text("Change Suggestions"),
                            content: new TextField(
                                onChanged: (newText) => text = newText),
                            actions: [
                              new FlatButton(
                                  onPressed: () {
                                    if (text != "") {
                                  child: new Text("Add")),
                      context: context))
        body: body);

class ArbitrarySuggestionType {
  //For the mock data type we will use review (perhaps this could represent a restaurant);
  num stars;
  String name, imgURL;

  ArbitrarySuggestionType(this.stars,, this.imgURL);

class SecondPage extends StatefulWidget {
  State<StatefulWidget> createState() => _SecondPageState();

class _SecondPageState extends State<SecondPage> {
  List<ArbitrarySuggestionType> suggestions = [
    new ArbitrarySuggestionType(4.7, "Minamishima",
    new ArbitrarySuggestionType(1.5, "The Meat & Wine Co Hawthorn East",
    new ArbitrarySuggestionType(3.4, "Florentino",
    new ArbitrarySuggestionType(
        "Syracuse Restaurant & Winebar Melbourne CBD",
    new ArbitrarySuggestionType(1.1, "Geppetto Trattoria",
    new ArbitrarySuggestionType(3.4, "Cumulus Inc.",
    new ArbitrarySuggestionType(2.2, "Chin Chin",
    new ArbitrarySuggestionType(5.0, "Anchovy",
    new ArbitrarySuggestionType(4.7, "Sezar Restaurant",
    new ArbitrarySuggestionType(2.6, "Tipo 00",
    new ArbitrarySuggestionType(3.4, "Coda",
    new ArbitrarySuggestionType(1.1, "Pastuso",
    new ArbitrarySuggestionType(0.2, "San Telmo",
    new ArbitrarySuggestionType(3.6, "Supernormal",
    new ArbitrarySuggestionType(4.4, "EZARD",
    new ArbitrarySuggestionType(2.1, "Maha",
    new ArbitrarySuggestionType(4.2, "MoVida",

  GlobalKey key =
      new GlobalKey<AutoCompleteTextFieldState<ArbitrarySuggestionType>>();

  AutoCompleteTextField<ArbitrarySuggestionType> textField;

  ArbitrarySuggestionType selected;

  _SecondPageState() {
    textField = new AutoCompleteTextField<ArbitrarySuggestionType>(
      decoration: new InputDecoration(
          hintText: "Search Resturant:", suffixIcon: new Icon(,
      itemSubmitted: (item) => setState(() => selected = item),
      key: key,
      suggestions: suggestions,
      itemBuilder: (context, suggestion) => new Padding(
          child: new ListTile(
              title: new Text(,
              trailing: new Text("Stars: ${suggestion.stars}")),
          padding: EdgeInsets.all(8.0)),
      itemSorter: (a, b) => a.stars == b.stars ? 0 : a.stars > b.stars ? -1 : 1,
      itemFilter: (suggestion, input) =>

  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        title: new Text('AutoComplete TextField Demo Complex'),
      body: new Column(children: [
        new Padding(
            child: new Container(child: textField),
            padding: EdgeInsets.all(16.0)),
        new Padding(
            padding: EdgeInsets.fromLTRB(0.0, 64.0, 0.0, 0.0),
            child: new Card(
                child: selected != null
                    ? new Column(children: [
                        new ListTile(
                            title: new Text(,
                            trailing: new Text("Rating: ${selected.stars}/5")),
                        new Container(
                            child: new Image(
                                image: new NetworkImage(selected.imgURL)),
                            width: 400.0,
                            height: 300.0)
                    : new Icon(Icons.cancel))),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  autocomplete_textfield: ^1.7.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:autocomplete_textfield/autocomplete_textfield.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [autocomplete_textfield] that is in a package requiring null.

Maintenance suggestions

Package is getting outdated. (-0.27 points)

The package was last published 52 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies