Flutter Autocomplete example

Last updated on March 10, 2021 A Goodman Loading... One comment

Flutter 2.0 came out a few days ago and brings us a very useful widget called Autocomplete. With this new friend, we now can quickly implement autocomplete text field without using any third-party plugins. Making a search field with suggestions that appear as the user types something is now neat and easy.

In this article, we will examine a complete example of using the Autocomplete widget in Flutter.

The Example

Preview

In this example app, the user can enter several characters in the search field to look up some animals. The animals whose names match characters the user entered will appear in the list of suggestions. The one selected from a list of suggestions will appear in the text widget below.

The code

Here is the full code with explanations in the comments:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // This will be displayed below the autocomplete field
  String _selectedAnimal;

  // This list holds all the suggestions 
  final List<String> _suggestions = [
    'Alligator',
    'Buffalo',
    'Chicken',
    'Dog',
    'Eagle',
    'Frog'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          Container(
            child: Autocomplete(
              optionsBuilder: (TextEditingValue value) {
                // When the field is empty
                if (value.text.isEmpty) {
                  return [];
                }

                // The logic to find out which ones should appear
                return _suggestions.where((suggestion) => suggestion
                    .toLowerCase()
                    .contains(value.text.toLowerCase()));
              },
              onSelected: (value) {
                setState(() {
                  _selectedAnimal = value;
                });
              },
            ),
          ),
          SizedBox(
            height: 30,
          ),
          Text(_selectedAnimal != null
              ? _selectedAnimal
              : 'Type something (a, b, c, etc)'),
        ],
      ),
    );
  }
}

Conclusion

This article has walked you through a full example of implementing the Autocomplete widget. From now on, it will be easier for you to create autocomplete text fields when building apps. If you would like to learn more new and interesting things in Flutter, take a look at the following articles:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Related Articles

guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
محمدحسین فخرآوری
محمدحسین فخرآوری
13 days ago

hi
good post filter

1
0
Would love your thoughts, please comment.x
()
x