How to format the textFormField input in Flutter

Rishabh Bisht

10 July 2023

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.

dev_dependencies:
  flutter_test:
   sdk: flutter

mask_text_input_formatter: ^2.4.0<!-- /wp:paragraph -->

dev_dependencies:

flutter_test:

sdk: flutter

mask_text_input_formatter: ^2.4.0

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';

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

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(),
    );
  }

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 :

MaskTextInputFormatter(mask: "##/##/####") // for date
MaskTextInputFormatter(mask: "+## ##########") // for phone number

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.

        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,
            )
        ),

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,

)

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.

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,
              )
          ),

        ],
      ),
    );
  }
}

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

https://pub.dev/packages/mask_text_input_formatter