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"

パッケージ、リポジトリ、アプリカテゴリを検索