Flutter遮罩效果插件mask的使用

遮罩与验证功能介绍

mask 插件为Flutter开发者提供了一套便捷的输入格式化和验证工具。它可以帮助你轻松地实现对特定类型数据（如电话号码、日期、金额等）的输入格式控制和有效性检查。

内置验证规则

• CPF：巴西个人税号
• CNPJ：巴西公司税号
• Email：电子邮件地址
• Money：货币值
• Date/DateTime/Time：日期时间
• Phone：电话号码
• Generic：自定义验证规则

内置遮罩模板

• Credit Card：信用卡号
• CPF/CNPJ：巴西个人或公司税号
• Money：货币值
• Date：日期
• Phone：电话号码
• Generic：自定义遮罩模式

使用示例

示例1：货币金额的输入框

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) => Mask.validations.money(
    value, 
    min: 100.0, // 可选字段，设置最小值
  ),
  inputFormatters: [Mask.money()],
),

示例2：支持CPF或CNPJ格式的输入框

TextFormField(
  validator: Mask.validations.cpfOrCnpj,
  inputFormatters: [Mask.cpfOrCnpj()],
),

示例3：自定义格式的输入框

TextFormField(
  validator: (value) => Mask.validations.generic(value, min:8, error: '信息错误'),
  inputFormatters: [
    Mask.generic(
      masks: ['##-##-##'], 
      hashtag: Hashtag.numbers, // 可选字段，限制只能输入数字
    ),
  ],
)

完整Demo代码

下面是一个完整的例子，展示了如何在实际应用中使用mask插件：

import 'package:flutter/material.dart';
import 'package:mask/mask.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final editController = TextEditingController();

  HomePage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mask Plugin Demo')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextFormField(
              controller: editController,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              validator: (value) => Mask.validations.cpf(value),
              inputFormatters: [Mask.cpf()],
              decoration: const InputDecoration(labelText: 'CPF'),
            ),
            TextFormField(
              inputFormatters: [Mask.phone()],
              decoration: const InputDecoration(labelText: '电话'),
            ),
            ElevatedButton(
              onPressed: () {
                if (Form.of(context)?.validate() ?? false) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('验证通过！'))
                  );
                }
              },
              child: Text('提交'),
            ),
          ],
        ),
      ),
    );
  }
}

这个例子创建了一个简单的表单页面，包含两个文本输入框分别用于输入CPF和电话号码，并且添加了一个按钮来触发整个表单的验证。当用户点击“提交”按钮时，如果所有输入都符合预期格式，则会显示一条成功消息。

注：此插件由 Weliton Sousa 开发并维护，感谢他的贡献！

以上就是关于mask插件的基本用法介绍以及一个简单的使用案例。希望这些内容能够帮助到您更好地理解和运用该插件。如果有任何问题或者需要进一步的帮助，请随时提问。