How to format the textFormField input in Flutter

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.

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. 

After Importing the above package into our main.dart, our code should look like this:-

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 :

Now, we only need to put this format inside the inputFormatter parameter of TextFormField and add the TextFormField to our widget tree.

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.

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