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

パッケージ詳細v3.0.1

extended_masked_text

Flutterアプリ用のマスクテキスト入力を可能にするカスタムTextEditingControllersの小さなセット

AndroidiOSmacOSWindowsLinux
30日間ダウンロード
2.4万
いいね数
147
Pub ポイント
160

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

flutter pub add extended_masked_text

パッケージ概要

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

ExtendedMaskedText は、電話番号、日付、ID などのデータを事前に定義された形式で入力できるようにするカスタム TextEditingControllers を提供する Flutter パッケージです。入力中にリアルタイムでのフォーマットと検証をサポートし、ユーザーが入力する際に正しい構造を保つことで、ユーザーエクスペリエンスを向上させます。このパッケージは軽量であり、複数のプラットフォームにおけるフォームや入力フィールドにシームレスに統合できます。

用途

  • 構造化データを備えたフォーム入力
  • フォーマット付きの電話番号入力
  • マスク付きの日付と時刻入力
  • クレジットカード番号の書式設定
  • ユーザー入力に基づくダイナミックマスクの生成

主な機能

  • リアルタイム入力マスキング
  • カスタマイズ可能なマスクパターン
  • 自動カーソル位置指定
  • ダイナミックマスクのサポート
  • 組み込み検証ロジック

適している対象

  • フォーム中心のアプリを開発する開発者
  • 厳密な入力フォーマットを必要とするアプリ
  • クロスプラットフォームのモバイルおよびデスクトップアプリケーション
  • 入力の正確性を重視するユーザーインターフェース

注意事項

  • マスクパターンの設計に注意が必要な場合があります
  • テキスト入力のシナリオに限定
  • ネストされたまたは変動するマスクによる潜在的な複雑さ
  • テキスト以外の入力タイプには適していません
  • マスク内の特殊文字の手動処理が必要です

元の README

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

Extended Masked Text Logo

Extended Masked Text

This package is based on the source code of flutter_masked_text and is an attempt to fix some bugs and continue the development of the original one.

Usage

Import the library

import 'package:extended_masked_text/extended_masked_text.dart';

MaskedTextController

Create your mask controller:

final controller = MaskedTextController(mask: '000.000.000-00');

Set controller to your text field:

return MaterialApp(
    title: 'Masked Text Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: SafeArea(
        child: Scaffold(
            body: Column(
                children: <Widget>[
                    TextField(
                        // Add controller to TextField
                        controller: controller,
                    ),
                ],
            ),
        ),
    ),
);

MoneyMaskedTextController

Create your mask controller:

final controller = MoneyMaskedTextController(leftSymbol: 'R\$ ');

Set controller to your text field:

return MaterialApp(
    title: 'Money Masked Text Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: SafeArea(
        child: Scaffold(
            body: Column(
                children: <Widget>[
                    TextField(
                        // Add controller to TextField
                        controller: controller,
                    ),
                ],
            ),
        ),
    ),
);

カテゴリー

ソースリポジトリ

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