What do I need to insert into TextField(inputFormatters:
?
I want to disallow \ and / in one TextField
and only allow a to Z in another.
Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the style parameter and assign the TextField widget. Step 3: Inside the TextField widget, add the color parameter and set the color of your choice.
By default, a TextField is decorated with an underline. You can add a label, icon, inline hint text, and error text by supplying an InputDecoration as the decoration property of the TextField . To remove the decoration entirely (including the underline and the space reserved for the label), set the decoration to null.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With