Auto Complete in Flutter

The Flutter typeahead package is a package that allows you to add autocomplete functionality to your applications. It provides suggestions based on the text entered by the user and handles the user’s selection. This can help accelerate user input and improve the user experience. In this article, we will learn how to use the typeahead package in Flutter with example code.

What is the typeahead package? The typeahead package provides an easy way to implement autocomplete functionality in Flutter applications. It allows you to provide suggestions to the user as they type and handle the selected item. This can be useful in various scenarios where you need to provide a list of suggestions based on user input.

Example Code: Let’s create a sample application using the typeahead package. In this example, we will provide autocomplete functionality on a fruit list.

Step 1: Adding the Package To use the typeahead package in your Flutter project, add the following dependency to the pubspec.yaml file:

dependencies:
  flutter_typeahead: ^x.x.x

Replace x.x.x with the version number of the typeahead package you are using. Then, update the Flutter project by running the command flutter pub get in the terminal.

Step 2: Using the Typeahead Widget To use the typeahead package, follow these steps:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fruit Typeahead',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FruitTypeaheadScreen(),
    );
  }
}

class FruitTypeaheadScreen extends StatefulWidget {
  @override
  _FruitTypeaheadScreenState createState() => _FruitTypeaheadScreenState();
}

class _FruitTypeaheadScreenState extends State<FruitTypeaheadScreen> {
  final List<String> fruits = [
    'Apple',
    'Banana',
    'Orange',
    'Grapes',
    'Mango',
    'Strawberry',
  ];

  String selectedFruit = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fruit Typeahead'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(
              hintText: 'Search for a fruit',
            ),
          ),
          suggestionsCallback: (pattern) {
            return fruits
                .where((fruit) => fruit.toLowerCase().contains(pattern.toLowerCase()))
                .toList();
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          onSuggestionSelected: (suggestion) {
            setState(() {
              selectedFruit = suggestion;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Text('Selected fruit: $selectedFruit'),
        ),
      ),
    );
  }
}

In this example, we created a fruit list and implemented autocomplete functionality based on the user’s input. As the user types, suggestions will be presented, and we will handle the user’s selection. Additionally, there is a text in the bottom app bar that displays the selected fruit.

When you run this example, you can search for fruits and make a selection from the suggested fruits. The selected fruit will be displayed in the bottom app bar.

The Flutter typeahead package is a useful package for adding autocomplete functionality to your applications. It provides a convenient way to enhance user input and improve the user experience. In this article, we created a sample application that demonstrates autocomplete functionality on a fruit list using the typeahead package. You can explore the documentation of the typeahead package to discover more features and apply it to different scenarios.