Flutter – Dynamic Textfield Autocompletion

AutoComplete Text fields are Useful UI Components in mobile app development that provide users with real-time suggestions based on their input. Flutter, offers the easiest way to implement dynamic AutoComplete Text using the flutter_typeahead package. This package simplifies the process of creating auto-complete functionality. In this article, we are going to implement an auto-complete Text Field using the flutter_typeahead package. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Adding the Dependencies

Here we have to add the the following dependencies to our pubspec.yaml file.

dependencies:
  flutter_typeahead: ^5.0.1

Or, Simply you can run the below command in your VS code Terminal.

flutter pub add flutter_typeahead

Step 3: Import the Package

First of all import material.dart package and the flutter_typeahead package.

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

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
          primarySwatch: Colors.green, // Set the app's primary theme color
        ),
        debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

Step 6: Create MyHomePage Class

The MyHomePage class in this Flutter application defines a screen with a dynamic AutoCompleteTextField. The body of the screen consists of a padding widget with a TypeAheadField. Within the TypeAheadField, a TextFieldConfiguration is set up to customize the appearance of the text input field, with a placeholder label of “Search.” The suggestionsCallback function is crucial, as it asynchronously filters the predefined list of suggestions based on the user’s input, converting it to lowercase for case-insensitive matching. The itemBuilder defines how each suggestion should be presented, and in this case, a ListTile is used to display each suggestion as a selectable list item. The onSuggestionSelected callback handles the action when a suggestion is chosen. Comments are added for better understanding.

TypeAheadField(
          // Configuration for the text field
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(labelText: 'Search'),
          ),
          // Callback to fetch suggestions based on user input
          suggestionsCallback: (pattern) async {
            return suggestions
                .where((suggestion) =>
                    suggestion.toLowerCase().contains(pattern.toLowerCase()))
                .toList();
          },
          // Widget to build each suggestion in the list
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          // Callback when a suggestion is selected
          onSuggestionSelected: (suggestion) {
            // Handle the selected suggestion
            print('Selected: $suggestion');
          },
        ),

Dart

class MyHomePage extends StatelessWidget {
  // list of suggestions
  final List<String> suggestions = [
    'Flutter',
    'Dart',
    'Android',
    'iOS',
    'Kotlin',
    'Java',
    'Swift',
    'Objective-C',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic AutoCompleteTextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TypeAheadField(
          // Configuration for the text field
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(labelText: 'Search'),
          ),
          // Callback to fetch suggestions based on user input
          suggestionsCallback: (pattern) async {
            return suggestions
                .where((suggestion) =>
                    suggestion.toLowerCase().contains(pattern.toLowerCase()))
                .toList();
          },
          // Widget to build each suggestion in the list
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          // Callback when a suggestion is selected
          onSuggestionSelected: (suggestion) {
            // Handle the selected suggestion
            print('Selected: $suggestion');
          },
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

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(
       theme: ThemeData(
          primarySwatch: Colors.green, // Set the app's primary theme color
        ),
        debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  // list of suggestions
  final List<String> suggestions = [
    'Flutter',
    'Dart',
    'Android',
    'iOS',
    'Kotlin',
    'Java',
    'Swift',
    'Objective-C',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic AutoCompleteTextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TypeAheadField(
          // Configuration for the text field
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(labelText: 'Search'),
          ),
          // Callback to fetch suggestions based on user input
          suggestionsCallback: (pattern) async {
            return suggestions
                .where((suggestion) =>
                    suggestion.toLowerCase().contains(pattern.toLowerCase()))
                .toList();
          },
          // Widget to build each suggestion in the list
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          // Callback when a suggestion is selected
          onSuggestionSelected: (suggestion) {
            // Handle the selected suggestion
            print('Selected: $suggestion');
          },
        ),
      ),
    );
  }
}

Output: