loading...

Flutter: Formatting TextField with TextInputFormatter

rubensdemelo profile image rubensdemelo ・1 min read

A common task in mobile apps is formatting fields, like credit cards, phone numbers, zip code, etc. In Flutter, we achieve this using TextInputFormatter.

In TextFormField and TextField, the property inputFormatters allows you to pass a list of TextInputFormatter to define how that field will behave.

There are 3 useful built-in implementations:

LengthLimitingTextInputFormatter: prevents the insertion of more characters than a limit;

WhitelistingTextInputFormatter: allows only the insertion of whitelisted characters patterns;

BlacklistingTextInputFormatter: prevents the insertion of blacklisted characters patterns.

And they have some static properties to help us:

WhitelistingTextInputFormatter.digitsOnly: takes in digits [0–9] only.

BlacklistingTextInputFormatter.singleLineFormatter: forces input to be a single line;

You can combine formatters:

With RegExp, you can customize your formatters (as above properties does):

WhitelistingTextInputFormatter(RegExp("[a-zA-Z]"))

BlacklistingTextInputFormatter(RegExp("[/\\]"))

It is simple and easy to use, but some times you need create your own formatter. And it is easy too. Just extend TextInputFormatterand implement formatEditUpdate method.

Take a look on the code bellow, from flutter_gallery example app:

As we can see, there is no limit.

Flutter offers to developers excellent built-in formatters and makes easy to extend and create our own. Let’s use.

Make easy to your user input data in form fields with formatters.

Posted on by:

rubensdemelo profile

rubensdemelo

@rubensdemelo

db2 z/os admin, cobol/java developer, flutter enthusiast, frontend newbie

Discussion

markdown guide
 

The Example is not updating the text are you sure the code is working?