Flutter: Formatting TextField with TextInputFormatter

A common task in mobile apps is formatting fields, like credit cards, phone numbers, zip code, etc. In Flutter, we achieve this using TextInputFormatter.

In TextFormField and TextField, the property inputFormatters allows you to pass a list of TextInputFormatter to define how that field will behave.

There are 3 useful built-in implementations:

LengthLimitingTextInputFormatter: prevents the insertion of more characters than a limit;

WhitelistingTextInputFormatter: allows only the insertion of whitelisted characters patterns;

BlacklistingTextInputFormatter: prevents the insertion of blacklisted characters patterns.

And they have some static properties to help us:

WhitelistingTextInputFormatter.digitsOnly: takes in digits [0–9] only.

BlacklistingTextInputFormatter.singleLineFormatter: forces input to be a single line;

You can combine formatters:

With RegExp, you can customize your formatters (as above properties does):

WhitelistingTextInputFormatter(RegExp("[a-zA-Z]"))

BlacklistingTextInputFormatter(RegExp("[/\\]"))

It is simple and easy to use, but some times you need create your own formatter. And it is easy too. Just extend TextInputFormatterand implement formatEditUpdate method.

Take a look on the code bellow, from flutter_gallery example app:

As we can see, there is no limit.

Flutter offers to developers excellent built-in formatters and makes easy to extend and create our own. Let’s use.

Make easy to your user input data in form fields with formatters.

Comments

[Leonidas Yopan]

Sweet Rubens. What if we need a range, I don't want the user to input any value that exceeds a max value (example 0 - 100.0). Can I extend that and still allow the user to work with decimals? This is what I have thus far:

class CustomRangeTextInputFormatter extends TextInputFormatter {
  final double maxValue;

  CustomRangeTextInputFormatter({@required this.maxValue});

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (newValue.text == '')
      return TextEditingValue();
    else if (int.parse(newValue.text) < 0) return TextEditingValue().copyWith(text: '0');

    return int.parse(newValue.text) > maxValue ? TextEditingValue().copyWith(text: maxValue.toString()) : newValue;
  }
}

But unfortunately it doesn't allow the user to use decimals. (Exemplo: 2.3, 10.7, 85.3, etc...)
Thanks.

[Adeyanju Akorede]

I think that's because you are using int.parse() instead of double.parse()

At least that did it for me

[Mohit Kumar Yadav]

@rubensdemelo I'm trying to build an input which accepts input in 'de' (German) locale. For example 6.5 is written 6,5 in de locale. Basically decimal point is (comma). What should I do?

[Parsa Gachkar]

The Example is not updating the text are you sure the code is working?

[saktoun-iliass]

Thnak you