How to use InputFormatter on Flutter TextField?

Formatters

In the services library you will find the TextInputFormatter abstract class (this means that you have to import package:flutter/services.dart).

It already has implementations, which are FilteringTextInputFormatter (formerly BlacklistingTextInputFormatter and WhitelistingTextInputFormatter) and LengthLimitingTextInputFormatter.

If you want to implement your own formatter, you can do so by extending TextInputFormatter itself and implementing formatEditUpdate in there.

I will show how to apply the premade FilteringTextInputFormatter with given context.

Examples

disallow \ and /

For this we are going to use the FilteringTextInputFormatter.deny constructor:

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.deny(RegExp(r'[/\\]')),
  ],
)

For the Pattern, which needs to be supplied to the formatter, I will be using RegExp, i.e. regular expressions. You can find out more about that here, which also links you to the features I will be using in my examples.

Pay attention to the double backslash \\ and the raw string (r'') in this example. This represents only a single backslash in reality. The reason for this is that backslashes are escape keys in RegExp, so we need to use two backslashes if we want to match the \ character. We would even need quadruple backslashes(\\\\) without the raw string (r'…') because Dart also uses backslashes as escape keys. Using a raw string will ensure that Dart does not unescape characters.

If we were to block a, b, F, !, and ., we would also put it in a list […] like this:

FilteringTextInputFormatter.deny(RegExp('[abF!.]'))

This translates to "deny/blacklist all 'a', 'b', 'F', '!' and '.'".

only allow a to Z

This time we use the FilteringTextInputFormatter.allow constructor:

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
  ],
)

For this, we are specifying two ranges of characters: a-z and A-Z, which will also accept all the characters (here all the letters) in-between those two specified. This will also work for 0-9 and you can append any character to that list, e.g. a-zA-Z0-9!. will also take ! and . into account.

We can combine this

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
    FilteringTextInputFormatter.deny(RegExp('[abFeG]')),
  ],
)

This is only to show that inputFormatters takes a List<InputFormatter> and multiple formatters can be combined. In reality, you can solve this with one allow/whitelist and a regular expression, but this does work as well.

digitsOnly

There are also already included static properties in the FilteringTextInputFormatter class: one of these is FilteringTextInputFormatter.digitsOnly.
It will only accept/allow digits and is equivalent to an .allow(RegExp('[0-9]')) formatter.


Other options:

  • lowercase letters : a-z

  • capital letters : A-Z

  • lowercase vowels accented : á-ú

  • capital vowels accented : Á-Ú

  • numbers : 0-9
  • space : (a space)

Note: the spacings are to explain better

inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-z A-Z á-ú Á-Ú 0-9]"))
      ]

Tags:

Dart

Flutter

Recent Posts