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.
|
1 2 3 4 5 |
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.
|
1 |
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:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import 'package:flutter/material.dart'; import 'package:mask_text_input_formatter/mask_text_input_formatter.dart'; void main() => 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 :
|
1 2 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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() => 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<FormatText> createState() => _FormatTextState(); } class _FormatTextState extends State<FormatText> { @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