In main.dart file, we’ll create skeleton of demo. We’ll add autocomplete textfield related code step by step:

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: AutoComplete(),

),

);

}

}



class AutoComplete extends StatefulWidget {



@override

_AutoCompleteState createState() => new _AutoCompleteState();

}



class _AutoCompleteState extends State<AutoComplete> {



_AutoCompleteState();



@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Auto Complete List Demo'),

),

body: new Center(

child: new Column(

children: <Widget>[

new Column(children: <Widget>[ //AutoCompleteTextField code here

]),

])));

}

}

Above code is pretty straightforward and doesn’t do anything fancy yet. This will display in UI as:

We’ll add textfield now. Instead of using Flutter’s TextField widget, we’ll be using AutoCompleteTextField. This class offers simple and versatile properties and methods. We’ll cover these later in this article, but let’s use this class as below inside _AutoCompleteState class :

AutoCompleteTextField searchTextField;

Since AutoCompleteTextField is an extension of TextField widget, it inherits all properties that are required to build and display basic textfield including a hint text.

Let’s add this first. Inside build function and under new Column widget, we’ll add code to display basic textfield with a hint:

searchTextField = AutoCompleteTextField<Players>(

style: new TextStyle(color: Colors.black, fontSize: 16.0),

decoration: new InputDecoration(

suffixIcon: Container(

width: 85.0,

height: 60.0,

),

contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),

filled: true,

hintText: 'Search Player Name',

hintStyle: TextStyle(color: Colors.black)),

As you may have noticed, I’ve passed class Players as the datatype to AutoCompleteTextField constructor, since it allows any data type as suggestions.

Above code will render the following UI:

Next, if we hover mouse on AutoCompleteTextField<Players> line of code, it will ask us to implement the required parameters. These are:

Let’s take a look at them one by one and how each one of them helps us to implement auto-complete list.

itemBuilder: This is a callback to build each item in the list that is going to be displayed containing suggested data and returns a widget. Ie we’ll add code inside this parameter that’ll actually render the AutoCompleteTerm and country data when user types a keyword.

itemBuilder: (context, item) {

return Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

Text(item.autocompleteterm,

style: TextStyle(

fontSize: 16.0

),),

Padding(

padding: EdgeInsets.all(15.0),

),

Text(item.country,

)

],

);

},

itemFilter: This is a callback to filter item and returns true or false depending on input text. Ie, if there’s a match with entered player name, it’ll return true and display related text, else won’t display any matching name.

itemFilter: (item, query) {

return item.autocompleteterm

.toLowerCase()

.startsWith(query.toLowerCase());

}

itemSorter: This is a callback to sort items.

itemSorter: (a, b) {

return a.autocompleteterm.compareTo(b.autocompleteterm);

},

itemSubmitted: This is a callback on item selected. Ie after selecting item from list, this parameter sets that item in the textfield . Since, we need to maintain the item selected in the Textfield , we’ll put code for this inside setState() method. Code inside it will grab the item selected and put it in the textfield.

In order to set / retrieve value from textfield, we need to make use of TextEditingController class, so that whenever any value is updated in the textfield or text is changed, we can listen to the controller. We’ll need to declare controller as new instance of TextEditingController class as :

TextEditingController controller = new TextEditingController(); itemSubmitted: (item) {

setState(() => searchTextField.textField.controller.text = item.autocompleteterm);

},

key: A global key of type GlobalKey<AutoCompleteTextFieldState<T>> is required to enable adding suggestions to the textfield and also the clear() method can be called to clear AutoCompleteTextField, if required.

GlobalKey<AutoCompleteTextFieldState<Players>> key = new GlobalKey(); key: key,

suggestions: This will enable the suggestions that are going to be displayed in UI, and we’ll call the instance of PlayersViewModel class here to load the suggestions.