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 complete reading then come back!).

One of them I wrote is the field_suggestion package that helps us to create Basic or advanced autocomplete fields.

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 suggestion list.

final textEditingController = TextEditingController();

// And
List<String> suggestionList = [
'test@gmail.com',
'test1@gmail.com',
'test2@gmail.com',
];

// Or

List<int> numSuggestions = [
13187829696,
13102743803,
15412917703,
];

// Or
// Note: Take look at [Class suggestions] part.
List<UserModel> userSuggestions = [
UserModel(email: 'test@gmail.com', password: 'test123'),
UserModel(email: 'test1@gmail.com', password: 'test123'),
UserModel(email: 'test2@gmail.com', password: 'test123')
];

Very basic usage

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

FieldSuggestion(
textController: textEditingController,
suggestionList: suggestionList,
hint: 'Email',
),

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 Example extends StatelessWidget {
final _textController = TextEditingController();
final _boxController = BoxController();

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => _boxController.close(),
child: Scaffold(
body: Center(
child: FieldSuggestion(
hint: 'test',
suggestionList: [], // Your suggestions list here...
boxController: _boxController,
textController: _textController,
),
),
),
);
}
}

Class suggestions

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

class UserModel {
final String? email;
final String? password;

const UserModel({this.email, this.password});

// If we wanna use this model class into FieldSuggestion.
// Then we must have toJson method, like this:
Map<String, dynamic> toJson() => {
'email': this.email,
'password': this.password,
};
}

If we gave a userSuggestions which is List<UserModel>. Then we must add the searchBy property. Our model has just email and password, right? So then we can implement it like: searchBy: 'email'or searchBy: 'password'.

FieldSuggestion(
hint: 'Email',
textController: textEditingController,
suggestionList: userSuggestions,
searchBy: 'email' // Or 'password'
),

Software Developer based on Earth | Design and Programming enthusiasts.

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