A masked text for Flutter.
Masked text input for flutter.
Hi guys!
Unfortunately, I'm not developing mobile anymore. This repo will not receive updates.
Follow this GUIDE
Import the library
import 'package:flutter_masked_text/flutter_masked_text.dart';
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: [ new TextField(controller: controller,) //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
To start a mask with initial value, just use
textproperty on constructor:
var controller = new MaskedTextController(mask: '000-000', text: '123456');
If you want to set new text after controller initiatialization, use the
updateTextmethod:
var controller = new MaskedTextController(text: '', mask: '000-000'); controller.updateText('123456');print(controller.text); //123-456
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
getDefaultTranslatorand 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
You can use the
updateMaskmethod 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'
In some cases, you will want to validate the mask value to decide if it's allowed to input or not.
It's simple: you just need to set the
beforeChangeand return
trueor
false. If you return
true, it will accept the new value and will try to apply the mask. Otherwhise, it will reject the new value.
The function receives two parameters:
previous: the previous text of the controller.
next: the next text that will be masked.
var controller = new MaskedTextController(mask: '(00) 0000-0000'); controller.beforeChange = (String previous, String next) { // my logic herereturn true;
};
This function will be called after setted in the controller.
The function receives two parameters:
previous: the previous text of the controller.
next: the next text that will be masked.
var controller = new MaskedTextController(mask: '(00) 0000-0000'); controller.afterChange = (String previous, String next) { print("$previous | $next"); };
To use money mask, create a MoneyMaskedTextController:
var controller = new MoneyMaskedTextController();//.... new TextField(controller: controller, keyboardType: TextInputType.number)
It's possible to customize
decimaland
thousandseparators:
var controller = new MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');
To set value programaticaly, use
updateValue:
controller.updateValue(1234.0);
To get the number value from masked text, use the
numberValueproperty:
double val = controller.numberValue;
You can use currency symbols if you want:
// left symbol var controller = new MoneyMaskedTextController(leftSymbol: 'R\$ '); controller.updateValue(123.45);print(controller.text); //
hook: afterChange [v0.7.0+]
You can watch for mask and value changes. To do this, just set the
afterChangehook.This function receives two parameters:
masked: the masked text of the controller.
raw: the double value of the text.
var controller = new MoneyMaskedTextController();controller.afterChange = (String masked, double raw) { print("$masked | $raw"); };
You can define the number of decimal places using the
precisionprop:
var controller = new MoneyMaskedTextController(precision: 3); controller.updateValue(123.45);print(controller.text); //
Using default TextEditingController
The MaskedTextController and MoneyMaskedTextController extends TextEditingController. You can use all default native methods from this class.
Samples
You can check some code samples in this repo: flutter-masked-text-samples
TODO