nonstopio
Published in

nonstopio

Input formatters in Textfield Flutter

How to add auto-formatters in the text field, while adding text in the text field.

Extracting valid formatted data is essential when your application requires credit card information, phone numbers, zip codes, etc. This approach makes it easier for the developer to enter valid data into the application.

When the user enters something into an input field. The value will be adjusted automatically, and things like punctuation and dashes, removing unexpected characters, trimming spaces, and changing word cases will be added.

So, we will check how to add formatters in textfield. To add formatting to our code we will use a plugin called “mask_text_input_formatter”.

  1. To use plugin “mask_text_input_formatter” we have added dependency in pubspec.yaml file.
  2. Import the library:
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart'; 

The “inputFormatter” parameter in TextFormField or TextField allows developers to pass a list of classes of type TextInputFormatter to define the field’s behavior. TextInputFormatter translates the field value into text and the text into the field value.

When the user enters something into an input field. The value will be adjusted automatically, and things like punctuation and dashes, removing unexpected characters, trimming spaces, and changing word cases will be added.

Now we will see some examples of how to use formatters.

  1. If we want to use an auto formatter for SSN (Social Security Number).

SSN number is nine-digit, and we have to separate these nine digits by (-).

TextFormField(
inputFormatters: [
MaskTextInputFormatter(
mask: "###-##-####",
filter: {"#": RegExp(r'[0-9]')},
)
],
);

2. If we want to format the date with format MM/DD/YYYY, format month, date, and year by ( / ).

TextFormField(
inputFormatters: [
MaskTextInputFormatter(
mask: "##/##/####",
filter: {
"#": RegExp(r'\d+|-|/'),
},
)
]
);

3. If we want to format credit card numbers, then we can do with the following steps.

TextFormField(
inputFormatters: [
MaskTextInputFormatter(
mask: "xxxx-xxxx-xxxx",
)
]
);

In this way, we can format our text withTextFormField and TextField in a flutter.

A Bespoke Engineering Studio

Recommended from Medium

Simple real-time distributed counter with Eclipse Vert.X

Resolving The Problem Of Port 5000 Already Being In Use

Check us OUT.. https://t.co/vT24zFbtst

There’s so much more to being a software engineer

10 Best CSS Online Courses for Beginners and Experienced Developers in 2022

10 Best CSS Online Courses for Beginners and Experienced Developers

Kindergarten Teachers Are The Best Scrum Masters!

iOS — the case against Interface Builder

How to use logging in Python with beautiful colors: Qlogging (Notebooks & Console)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Snehal Masalkar

Snehal Masalkar

Full stack developer, Flutter, Web developer

More from Medium

Flutter: Firebase Auth Api.

Flutter Timer: Piva — Localization, Notification, Managing State - Part 3

Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter

Google Sign-in in Flutter