Autocomplete Widget in Flutter

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.

To use Autocomplete, we need to call the constructor underneath:

Autocomplete<T extends Object>

Autocomplete({
  Key? key,
  AutocompleteOptionToString<T> displayStringForOption 
      = RawAutocomplete.defaultStringForOption,
   required AutocompleteOptionsBuilder<T> optionsBuilder,
   AutocompleteFieldViewBuilder fieldViewBuilder =  
   _defaultFieldViewBuilder,
   AutocompleteOnSelected<T>? onSelected,
   AutocompleteOptionsBuilder<T>? optionsViewBuilder,
})

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:

class User {
  const User({
    required this.email,
    required this.name,
  });

  final String email;
  final String name;

  @override
  String toString() {
    return '$name, $email';
  }
}

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:

class AutocompleteUser extends StatelessWidget {
  const AutocompleteUser({Key? key}) : super(key: key);

  static const List<User> _userOptions = <User>[
    User(name: 'Dart', email: 'dart@example.com'),
    User(name: 'Flutter', email: 'flutter@example.com'),
    User(name: 'Android', email: 'android@gmail.com'),
  ];

  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)}');
      },
    );
  }
}

class AutocompleteUser extends StatelessWidget {

const AutocompleteUser({Key? key}) : super(key: key);

static const List<User> _userOptions = <User>[

User(name: 'Dart', email: '[email protected]'),

User(name: 'Flutter', email: '[email protected]'),

User(name: 'Android', email: '[email protected]'),

];

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.

Ravi Kishor 31 August 2022

. . .

Autocomplete Widget in Flutter

Introduction

Properties

Implementation

Leave a Comment Cancel Reply

Message Sent!