flutter_masked_text

Flutter 的掩码文本输入。

安装

请遵循此 指南

用法

导入库

import 'package:flutter_masked_text/flutter_masked_text.dart';

MaskedText

创建您的掩码控制器

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

将控制器设置为您的文本字段

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

这是结果

Xmask.mov

掩码选项

在掩码中，您可以使用以下字符

  • 0: 接受数字
  • A: 接受字母
  • @: 接受数字和字母
  • *: 接受任何字符

初始值

要使用初始值开始掩码，只需在构造函数中使用text属性即可

var controller = new MaskedTextController(mask: '000-000', text: '123456');

以编程方式更新文本

如果您想在控制器初始化后设置新文本，请使用updateText方法

var controller = new MaskedTextController(text: '', mask: '000-000');
controller.updateText('123456');

print(controller.text); //123-456

使用自定义翻译器

如果您想使用自定义正则表达式来允许值，可以传递自定义翻译字典

const translator = {
    '#': new RegExp(r'my regex here')
};

var controller = new MaskedTextController(mask: '####', translator: translator);

如果您想使用默认翻译器但覆盖其中一些，只需从getDefaultTranslator获取基础并覆盖您想要的（这里有一个隐藏的信用卡示例）

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

运行时更改掩码

您可以使用updateMask方法在创建控制器后更改掩码。

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'

货币掩码

要使用货币掩码，请创建MoneyMaskedTextController

var controller = new MoneyMaskedTextController();

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

小数点和千位分隔符

可以自定义decimal和thousand分隔符

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

以编程方式设置值

要以编程方式设置值，请使用updateValue

controller.updateValue(1234.0);

获取双精度值

要从掩码文本获取数字值，请使用numberValue属性

double val = controller.numberValue;

使用装饰符号

如果您愿意，可以使用货币符号

// 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$

使用默认TextEditingController

MaskedTextController和MoneyMaskedTextController继承自TextEditingController。您可以为此类使用所有默认的本机方法。

待办事项

  • [x] 自定义翻译
  • [x] 货币掩码
  • [ ] 原始文本小部件
  • [ ] 默认预设，如CPF、CNPJ、日期、信用卡等...

GitHub

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