Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use InputFormatter on Flutter TextField?

Tags:

flutter

dart

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.

like image 257
creativecreatorormaybenot Avatar asked May 01 '18 20:05

creativecreatorormaybenot


People also ask

How do you change the input text style in TextField Flutter?

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.

How do you customize a TextField in Flutter?

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.


1 Answers

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.

like image 166
creativecreatorormaybenot Avatar answered Oct 07 '22 15:10

creativecreatorormaybenot