Note: If you’re new in flutter and want to create very basic to advanced autocompleting fields, then this post is for you, keep going!

Everyone knows about autocomplete fields, there are around of us. We can see them in the mobile app, website, desktop app and etc.

Did you even try creating autocomplete fields in flutter? Ah, It’s a little bit harder thing for newbie flutter dev. When you are a new learner it probably seems impossible.

Okay, then packages can help us. (I think most of us know about packages/plugins, If you don’t know don’t worry, Just follow this offical documentation about packages and read that and, then come back!).

One of them I wrote is the field_suggestion package that helps us to create Basic to advanced autocomplete fields. It’s easy to use, fully customizable, and controllable.

Before starting the explaining how to use this package I wanna show you an overview of applications where I used this package.

Anon app’s search bar

It’s a screenshot from an open source application named: Anon. There we use field_suggestion as our search bar. Check for details: https://github.com/theiskaa/anon

Okay it’s enough, let’s get started using Field Suggestion.

Requirements:

An TextEditingController and suggestions list is must to have.

Very basic usage

Here we have, just text editing controller and suggestion list (as string)

External control

Here we just wrapped our Scaffold with GestureDetector to handle gestures on the screen.
And now we can close box when we tap on the screen. (You can do it everywhere, where you used FieldSuggestion with BoxController).

Class suggestions

Note: You must have toJson method in your model class. if you wanna use it in suggestion list.

If we gave a userSuggestions which is List<UserModel>. Then we must add the searchBy property. Otherwise we will get an error like:

If given suggestionList's runtimeType isn't List<String>, List<int> or List<double>. That means, you was gave a List which includes dart classes. So then [searchBy] can't be null.

Our model has email, username, and password, right? So then we can implement it like: searchBy: ['email'] or searchBy: ['email', 'username'].

FieldSuggestion.builder

And finally time to talk about newest feature of FieldSuggestion. builder factory. Which give us ability to customize our suggestion items as we wish.

First of all we gonna make a FieldSuggestion which’s suggestions is List<Object> so you should take a look at class suggestions.

We wanna get this result: let’s get started!

User model class:

Suggestion list and controllers:

And finally FieldSuggestion.builder(…) widget:

Note: Look at the ListTile’s title widget. It’s special made package for FieldSuggestion, so that means you can use it without FieldSuggestion. However, highlightable comes integrated with FieldSuggestion. So you can use it without importing. Please visit official readme to get more about how to highlight texts. Probably example which provided down below, is enough to understand how to use it.