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 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.

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