flutter_masked_text 0.8.0

  • Readme
  • Changelog
  • Installing
  • 93

flutter_masked_text #

Masked text input for flutter.

travis-ci

logo

Install #

Follow this GUIDE

Usage #

Import the library

import 'package:flutter_masked_text/flutter_masked_text.dart';

MaskedText #

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:

sample

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'

Hook: beforeChange [v0.7.0+]

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 beforeChange and return true or 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 here

    return true;
};

Hook: afterChange [v0.7.0+]

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

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\$');
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$

hook: afterChange [v0.7.0+]

You can watch for mask and value changes. To do this, just set the afterChange hook.

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

Defining decimal places [v0.8.0+]

You can define the number of decimal places using the precision prop:

var controller = new MoneyMaskedTextController(precision: 3);
controller.updateValue(123.45);

print(controller.text); //<-- 123,450

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 #

  • [x] Custom translations
  • [x] Money Mask
  • [ ] Raw Text Widget

[0.8.0] - 2019-fev-24

Added #

  • Adding precision to MoneyMaskedTextController.

Fixed #

  • Fixing initialValue in MoneyMaskedTextController.
  • Fixing crash when call updateText in MaskedTextController with null value. (thanks to Israel Ibarra)

[0.7.0] - 2018-nov-12

  • Adding beforeChange and afterChange hooks.

[0.6.0] - 2018-ago-16.

  • Now you can change the mask in runtime (thanks to calebeoliveira).
  • The sdk support is updated to >=1.23.0 <3.0.0 (thanks to tobire).

[0.5.0] - 2018-jun-17.

  • Adding left and right symbols (thanks to tobire).

[0.4.1] - 2018-jun-11.

  • Fixing not allowed characters on keyboard (thanks to tobire). Related: issue#3.

[0.4.0] - 2018-may-21.

  • Adding money mask.

[0.3.0] - 2018-may-21.

  • Adding custom translations.

[0.2.1] - 2018-may-21.

  • First release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_masked_text: ^0.8.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_masked_text/flutter_masked_text.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Oct 18, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/flutter_masked_text.dart. (-1 points)

Analysis of lib/flutter_masked_text.dart reported 2 hints:

line 61 col 3: Avoid return types on setters.

line 126 col 1: Prefer using /// for doc comments.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and flutter_masked_text.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test