Input formatters in Textfield Flutter

How to add auto-formatters in the text field, while adding text in the text field.

Extracting valid formatted data is essential when your application requires credit card information, phone numbers, zip codes, etc. This approach makes it easier for the developer to enter valid data into the application.

When the user enters something into an input field. The value will be adjusted automatically, and things like punctuation and dashes, removing unexpected characters, trimming spaces, and changing word cases will be added.

So, we will check how to add formatters in textfield. To add formatting to our code we will use a plugin called “mask_text_input_formatter”.

1. To use plugin “mask_text_input_formatter” we have added dependency in pubspec.yaml file.
2. Import the library:

import 'package:mask_text_input_formatter/mask_text_input_formatter.dart'; 

The “inputFormatter” parameter in TextFormField or TextField allows developers to pass a list of classes of type TextInputFormatter to define the field’s behavior. TextInputFormatter translates the field value into text and the text into the field value.

When the user enters something into an input field. The value will be adjusted automatically, and things like punctuation and dashes, removing unexpected characters, trimming spaces, and changing word cases will be added.

Now we will see some examples of how to use formatters.

1. If we want to use an auto formatter for SSN (Social Security Number).

SSN number is nine-digit, and we have to separate these nine digits by (-).

TextFormField(
  inputFormatters: [
    MaskTextInputFormatter(
      mask: "###-##-####",
      filter: {"#": RegExp(r'[0-9]')},
    )
  ],
);

2. If we want to format the date with format MM/DD/YYYY, format month, date, and year by ( / ).

TextFormField(
  inputFormatters: [
    MaskTextInputFormatter(
      mask: "##/##/####",
      filter: {
        "#": RegExp(r'\d+|-|/'),
      },
    )
  ]
);

3. If we want to format credit card numbers, then we can do with the following steps.

TextFormField(
  inputFormatters: [
    MaskTextInputFormatter(
      mask: "xxxx-xxxx-xxxx",          
    )
  ]
);

In this way, we can format our text withTextFormField and TextField in a flutter.