Masked Text Input for Flutter

flutter masked text

masked text input for flutter.

install

to install masked text follow this guide.

usage

import the library

import 'package:flutter_masked_text/flutter_masked_text.dart';

masked text

create your mask controller:

var controller = new maskedtextcontroller(mask: '000.000.000-00');

set controller to your text field:

return new materialapp(
    title: 'flutter demo',
    theme: new themedata(
        primaryswatch: colors.blue,
    ),
    home: new safearea(
        child: new scaffold(
            body: new column(
                children: <widget>[
                    new textfield(controller: controller,) // <--- here
                ],
            ),
        ),
    ),
);

this is the result:

mask options

in mask, you can use the following characters:

• 0: accept numbers
• a: accept letters
• @: accept numbers and letters
• *: accept any character

initial value

to start a mask with initial value, just use text property on constructor:

var controller = new maskedtextcontroller(mask: '000-000', text: '123456');

update text programaticaly

if you want to set new text after controller initiatialization, use the updatetext method:

var controller = new maskedtextcontroller(text: '', mask: '000-000');
controller.updatetext('123456');

print(controller.text); //123-456

using custom translators

if you want to use your custom regex to allow values, you can pass a custom translation dictionary:

const translator = {
    '#': new regexp(r'my regex here')
};

var controller = new maskedtextcontroller(mask: '####', translator: translator);

if you want to use default translator but override some of then, just get base from getdefaulttranslator and override what you want (here is a sample for obfuscated credit card):

var translator = maskedtextcontroller.getdefaulttranslator(); // get new instance of default translator.
translator.remove('*'); // removing wildcard translator.

var controller = new maskedtextcontroller(mask: '0000 **** **** 0000', translator: translator);
controller.updatetext('12345678');

print(controller.text); //1234 **** **** 5678

change the mask in runtime

you can use the updatemask method to change the mask after the controller was created.

var cpfcontroller = new maskedtextcontroller(text: '12345678901', mask: '000.000.000-00');

print(cpfcontroller.text); //'123.456.789-01'

cpfcontroller.updatemask('000.000.0000-0');

print(cpfcontroller.text); //'123.456.7890-1'

money mask

to use money mask, create a moneymaskedtextcontroller:

var controller = new moneymaskedtextcontroller();

//....
new textfield(controller: controller, keyboardtype: textinputtype.number)

decimal and thousand separator

it’s possible to customize decimal and thousand separators:

var controller = new moneymaskedtextcontroller(decimalseparator: '.', thousandseparator: ',');

set value programaticaly

to set value programaticaly, use updatevalue:

controller.updatevalue(1234.0);

get double value

to get the number value from masked text, use the numbervalue property:

double val = controller.numbervalue;

using decoration symbols

you can use currency symbols if you want:

// left symbol
var controller = new moneymaskedtextcontroller(leftsymbol: 'r$ ');
controller.updatevalue(123.45);

print(controller.text); //<-- r$ 123,45

// right symbol
var controller = new moneymaskedtextcontroller(rightsymbol: ' us

using default texteditingcontroller

the maskedtextcontroller and moneymaskedtextcontroller extends texteditingcontroller. you can use all default native methods from this class.

todo

• [x] custom translations
• [x] money mask
• [ ] raw text widget
• [ ] default pre-sets like cpf, cnpj, date, credit card, etc…

 

121

download the full project for this post from the following button

this source is fully free for all time

download as zip