flutter_masked_text 0.3.0
flutter_masked_text: ^0.3.0 copied to clipboard


Masked text input for flutter.

flutter_masked_text #

Masked text input for flutter.


Install #

On your dependencies, add:

    sdk: flutter
  flutter_masked_text: ^0.3.0 #here

In terminal, run:

flutter packages get

Usage #

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

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

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

Using default TextEditingController #

The MaskedTextController extends TextEditingController. You can use all default native methods from this class.


  • [x] Custom translations
  • [ ] Raw Text Widget
  • [ ] Money Mask
  • [ ] Default Pre-Sets like CPF, CNPJ, Date, Credit Card