Flutter数字格式化插件number_mask的使用

number_mask 是一个轻量级的 Flutter 插件，旨在帮助开发者更轻松地对数字字段进行掩码或格式化，而无需创建新的字段小部件。它允许用户通过简单的配置来实现输入框的格式化。

作者

• @vehm

使用方法

NumberMask 的使用非常简单。只需在输入框的 inputFormatters 中添加 NumberMask，并指定格式化的模式即可。

基本用法

NumberMask(pattern: '###-###-####')

在模式字符串中，# 表示需要输入数字的位置。模式可以包含任何字符，包括字母和符号，只要这些字符通常可以在 TextField 或 TextFormField 中输入即可。输入内容会自动根据定义的模式进行掩码处理。

示例

以下是一个电话号码格式化的示例：

import 'package:number_mask/number_mask.dart';

...

TextFormField(
    controller: _phoneController,
    decoration: const InputDecoration(
        labelText: 'Phone Number*',
    ),
    keyboardType: TextInputType.phone,
    inputFormatters: [
        NumberMask(pattern: '###-###-#### Ext. ###'),
    ],
),

上述代码会将用户输入自动格式化为以下形式：

555-555-5555 Ext. 555

如果未定义模式，则默认为自由格式（即空模式），这允许只输入数字且不限制长度。

完整示例

以下是一个完整的 Flutter 示例，展示了如何使用 number_mask 对不同类型的输入进行格式化。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NumberMask Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('NumberMask Demo'),
        ),
        body: const ExampleForm(),
      ),
    );
  }
}

class ExampleForm extends StatefulWidget {
  const ExampleForm({super.key});

  [@override](/user/override)
  State<ExampleForm> createState() => _ExampleFormState();
}

class _ExampleFormState extends State<ExampleForm> {
  final _formKey = GlobalKey<FormState>();
  final _phoneController = TextEditingController();
  final _ssnController = TextEditingController();
  final _creditCardController = TextEditingController();
  final _dateController = TextEditingController();
  final _zipController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 设置初始值
    _phoneController.text = '(123) 456-7890 Ext. 123';
    _ssnController.text = '123-45-6789';
    _creditCardController.text = '1234 5678 9012 3456 - 789';
    _dateController.text = '01/19/2023';
    _zipController.text = '12345-6789';
  }

  [@override](/user/override)
  void dispose() {
    _phoneController.dispose();
    _ssnController.dispose();
    _creditCardController.dispose();
    _dateController.dispose();
    _zipController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义各个字段的模式
    var phonePattern = '(###) ###-#### Ext. ###';
    var ssnPattern = '###-##-####';
    var creditCardPattern = '#### #### #### #### - ###';
    var datePattern = '##/##/####';
    var zipPattern = '#####-####';

    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 手机号码输入框
              TextFormField(
                controller: _phoneController,
                decoration: InputDecoration(
                  labelText: 'Phone Number',
                  hintText: phonePattern,
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [NumberMask(pattern: phonePattern)],
              ),
              const SizedBox(height: 16.0),
              // 社保号输入框
              TextFormField(
                controller: _ssnController,
                decoration: InputDecoration(
                  labelText: 'Social Security Number',
                  hintText: ssnPattern,
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [NumberMask(pattern: ssnPattern)],
              ),
              const SizedBox(height: 16.0),
              // 信用卡号输入框
              TextFormField(
                controller: _creditCardController,
                decoration: InputDecoration(
                  labelText: 'Credit Card',
                  hintText: creditCardPattern,
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [NumberMask(pattern: creditCardPattern)],
              ),
              const SizedBox(height: 16.0),
              // 日期输入框
              TextFormField(
                controller: _dateController,
                decoration: InputDecoration(
                  labelText: 'Date',
                  hintText: datePattern,
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [NumberMask(pattern: datePattern)],
              ),
              const SizedBox(height: 16.0),
              // 邮政编码输入框
              TextFormField(
                controller: _zipController,
                decoration: InputDecoration(
                  labelText: 'Zip Code',
                  hintText: zipPattern,
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [NumberMask(pattern: zipPattern)],
              ),
            ],
          ),
        ),
      ),
    );
  }
}