搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。