How to Use InputFormatter on Flutter TextField?

· 2 min read
How to Use InputFormatter on Flutter TextField
How to Use InputFormatter on Flutter TextField

When the form has a multiple TextField Widget in it each TextField accept an only certain type of values in a certain format. To make TextField accept only certain types of InputFormatter is used.

How to Use InputFormatter on Flutter TextField?

Formatters

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.

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

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

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.

Now you can use FilteringTextInputFormatter to do InputFormatter on TextField Widget or TextFormField.

inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^ ?\d*')),]
   inputFormatters: [FilteringTextInputFormatter.deny(' ')]
   inputFormatters: [FilteringTextInputFormatter.digitsOnly]

For e.x

TextFormField(
          keyboardType: TextInputType.number,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly
          ],
        ),

Other options:

  • lowercase letters: a-z
  • capital letters: A-Z
  • lowercase vowels accented: á-ú
  • capital vowels accented: Á-Ú
  • numbers: 0-9
  • space : (space)

Note: the spacings are to explain better.

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

Conclusion:

In this article, We have been through How to Use InputFormatter on Flutter TextField?

Thanks for Reading!!! Keep Learning.

Do let us know if you need any assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply