How to format the textFormField input in Flutter

Rishabh Bisht

27 November 2024

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.

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.

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() => 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.

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