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