mask_input_formatter

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das einen TextInputFormatter für TextField und TextFormField bereitstellt, um die Benutzereingaben automatisch nach einem angegebenen Maskenmuster zu formatieren. Es hilft Benutzern, Daten wie Telefonnummern, Datumsangaben oder IDs strukturiert einzugeben, indem es Platzhalter und Formatierungszeichen dynamisch während der Eingabe einfügt. Der Formatter unterstützt benutzerdefinierte Masken und verarbeitet Rückgängigmachen und Cursorbewegung korrekt über Plattformen hinweg. Ideal zur Verbesserung der Eingabegenauigkeit und Benutzererfahrung in Formularen mit spezifischen Formatanforderungen.

Anwendungsfälle

Telefonnummer-Eingabe mit Ländercode
Dateneingabe mit Trennzeichen
Formatierung der Kreditkartennummer
Benutzerdefinierte numerische oder alphanumerische Muster
Formularvalidierung über Eingabestruktur
Dynamische Feldformatierung

Hauptmerkmale

Unterstützt anpassbare Masken
Behandelt Rückgang und Cursorpositionierung
Plattformübergreifende Kompatibilität
Echtzeit-Eingabeformatierung
Einfache Integration mit TextField und TextFormField
Flexible Platzhalter- und Trennkonfiguration

Geeignet für

Formulareingaben, die strukturierte Daten erfordern
Mobile- und Webanwendungen mit Eingabeverifizierung
Benutzerfreundliche Eingabeschnittstellen
Entwickler, die einfache Maskierungslösungen suchen
Apps mit konsistenten Eingabemustern

Hinweise

Kann eine sorgfältige Maskendefinition erfordern, um Konflikte zu vermeiden
Eingeschränkter Support für komplexe dynamische Masken
Leistungseinfluss bei hochfrequentem Eingang
Nicht geeignet für nicht-textbasierte Eingabetypen
Erfordert manuelle Behandlung von Randfällen wie Einfügeoperationen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

Pakete, Repositories und App-Kategorien suchen