Kategorien, Pakete und Repositories suchen

ducafecatFlutter-Ökosystem
Cover von pin_code_fields
Paketdetailsv10.1.1

pin_code_fields

Ein hochgradig anpassbarer PIN-/OTP-Eingabefeld für Flutter mit Material-Design-Unterstützung und headless Kern für benutzerdefinierte Benutzeroberflächen.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
415.000
Likes
2390
Pub-Punkte
160

Paket installieren

flutter pub add pin_code_fields

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein hochgradig anpassbarer PIN- und OTP-Eingabefeld für Flutter, der nach Material Design-Prinzipien gestaltet ist. Unterstützt sowohl sichtbare als auch kopflose Modi, sodass Entwickler intuitive Authentifizierungs-Oberflächen oder vollständig angepasste Benutzeroberflächen erstellen können. Das Paket bietet reibungslose Animationen, Echtzeit-Validierung und responsive Gestaltung auf allen Plattformen. Ideal für Anmeldebildschirme, Überprüfungsabläufe und sichere Eingabefelder.

Anwendungsfälle

  • Benutzerauthentifizierung über OTP
  • Zwei-Faktor-Authentifizierung
  • Sichere PIN-Eingabe
  • Formularvalidierung in mobilen Apps
  • Anpassbare Überprüfungs-Bildschirme
  • Plattformübergreifende Eingabefelder

Hauptmerkmale

  • Material Design-konform
  • Kopflose Modus für benutzerdefinierte Benutzeroberflächen
  • Eingabeverifizierung in Echtzeit
  • Glatte Animationen und Übergänge
  • Responsive Layout-Unterstützung
  • Anpassbare Stilisierung und Verhalten

Geeignet für

  • Entwickler, die sichere Eingabefelder erstellen
  • Teams, die eine plattformübergreifende Kompatibilität benötigen
  • Apps, die eine OTP- oder PIN-Überprüfung erfordern
  • Designer, die flexible Benutzeroberflächenkomponenten wünschen
  • Projekte mit engen Integrationsanforderungen

Hinweise

  • Benötigt manuelle Handhabung von Fokus und Navigation im Kopflos-Modus
  • Möglicherweise ist zusätzliche Logik für komplexe Validierungsregeln erforderlich
  • Die Anpassung der Gestaltung erfordert ein Verständnis des Widget-Baums von Flutter
  • Nicht für sehr lange Eingabesequenzen optimiert
  • Eingeschränkte integrierte Fehlermeldungen über grundlegende Rückmeldung hinaus

Original-README

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

Pin Code Fields

A highly customizable Flutter package for PIN code and OTP input fields with beautiful design and animations.

Version 9.0 introduces a new headless architecture - use the ready-made Material Design implementation or build completely custom UIs!

Package Location

The publishable package is located at:

packages/pin_code_fields/

📦 View Package README for full documentation.

Quick Start

dependencies:
  pin_code_fields: ^9.0.0

import 'package:pin_code_fields/pin_code_fields.dart';

// Material Design (ready to use)
MaterialPinField(
  length: 6,
  onCompleted: (pin) => print('PIN: $pin'),
)

// Custom UI (headless)
PinInput(
  length: 4,
  builder: (context, cells) => YourCustomUI(cells),
)

Repository Structure

pin_code_fields/
├── packages/
│   └── pin_code_fields/      # 📦 Main package
│       ├── lib/
│       │   └── src/
│       │       ├── core/     # Headless input engine
│       │       └── material/ # Material Design implementation
│       ├── example/
│       ├── test/
│       ├── README.md
│       ├── CHANGELOG.md
│       └── LICENSE
├── docs/
│   └── FEATURE_COMPARISON.md
├── melos.yaml
└── CLAUDE.md

Development

This project uses melos for monorepo management.

# Install melos
dart pub global activate melos

# Bootstrap workspace
melos bootstrap

# Run tests
melos test

# Run analyzer
melos analyze

Features

  • 🎨 Headless Architecture - Full control over UI rendering
  • 📱 Material Design Ready - Beautiful out-of-the-box implementation
  • 🎮 Unified Controller - Single controller for text, focus, and errors
  • ✨ Rich Animations - Scale, fade, slide entry animations
  • 🔐 Obscure Support - Character or custom widget obscuring
  • 📋 Paste Support - Long-press to paste from clipboard
  • 📝 Form Integration - Works with Flutter's Form widget
  • 📲 Autofill Support - SMS OTP autofill for iOS/Android
  • 💫 Error Animation - Shake animation with programmatic control

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE for details.

Kategorien

PIN-, OTP- und Passwortfeld

Abhängigkeiten

Abhängigkeiten 2 Einträge

Quell-Repository

Projekte, die dieses Paket verwenden

Ranglisten

Top Flutter packages#89