Today, we will learn how to format our input text of TextFormField with the help of mask_text_input_formatter.
Introduction:-
What is mask_text_input_formatter?
The mask_text_input_formatter is a Flutter package that formats TextField and TextFormField.
It applies a mask to ensure input follows a required pattern, like for phone numbers or dates, making data entry consistent and reliable.
Implementation:-
Let’s put a text field in our Flutter app and mask the input with the “mask_text_input_formatter” widget.
Step 1:- Add the package dependency
In order to use the mask_text_input_formatter, firstly we need to add this dependence in our Flutter project’s pubspec.yaml file.
dev_dependencies :
flutter_test :
sdk : flutter
mask_text_input_formatter : ^ 2.4.0 < ! -- / wp : paragraph -- >
Step 2:- Import the package in main.dart file
Next, to use the package we need to import the mask_text_input_formatter package in main.dart file.
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart' ;
After Importing the above package into our main.dart, our code should look like this:-
import 'package:flutter/material.dart' ;
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart' ;
void main ( ) =& gt ; runApp ( const MyApp ( ) ) ;
class MyApp extends StatelessWidget {
const MyApp ( { Key ? key } ) : super ( key : key ) ;
@ override
Widget build ( BuildContext context ) {
return const MaterialApp (
debugShowCheckedModeBanner : false ,
home : FormatText ( ) ,
) ;
}
Now, after importing the above package into our main.dart file we will be able to access the predefined method of mask_text_input_formatter MaskTextInputFormatter ().
Step 3:- Make the Format for Text
Finally, we just have to manually design the required text format with the mask parameter of the MaskTextInputFormatter method like this :
MaskTextInputFormatter ( mask : "##/##/####" ) // for date
MaskTextInputFormatter ( mask : "+## ##########" ) // for phone number
Now, we only need to put this format inside the inputFormatter parameter of TextFormField and add the TextFormField to our widget tree.
TextFormField (
inputFormatters : [ MaskTextInputFormatter ( mask : "##/##/####" ) ] ,
autocorrect : false ,
keyboardType : TextInputType . < em > number < / em > ,
decoration : const InputDecoration (
hintText : "31/12/2020" ,
hintStyle : TextStyle ( color : Colors . < em > grey < / em > ) ,
fillColor : Colors . < em > white < / em > ,
filled : true ,
)
) ,
Step 4:- Output
Finally, we will be able to see the output of these steps. You can also use other formats for formating your input text as mentioned above.
Complete Code:-
Here is the complete code for the above output.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import 'package:flutter/material.dart' ;
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart' ;
void main ( ) =& gt ; runApp ( const MyApp ( ) ) ;
class MyApp extends StatelessWidget {
const MyApp ( { Key ? key } ) : super ( key : key ) ;
@ override
Widget build ( BuildContext context ) {
return const MaterialApp (
debugShowCheckedModeBanner : false ,
home : FormatText ( ) ,
) ;
}
}
class FormatText extends StatefulWidget {
const FormatText ( { Key ? key } ) : super ( key : key ) ;
@ override
State & lt ; FormatText & gt ; createState ( ) =& gt ; _FormatTextState ( ) ;
}
class _FormatTextState extends State & lt ; FormatText & gt ; {
@ override
Widget build ( BuildContext context ) {
return Scaffold (
backgroundColor : Colors . grey . shade200 ,
appBar : AppBar (
title : const Text ( "How to Format The Text" ) ,
centerTitle : true ,
) ,
body : SafeArea (
child : Padding (
padding : const EdgeInsets . symmetric ( horizontal : 40 ) ,
child : Center ( child : buildTextField ( ) ) ,
) ,
)
) ;
}
Widget buildTextField ( ) {
return Padding (
padding : const EdgeInsets . symmetric ( vertical : 8.0 ) ,
child : Stack (
children : [
TextFormField (
inputFormatters : [ MaskTextInputFormatter ( mask : "##/##/####" ) ] ,
autocorrect : false ,
keyboardType : TextInputType . number ,
decoration : const InputDecoration (
hintText : "31/12/2020" ,
hintStyle : TextStyle ( color : Colors . grey ) ,
fillColor : Colors . white ,
filled : true ,
)
) ,
] ,
) ,
) ;
}
}
Conclusion
Now we are done with formatting our text using mask_text_input_formatter in Flutter. With this, our textFormField will be able to format the data automatically like:-
For more interesting blogs check out here – https://mobikul.com/blog/
References
https://pub.dev/packages/mask_text_input_formatter
Rishabh Bisht
A versatile Flutter developer with a knack for Firebase and Dart. Builds efficient iOS applications tailored to optimize functionality and exceed user expectations.
27 Nov, 2024 10 Jul, 2023
View More
. . .
Be the first to comment.