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 escape 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.