Text Input Enhancements: Auto-Completion, Filtering, and More
Explore advanced text input enhancements in Flutter, including auto-completion, input filtering, and visual aids for improved user experience.
7.3.4 Text Input Enhancements
In the world of mobile app development, user input is a critical component that can significantly impact the user experience. Flutter provides a robust set of tools and packages to enhance text input fields, making them more intuitive and user-friendly. This section delves into various techniques to improve text input fields, including auto-completion, input filtering, masking, and visual enhancements.
Auto-Completion and Suggestions
Auto-completion and suggestions can greatly enhance the user experience by reducing the amount of typing required and helping users make accurate entries. The flutter_typeahead package is a powerful tool for implementing these features in Flutter applications.
Implementing Auto-Completion with flutter_typeahead
The flutter_typeahead package provides a simple way to add auto-completion to your text fields. Here’s a basic example of how to use it:
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
class AutoCompleteExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Auto-Completion Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(labelText: 'City'),
),
suggestionsCallback: (pattern) {
return CitiesService.getSuggestions(pattern);
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (String suggestion) {
// Handle the selected suggestion
print('Selected: $suggestion');
},
),
),
);
}
}
class CitiesService {
static List<String> getSuggestions(String query) {
List<String> cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'];
return cities.where((city) => city.toLowerCase().contains(query.toLowerCase())).toList();
}
}
Explanation:
- TypeAheadFormField: This widget provides a text field with auto-completion capabilities.
- suggestionsCallback: This function is called whenever the user types into the text field. It returns a list of suggestions based on the input pattern.
- itemBuilder: This function builds the UI for each suggestion.
- onSuggestionSelected: This callback is triggered when a user selects a suggestion.
Filtering Input
Input filtering is essential for ensuring that users enter data in the correct format. Flutter’s FilteringTextInputFormatter allows you to restrict input to specific characters.
Example: Allowing Only Hexadecimal Characters
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HexInputExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hexadecimal Input Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(labelText: 'Enter Hex Value'),
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r'[0-9a-fA-F]')),
],
),
),
);
}
}
Explanation:
- FilteringTextInputFormatter.allow: This formatter restricts input to characters that match the provided regular expression. In this case, it allows only hexadecimal characters (0-9, a-f, A-F).
Masking Input Fields
Input masks are useful for formatting inputs like phone numbers, credit card numbers, or dates. The mask_text_input_formatter package can be used to apply masks to text fields.
Example: Phone Number Masking
import 'package:flutter/material.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
class PhoneNumberMaskExample extends StatelessWidget {
final maskFormatter = MaskTextInputFormatter(mask: '(###) ###-####');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Phone Number Mask Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(labelText: 'Phone Number'),
keyboardType: TextInputType.phone,
inputFormatters: [maskFormatter],
),
),
);
}
}
Explanation:
- MaskTextInputFormatter: This formatter applies a mask to the input field. The mask
(###) ###-####formats the input as a phone number.
Adding Prefixes and Suffixes
Enhancing text fields with prefixes and suffixes can provide additional context or functionality. For example, you might add an icon or text to indicate the type of input expected.
Example: Adding Icons and Text
import 'package:flutter/material.dart';
class PrefixSuffixExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Prefix and Suffix Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Username',
prefixIcon: Icon(Icons.person),
suffixText: '@example.com',
),
),
),
);
}
}
Explanation:
- prefixIcon: Adds an icon before the input field.
- suffixText: Adds text after the input field, useful for domains or units.
Visual Aids
Visual aids can significantly enhance the usability of input fields. Here are some examples of how you can apply these enhancements:
- Auto-Completion: Use a dropdown list to show suggestions as the user types.
- Input Filtering: Highlight invalid input with a red border or error message.
- Input Masking: Display the mask pattern as a placeholder to guide the user.
Best Practices
When enhancing text input fields, it’s important to ensure that these enhancements improve usability without confusing the user. Here are some best practices:
- Clarity: Ensure that input fields are clearly labeled and provide hints where necessary.
- Accessibility: Make sure that enhancements do not hinder accessibility. Use labels and hints that can be read by screen readers.
- Consistency: Maintain consistency in input field design across your application.
Exercise
As a practical exercise, try creating an email input field that automatically appends a domain name and provides suggestions from a list of contacts. Here’s a starting point:
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
class EmailInputExample extends StatelessWidget {
final List<String> contacts = ['alice@example.com', 'bob@example.com', 'charlie@example.com'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Email Input Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(
labelText: 'Email',
suffixText: '@example.com',
),
),
suggestionsCallback: (pattern) {
return contacts.where((contact) => contact.contains(pattern)).toList();
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
onSuggestionSelected: (String suggestion) {
// Handle the selected suggestion
print('Selected: $suggestion');
},
),
),
);
}
}
Conclusion
Enhancing text input fields in Flutter can greatly improve the user experience by making data entry more intuitive and efficient. By implementing features like auto-completion, input filtering, and visual aids, you can create a more engaging and user-friendly application. Remember to always consider usability and accessibility when designing your input fields.
