Flutter. Formatting TextField with TextInputFormatter

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. It simplifies the process, gives feedback, minimizes errors, and generally improves user interaction.

Flutter can take valid formatted data using the TextInputFormatter class, which provides us with various constraints. It can also be optionally entered into a TextFormField or TextField as a validator and corrects the text format when editing text. 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.

In this article, you’ll learn how to format data in TextFormField and TextField. 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 case will be added.

The types of TextInputFormatter

The Flutter framework provides us with two built-in TextInputFormatter:

• FilteringTextInputFormatter — creates a formatting tool that allows or blocks characters that match the pattern.
• LengthLimitingTextInputFormatter — allows you to insert only a certain number of characters.

You can also use RegExp to customize your formatters. You can find out more about that here.

The custom TextInputFormatter

You have already seen in the examples how the TextInput Formatter is used in the widget tree. But sometimes, you need to create your own formatter for a specific task. We can create a custom TextInputFormatter by extending the TextInput Formatter and implementing the formatEditUpdate method, which accepts two parameters of type TextEditingValue: oldValue and old newValue.

1. The following code will allow you to specify a template and delimiter line to implement the desired behavior, such as entering a credit card number.

You can configure the TextInputFormatter as follows:

We passed the “xxxx-xxx-xxx-xxx-xxxxx” pattern and the “-” delimiter to control the input behavior for the credit card field.

2. Here, we are going to specify another custom TextInputFormatter. You can use it to replace a comma with a period.

3. In this example, we only need to enter a rational number, which means that only one point is needed.

4. The next TextInputFormatter will allow us to stay within a certain number.

The maximum rational number we specify is 5.5, so if we go beyond this number, the value automatically equals 5.5.

As we can see, there are no limits. Flutter offers developers excellent built-in formatting tools and makes it easy to extend and create your own.