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