flutter_masked_text

Masked text input for flutter.

Install

Follow this GUIDE

Usage

Import the library

import 'package:flutter_masked_text/flutter_masked_text.dart';
Dart

MaskedText

Create your mask controller:

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

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
                ],
            ),
        ),
    ),
);
Dart

This is the result:

Xmask.mov

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');
Dart

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
Dart

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);
Dart

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
Dart

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'
Dart

Money Mask

To use money mask, create a MoneyMaskedTextController:

var controller = new MoneyMaskedTextController();

//....
new TextField(controller: controller, keyboardType: TextInputType.number)
Dart

Decimal and Thousand separator

It's possible to customize decimal and thousand separators:

var controller = new MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');
Dart

Set value programaticaly

To set value programaticaly, use updateValue:

controller.updateValue(1234.0);
Dart

Get double value

To get the number value from masked text, use the numberValue property:

double val = controller.numberValue;
Dart

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\$');
controller.updateValue(99.99);

print(controller.text); //<-- 99,99 US$


// both
var controller = new MoneyMaskedTextController(leftSymbol: 'to pay:', rightSymbol: ' US\$');
controller.updateValue(123.45);

print(controller.text); //<-- to pay: 123,45 US$
Dart

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...

GitHub

https://github.com/benhurott/flutter-masked-text