mask_input_formatter

插件介绍

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

一个 Flutter 包，为 TextField 和 TextFormField 提供 TextInputFormatter，可自动根据指定的掩码格式化用户输入。它通过在用户输入时动态插入占位符和格式化字符，帮助用户以结构化的方式输入电话号码、日期或 ID 等数据。该格式化器支持自定义掩码，并正确处理跨平台的退格和光标移动。非常适合用于需要特定格式的表单中，提升输入准确性和用户体验。

适合场景

带国家代码的电话号码输入
带分隔符的日期输入
信用卡号码格式化
自定义数字或字母数字模式
通过输入结构进行表单验证
动态字段格式化

主要特点

支持自定义遮罩
处理退格键和光标定位
跨平台兼容性
实时输入格式化
与 TextField 和 TextFormField 的轻松集成
灵活的占位符和分隔符配置

适合对象

需要结构化数据的表单输入
带有输入验证的移动和Web应用程序
用户友好的数据输入界面
寻求简单掩码解决方案的开发人员
需要一致输入模式的应用程序

使用建议

可能需要仔细定义掩码以避免冲突
对复杂动态遮罩的有限支持
对高频输入的性能影响
不适用于非文本输入类型
需要手动处理粘贴操作等边缘情况

原始 README

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

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

Demo

Usage

Add dependency.

Run this command:

With Flutter:

$ flutter pub add mask_input_formatter

or add following package in your pubspec.yaml file inside the dependencies: section.

dependencies:
  mask_input_formatter: ^0.0.3

Importing the library:

import 'package:mask_input_formatter/mask_input_formatter.dart';

Create a mask formatter:

MaskInputFormatter myFormatter =  MaskInputFormatter(mask: '(AA) #####');

Set with TextField/TextFormField:

TextFormField(
    inputFormatters: [myFormatter],
    decoration: InputDecoration(
        hintText: "(AB) 12345",
    )
) // TextFormField

Result

// Input  --> JK75757
// Output --> (JK) 75757 set formatted text on TextField

Other Mask

You can use the mask whatever you defined in formatter:

MaskInputFormatter dateFormatter =  MaskInputFormatter(mask: '##/##/####');
// --> 26/05/2021
MaskInputFormatter phoneFormatter =  MaskInputFormatter(mask: '+# (###) ###-####');
// --> +1 (234) 567-8901
MaskInputFormatter numberFormatter =  MaskInputFormatter(mask: 'AAA-###', textAllCaps: true);
// --> XYZ-789

Check example folder for code sample

Note

In last example. --> (AAA-###)

'A' character will allow only letters from A-Z.
'#' character will allow only numbers.
And other characters and symbols will be added as mask.

Contributing

Suggestions and Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Developer Team:

Amjad Jamali & team members ( Kamran Khan, Hina Hussain, Faiza Farooqui ) :tada:

License

Apache 2.0

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