mask_input_formatter

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，為 TextField 和 TextFormField 提供 TextInputFormatter，可根據指定的遮罩自動格式化使用者輸入。它透過在使用者輸入時動態插入佔位符和格式化字元，協助使用者以結構化方式輸入電話號碼、日期或識別碼等資料。此格式化器支援自訂遮罩，並正確處理跨平台的退格與游標移動。非常適合用於需要特定格式的表單，以提升輸入準確性與使用者體驗。

適用情境

帶國家代碼的電話號碼輸入
帶分隔符的日期輸入
信用卡號碼格式化
自定數字或字母數字模式
透過輸入結構進行表單驗證
動態欄位格式化

主要特色

支援自訂遮罩
處理退格鍵與游標定位
跨平台相容性
即時輸入格式化
與 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 分類