'How to use InputFormatter on Flutter TextField?
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.
Solution 1:[1]
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.
Solution 2:[2]
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]"))
]
Solution 3:[3]
BlacklistingTextInputFormatter
and WhitelistingTextInputFormatter
is @Deprecated
version 1.20.0
Now you can use FilteringTextInputFormatter
to do InputFormatter
on TextField
or TextFormField
.
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^ ?\d*')),]
inputFormatters: [FilteringTextInputFormatter.deny(' ')]
inputFormatters: [FilteringTextInputFormatter.digitsOnly]
For e.x
TextFormField(
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly
],
),
Solution 4:[4]
import 'package:flutter/services.dart';
Use these parameters in the TextFormField
.
maxLength: 5,
keyboardType: TextInputType.number,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly,],
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Monday Fatigue |
Solution 2 | Ãlvaro Agüero |
Solution 3 | Amit Prajapati |
Solution 4 | iDecode |