flutter_masked_text 0.5.0

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 96

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

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$

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

[0.5.0] - 2018-jun-17.

  • Adding left and right symbols.

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

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages 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';
  
Version Uploaded Documentation Archive
0.5.0 Jun 17, 2018 Go to the documentation of flutter_masked_text 0.5.0 Download flutter_masked_text 0.5.0 archive
0.4.1 Jun 12, 2018 Go to the documentation of flutter_masked_text 0.4.1 Download flutter_masked_text 0.4.1 archive
0.4.0 May 21, 2018 Go to the documentation of flutter_masked_text 0.4.0 Download flutter_masked_text 0.4.0 archive
0.3.0 May 21, 2018 Go to the documentation of flutter_masked_text 0.3.0 Download flutter_masked_text 0.3.0 archive
0.2.1 May 21, 2018 Go to the documentation of flutter_masked_text 0.2.1 Download flutter_masked_text 0.2.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
94
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Aug 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.11.8
  • Flutter: 0.5.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

The description is too short.

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Package is pre-v1 release.

While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction of the API.

Maintain an example.

Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use flutter_masked_text.dart.

Fix lib/flutter_masked_text.dart.

Analysis of lib/flutter_masked_text.dart reported 1 hint:

line 4 col 8: Unused import: 'dart:math'.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <=2.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.11
meta 1.1.5 1.1.6
sky_engine 0.0.99
typed_data 1.1.5 1.1.6
vector_math 2.0.6 2.0.8
Dev dependencies
flutter_test