Here we are going to explore the Autocomplete widget in a flutter.
Introduction
A widget for helping the user make a selection by entering some text and choosing from among a list of options.
Check out the official: Autocomplete class
It would be nice if we could provide a list of options for users to choose from if you have a text field in your Flutter application, depending on the situation. With this, users can now improve their user experience without having to input the entire text. Using the Autocomplete widget in Flutter, we can achieve it.
You may also check our interactive app designs by our Flutter app development company
To use Autocomplete, we need to call the constructor underneath:
Autocomplete<T extends Object>
|
1 2 3 4 5 6 7 8 9 10 |
Autocomplete({ Key? key, AutocompleteOptionToString<T> displayStringForOption = RawAutocomplete.defaultStringForOption, required AutocompleteOptionsBuilder<T> optionsBuilder, AutocompleteFieldViewBuilder fieldViewBuilder = _defaultFieldViewBuilder, AutocompleteOnSelected<T>? onSelected, AutocompleteOptionsBuilder<T>? optionsViewBuilder, }) |
The Autocomplete class itself has a generic type T extends Object. That implies the choice item can be of any type of object.
Properties
The properties of Autocomplete are:
- displayStringForOption: Returns the string to be shown for choice.
- optionsBuilder: Returns the current selectable options objects given the current TextEditingValue.
- fieldViewBuilder: Builds the field whose input is used to get the options. If not provided, will build a standard Material-style text field by default.
- onSelected: A function that will be considered when a choice is chosen by the user.
- optionsViewBuilder: Builds the selectable options widgets from a list of options objects. If not provided, will build a standard Material-style list of results by default.
Implementation
Create a User class for the custom option:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class User { const User({ required this.email, required this.name, }); final String email; final String name; @override String toString() { return '$name, $email'; } } |
Create an AutocompleteUser class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
class AutocompleteUser extends StatelessWidget { const AutocompleteUser({Key? key}) : super(key: key); static const List<User> _userOptions = <User>[ ]; static String _displayStringForOption(User option) => option.name; @override Widget build(BuildContext context) { return Autocomplete<User>( displayStringForOption: _displayStringForOption, optionsBuilder: (TextEditingValue textEditingValue) { if (textEditingValue.text == '') { return const Iterable<User>.empty(); } return _userOptions.where((User option) { return option .toString() .contains(textEditingValue.text.toLowerCase()); }); }, onSelected: (User selection) { debugPrint('You just selected ${_displayStringForOption(selection)}'); }, ); } } |
Flutter Autocomplete Demo App:
Thanks for reading.
Happy Coding 🙂
For more Flutter tutorials visit Mobikul Blogs.
Be the first to comment.