Aus öffentlichen Paketdaten erstellte Orientierung.
Ein Flutter-Widget zur Erstellung anpassbarer PIN- oder OTP-Eingabefelder mit reiner Dart-Implementierung ohne externe Abhängigkeiten. Es bietet eine saubere, intuitive Benutzeroberfläche für die Eingabe numerischer Codes und unterstützt verschiedene Stiloptionen sowie nahtlose Benutzerinteraktionen wie automatisches Fokussieren zwischen Feldern. Ideal für Authentifizierungsabläufe, die einmalige Passwörter oder sichere Codeeingaben erfordern.
Anwendungsfälle
Eingabe von einmaligem Passwort (OTP)
Sichere PIN-Eingabe für Anmeldung
Mehrzifferige Überprüfungsformulare
Zahlungscode eingeben
Kontowiederherstellungsworkflows
Biometrische Authentifizierungs-Eingaben
Hauptmerkmale
Reine Dart-Implementierung
Keine externen Abhängigkeiten
Anpassbare Gestaltung
Automatischer Fokus zwischen Feldern
Unterstützt Tastatureingabe
Reaktives Design über Plattformen hinweg
Geeignet für
Authentifizierungsbildschirme
Zwei-Faktor-Authentifizierung
Sichere Formulareingaben
Plattformübergreifende Anwendungen
Einfache numerische Eingabeschnittstellen
Entwickler, die Drittanbieter-Bibliotheken vermeiden
Hinweise
Beschränkt auf numerische Eingabe nur
Keine integrierte Überprüfung
Erfordert manuelle Behandlung der Übermittlungslogik
Nicht geeignet für lange Texteingaben
Keine Unterstützung für Sonderzeichen
Minimale integrierte Barrierefreiheitsfunktionen
Original-README
Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.
pin_input_text_field
中文
PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports.
Notes 🚨
please use 4.4.1 for flutter version is below 3.7.0
Feature 🌟
allow you customized the shape, any!
built-in 4 commonly used pin styles of shape
obscure support
solid support
enterColor support
cursor support
support all the textField properties theoretically
Flutter all platform support
Example 🦀
Thanks to the Flutter Web, you can enjoy the preview by website without any installation.
The callback will execute when user click done, sometimes is not working in Android.
decoration
BoxLooseDecoration
Decorate the pin, there are 3 inside styles, the default is BoxLooseDecoration
inputFormatters
WhitelistingTextInputFormatter.digitsOnly
Just like TextField's inputFormatter, the default is WhitelistingTextInputFormatter.digitsOnly
keyboardType
TextInputType.phone
Just like TextField's keyboardType, the default is TextInputType.phone
pinEditingController
PinEditingController
Controls the pin being edited. If null, this widget will create its own PinEditingController
autoFocus
false
Same as TextField's autoFocus, the default is false
focusNode
FocusNode
Same as TextField's focusNode
textInputAction
TextInputAction.done
Same as TextField's textInputAction, not working in digit mode
enabled
true
Same as TextField's enabled, the default is true
onChanged
(String pin){}
Same as TextField's onChanged
textCapitalization
TextCapitalization.words
Same as TextField's textCapitalization
cursor
Cursor.disabled()
The cursor of the pin, default is not enabled
FormField
Instead of using PinInputTextField, using PinInputTextFormField to control validate.
All built-in decorations reserve 8 logical pixels between the pin area and the
validation error text by default. Configure the spacing on the decoration:
BoxLooseDecoration(
errorTextSpacing: 16, // Defaults to 8 when omitted.
strokeColorBuilder: constFixedColorBuilder(Colors.black),
)
ObscureStyle
/// Determine whether replace [obscureText] with number.finalbool isTextObscure;
/// The display text when [isTextObscure] is true, emoji supportedfinalString obscureText;
Known Issue 🥶
The PinEditingController listener will execute more than once when programmatically set text, you can filter some duplicate values in your code.
The helper supports patch, minor, major, and an explicit version such as
4.5.3. It refreshes remote tags, refuses a latest tag that cannot be matched
to the current history, and handles a pubspec.yaml version that is newer than
the tagged history. A real patch release requires a clean master matching
origin/master; it writes the root pubspec.yaml and CHANGELOG.md, commits
and pushes them, pushes the next bare version tag, and creates the GitHub
Release with generated notes. It never changes example/pubspec.yaml.
release.yml creates a GitHub Release for either bare or v SemVer tags, and
publish.yml publishes bare SemVer tags to pub.dev through the pub.dev
environment. Configure pub.dev's GitHub Actions publishing for this repository
before the first automated publish.
License
Copyright 2019 Tino Guo.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.