Flutter — Auto Complete TextField

  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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Thakur

Abhishek Thakur

Software Designer & Developer | Flutter Developer | Tech Stack Explorer