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 one of the many Flutter packages available in the Flutter dev library. The package provides the format for TextField and TextFormField and can mold the input text into the prescribed mask or format.
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
Be the first to comment.