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

mask_input_formatter のカバー
パッケージ詳細v0.0.3

mask_input_formatter

指定されたマスクに従って入力をフォーマットするための TextField および TextFormField 用の TextInputFormatter。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
2580
いいね数
29
Pub ポイント
150

パッケージをインストール

flutter pub add mask_input_formatter

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

指定されたマスクに従ってユーザーの入力を自動的にフォーマットするためのTextInputFormatterをTextFieldおよびTextFormFieldに提供するFlutterパッケージです。ユーザーが入力する際に動的にプレースホルダーとフォーマット文字を挿入することで、電話番号、日付、IDなどのデータを構造化された形で入力できるようにします。カスタムマスクをサポートし、プラットフォーム間でバックスペースやカーソルの移動を正しく処理します。特定の形式が必要なフォームでの入力精度とユーザーエクスペリエンスを向上させるのに最適です。

用途

  • 国コード付き電話番号入力
  • 区切り記号付きの日付入力
  • クレジットカード番号の書式設定
  • カスタムの数値またはアルファネリックパターン
  • 入力構造によるフォーム検証
  • 動的フィールドフォーマット

主な機能

  • カスタマイズ可能なマスクをサポート
  • バックスペースおよびカーソル位置の処理
  • クロスプラットフォーム互換性
  • リアルタイム入力フォーマット
  • TextField および TextFormField との簡単な統合
  • 柔軟なプレースホルダーや区切りの設定

適している対象

  • 構造化データを必要とするフォーム入力
  • 入力検証付きのモバイルおよびWebアプリケーション
  • 使いやすいデータ入力インターフェース
  • 簡単なマスキングソリューションを探している開発者
  • 一貫した入力パターンを必要とするアプリ

注意事項

  • 衝突を避けるために、マスクの定義に注意が必要な場合があります
  • 複雑な動的マスクに対する制限されたサポート
  • 高周波入力へのパフォーマンスへの影響
  • テキスト以外の入力タイプには適していません
  • 貼り付け操作などのエッジケースを手動で処理する必要があります

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

mask_input_formatter

pub package likes popularity pub points Platform License

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


Demo

Usage

  1. 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
  1. Importing the library:
import 'package:mask_input_formatter/mask_input_formatter.dart';
  1. Create a mask formatter:
MaskInputFormatter myFormatter =  MaskInputFormatter(mask: '(AA) #####');
  1. 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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。