mask_text_input_formatter

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

mask_text_input_formatter 包为 Flutter 的 TextField 和 TextFormField 小部件提供了一个 TextInputFormatter，支持使用可自定义的掩码实现实时输入格式化。它通过在用户输入时自动插入分隔符并强制执行格式规则，帮助用户以结构化的方式输入电话号码、日期或 ID 等数据。该格式化器支持动态掩码，并能正确处理跨平台的光标定位。它非常适合需要一致输入模式但无需手动验证的表单。

适合场景

带国家代码格式的电话号码输入
日期输入，格式为 DD/MM/YYYY
信用卡号码格式化带空格
自定义数字或字母数字模式输入
需要严格数据结构的表单字段

主要特点

实时输入掩码
支持动态和静态遮罩
编辑期间正确的位置光标
跨平台兼容性（Android、iOS、Web、macOS、Windows、Linux）
与 TextField 和 TextFormField 的轻松集成

适合对象

需要结构化输入的表单构建器
国际化就绪的输入字段
具有严格格式要求的数据采集应用
用户友好的数据输入界面
寻求最小验证逻辑的开发者

使用建议

可能需要仔细定义掩码以避免意外行为
如果配置不当，可能会干扰复制粘贴操作
对复杂条件掩码的支持有限
对高频输入场景的性能影响
不适用于非文本输入类型

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

The package provides TextInputFormatter for TextField and TextFormField which format the input by a given mask.

logo

Example

Check 'example' folder for code sample

example

Usage

Follow the install guide
Import the library:

import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

Create mask formatter:

var maskFormatter = new MaskTextInputFormatter(
  mask: '+# (###) ###-##-##', 
  filter: { "#": RegExp(r'[0-9]') },
  type: MaskAutoCompletionType.lazy
);

Set it to text field:

TextField(inputFormatters: [maskFormatter])

Get value

Get masked text:

print(maskFormatter.getMaskedText()); // -> "+0 (123) 456-78-90"

Get unmasked text:

print(maskFormatter.getUnmaskedText()); // -> 01234567890

Change the mask

You can use the updateMask method to change the mask after the formatter was created:

var textEditingController = TextEditingController(text: "12345678");
var maskFormatter = new MaskTextInputFormatter(mask: '####-####', filter: { "#": RegExp(r'[0-9]') });

TextField(controller: textEditingController, inputFormatters: [maskFormatter])  // -> "1234-5678"

textEditingController.value = maskFormatter.updateMask(mask: "##-##-##-##"); // -> "12-34-56-78"

搜索插件、代码仓与 APP 分类