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

easy_mask 封面
插件详情v2.0.1

easy_mask

易于使用且功能强大的文本字段、文本表单字段和字符串的掩码。支持多种掩码,反向掩码用于货币和占位符。可控制用户的光标。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2.8万
喜欢数
159
Pub 分数
150

安装插件

flutter pub add easy_mask

插件介绍

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

Easy Mask 是一个 Flutter 包,通过强大的掩码功能简化了文本字段和字符串的输入格式化。它支持多种掩码、用于货币格式化的反向掩码以及可自定义的占位符。该包在用户输入时智能管理光标位置,确保流畅的输入体验。非常适合需要结构化输入的表单,如电话号码、日期或财务数值,通过在用户输入时自动应用格式来提升可用性。

适合场景

  • 带有结构化数据的表单输入
  • 货币和数字格式化
  • 日期和电话号码掩码
  • 实时输入验证
  • 动态遮罩切换
  • 占位符管理

主要特点

  • 多掩码支持
  • 货币反向遮罩
  • 自动光标控制
  • 可自定义的占位符
  • 实时格式化
  • 跨平台兼容性

适合对象

  • 开发表单密集型应用的开发者
  • 需要格式化输入字段的应用程序
  • 金融或数据录入应用程序
  • 需要一致输入模式的项目
  • 注重用户体验的文本输入团队

使用建议

  • 可能需要仔细处理复杂的掩码逻辑
  • 除了基本示例外,文档有限
  • 大量活跃遮罩可能带来的性能影响
  • 不适合非文本输入场景
  • 需要在所有目标平台上进行测试

原始 README

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

Easy Mask

Easy way to apply a mask to Flutter's TextFields and on Strings

To use it, you only need to pass EasyMask on TextField's parameter inputFormatters.

The Easy Mask cares about user's cursor position, to make fluid it's usability.

Supports Multi Mask based on masks length.

Supports Placeholders.

Sample

Usage

Simplest Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '99? (99) 999 99-99') ],
  ),
  TextField(
    inputFormatters: [ TextInputMask(mask: '999.999.999-99', reverse:true ) ],
  )
...

Formatting a String

import package:easy_mask/text_input_mask.dart
...
  String text = '432516565';
  MagicMask mask = MagicMask.buildMask('\\+99 (99) 99999-9999');
  String formattedString = mask.getMaskedString(text);
...
Multi Mask Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: ['999.999.999-99', '99.999.999/9999-99'] ],
  ),
  TextField(
    inputFormatters: [ TextInputMask(mask: ['(99) 9999 9999', '(99) 99999 9999'], reverse:true ) ],
  )
...
PlaceHolder Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '999.999.999-99', placeholder: '_', maxPlaceHolders: 11 ],
  ),
...
Pretty Currency Sample

Import package:easy_mask/text_input_mask.dart

Then instantiate TextInputMask passing at least a String mask parameter.

import package:easy_mask/text_input_mask.dart
...
  TextField(
    inputFormatters: [ TextInputMask(mask: '\$! !9+,999.99', placeholder: '0', maxPlaceHolders: 3, reverse: true],
  ),
...
Possible parameters
  • mask can be a String or an List with the wanted masks pattern.
  • reverse is a boolean that indicates if the user will type from right to left. Used normally on currency TextFields.
  • maxLength is an Integer that limits the maximum size of returned masked text.
  • placeholder is a String character to be used as placeholder on untyped characters. Must define maxPlaceHolders
  • maxPlaceHolders an integer to map how many possible places it would be placed. Typed characters consumes a position from this counter.
Mask Patterns Characters

9 - is used to allow a number from 0-9

A - is used to allow a letter from a-z or A-Z

N - is used to allow a number or letter from 0-9, a-z or A-Z

X - is used to allow any character

Those tokens 9,A,N and X can be followed by one following modifier

? - indicates that is optional

+ - indicates that must have at least 1 or more repetitions

* - indicates that can have 0 or more repetitions

\ - is used as scape

*Any character that is interpreted as letter to be placed, can be followed by modifier **

! - Used to force print it, when it has at least 1 character typed on TextField.

Any other letters will be displayed on masking.

Examples of String masks

(card number) 999 999 999 999

(us cellphone) \+1 (999) 999 99 99

(currency) $! !9+,999.99

(version) 99?9?.99?9?.99?9?

(RG brazilian document) 99.999.999-N

所属分类

源码仓库

使用此插件的项目

暂无相关数据。