Exploring Simple Widgets II: Autocomplete

Making user-friendly and effective interfaces is crucial in today's quickly changing world of app development. The Flutter autocomplete widget is one of the widgets that have the potential to substantially improve the user experience. This dynamic feature makes entering and retrieving data easier while enhancing user involvement. This post will explore Flutter's autocomplete widget and show how it can improve how users experience your apps.

The Autocomplete widget is a powerful widget provided by the Flutter library that enables users to efficiently input data by offering predictive suggestions. This functionality significantly reduces user effort and enhances their experience. There are use cases for this widget in E-commerce apps where users can get real-time suggestion when searching for a product, travel and booking apps to suggest places to users and much more.

How to use the Autocomplete Widget

In your scaffold body, we create the Autocomplete widget and provide the required optionsBuilder parameter which is used to provide the list of suggestions that should be displayed when the field is focused. The autocomplete widget infers a type T that extends Object and as such should be created with the type which could be int, String or even custom Objects.
The stripped down code of the autocomplete widget would look like so

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Autocomplete'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Center(
          child: Autocomplete<int>(
            optionsBuilder: (val){
              return [1,2,3,4,5];
            },
          )
        ),
      )
       );
       }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Autocomplete'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Center(
          child: Autocomplete<String>(
            optionsBuilder: (val){
              return ['Cat', 'Dog', 'Fish', 'Goat', 'Sheep'];
            },
          )
        ),
      )
       );
       }

The above implementation shows the suggestions as soon as the textfield is in focus but that isn't what we aim to achieve. There are other parameters that gives us customization and allow us to tweak the widget to our need.
To begin, we can customize the widget to only show the options as soon as the user starts typing and show only relevant options based on user input

class Home extends StatelessWidget {
  List<String> animals = ['Cat', 'Dog', 'Fish', 'Goat', 'Sheep'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Autocomplete'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Center(
          child: Autocomplete<String>(
            optionsBuilder: (val){
              if(val.text.isEmpty){
                return [];
              }
              return animals.where((animal){
                return animal.toLowerCase().contains(val.text);
              });
            },
          )
        ),
      )
       );
       }
}

Customizing Options

Using the optionsViewBuilder parameter, we can customize the way our suggestions are presented to fit our app's design.

 Autocomplete<String>(
            optionsBuilder: (val){
              if(val.text.isEmpty){
                return [];
              }
              return animals.where((animal){
                return animal.toLowerCase().contains(val.text.toLowerCase());
              });
            },
            optionsViewBuilder: (context,onSelected, options){
             return ListView.builder(
                    itemCount: options.length,
                    itemBuilder: (context,index){
                            String x = options.elementAt(index);
                      return Card(child: ListTile(
                        onTap: () => onSelected(x),
                        title: Text(x, style: TextStyle(color: Colors.blue))));
                    },
                  );
            },
          )

The autocomplete widget can be populated with various customized list and even data fetched asynchronously opening various possibilities to the usage. There are also various packages that have been made for even more customization and flexibility to save you a ton of stress. Find them on Pub.dev

Conclusion

Autocomplete widgets shine as tools that not only enhance efficiency but also contribute to the overall satisfaction of users. From their seamless implementation to their potential across various industries, autocomplete widgets empower developers to create highly interactive, top-tier applications.
For more information, check out the Flutter docs for the autocomplete class