The power of TextInputFormatter in Flutter

When creating apps TextField are the one thing that any developer will have to handle. Unfortunately I’ve stumbled too many times into TextField that do not enforce any formatting even when one was obviously needed.

In Flutter we have a super power that really can help developers deliver an amazing experience: TextInputFormatter. Often the extent of what this class allow is underestimated.

Three things that makes it a Swiss Knife for a smooth user experience:

1. TextField accepts a list of TextInputFormatter that will be executed sequentially.
2. TextInputFormatter can edit both the text and the cursor position
3. You can use regular expression

Let’s check some examples

A text field to accept weight in Kg

For such a text field we need to do the following:

• Limit the input to only numbers
• Format the text to add a Kg suffix
• keep the cursor at the end of the numeric part

Here it is how to we could achieve this: