Flutter — Auto Complete TextField

Auto Complete /Suggestion Input

This article is about how to create Auto Complete TextField in Flutter.

If you are able to understand the working by just looking at it then fine otherwise let me explain it one by one.

Here i have used Autocomplete Widget and it’s parent is LayoutBuilder.

Layout Builder

The reason behind using this LayoutBuilder is it helps to have constraint of based on the parent widget, without constraint it is trying to take the completed width of the screen.

AutoComplete — Parameters

1. fieldViewBuilder — This parameter is used to define how the TextField view will look.It takes 4 fields. a)context b)editing controller — controller for your text field c)focus node — focus node for text field d)on field submitted — to use keyboard done button
2. optionViewBuilder — It is responsible for the view of suggestions. It’s parameters are 1) context 2)onSelect — function to be called when clicked on any option listed 3)iterableData — returned by the optionBuilder after matching the field which you want.
3. onSelected — Here you can define what will happen if you click on a single suggestion. It’s having the selected data as parameter.
4. optionBuilder — It contains textEditingController, so that you can filter your data and return back.
5. displayStringForOption — This is responsible for changing your textController Data i.e. after selecting one suggestion if you want to update the textField value than you can do that using this field.
6. initialValue — It takes textEditingValue and you can use it for starting the search with some pre-filled text.

Last two are not shown in code, it’s very simple not much of complexity is there with these two fields.

soon will add some screenshot.