CODEWITHSUNDEEP
dartflutter
creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126744

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.

Upvotes: 68

Views: 122832

Answers (5)

Muhammad Hassan Saleem
Muhammad Hassan Saleem

Reputation: 81

First of all you have to check you have imported the following package:

import 'package:flutter/services.dart';

then you can use it like following:

TextFormField(
  inputFormatters: [
    FilteringTextInputFormatter(RegExp("[a-zA-Z]"), allow: true),
  ]);

Upvotes: 5

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126744

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.

Upvotes: 161

Kenneth N
Kenneth N

Reputation: 99

import 'package:flutter/services.dart';

Use these parameters in the TextFormField.

maxLength: 5,
keyboardType: TextInputType.number,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly,],

Upvotes: -1

Amit Prajapati
Amit Prajapati

Reputation: 14315

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
            ],
          ),

Upvotes: 18

&#193;lvaro Ag&#252;ero
&#193;lvaro Ag&#252;ero

Reputation: 4800

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]"))
      ]

Upvotes: 19

Related Questions