Paketdetailsv2.0.1

passcode_screen

Ein plattformunabhängiges Flutter-Paket zum Anzeigen eines Passcode-Eingabebildschirms, ähnlich wie im nativen iOS. Bildschirm mit Farben, Größen, Schriftarten usw. anpassbar.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 4580
Likes: 117
Pub-Punkte: 135

Paket installieren

flutter pub add passcode_screen

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein plattformunabhängiges Flutter-Paket, das einen anpassbaren Passcode-Eingabebildschirm bereitstellt, der native iOS-Passcode-Oberflächen nachahmt. Es unterstützt verschiedene Anpassungsoptionen wie Farben, Größen und Schriftarten und ist somit für sichere PIN- oder OTP-Eingaben auf mehreren Plattformen geeignet. Das Paket ist leichtgewichtig und lässt sich nahtlos in Flutter-Anwendungen integrieren und bietet eine konsistente Benutzererfahrung unter Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

Sichere Anmeldung mit PIN
Zwei-Faktor-Authentifizierung
OTP-Überprüfung
Biometrischer Fallback
App-Sperrbildschirm
Zahlungsbestätigung

Hauptmerkmale

Native-artiges iOS-Design
Völlig anpassbare Erscheinung
Plattformübergreifende Kompatibilität
Einfache Integration
Unterstützt alle wichtigen Plattformen
Konfigurierbares Eingabeverhalten

Geeignet für

Apps, die sichere PIN-Eingabe erfordern
Authentifizierungsabläufe
Mobile-App-Entwickler
UX-fokussierte Anwendungen
Multiplattform-Projekte
sicherheitsbewusste Funktionen

Hinweise

Benötigt manuelle Handhabung der Passcode-Überprüfung
Begrenzte integrierte Sicherheitsmaßnahmen
Benutzerdefinierte Stile können die Barrierefreiheit beeinträchtigen
Nicht für komplexe Formularworkflows optimiert
Keine integrierte biometrische Integration
Hängt von externer Logik für die Zustandsverwaltung ab

Original-README

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

Flutter - Passcode Lock Screen

A Flutter package for iOS and Android for showing passcode input screen, similar to Native iOS.

Installation

First add passcode_screen as a dependency in your pubspec.yaml file.

Then use import

import 'package:passcode_screen/passcode_screen.dart';

What can it do for you?

Create a beautiful passcode lock view simply.

PasscodeScreen(
  title: title,
  passwordEnteredCallback: _onPasscodeEntered,
  cancelButton: Text('Cancel'),
  deleteButton: Text('Delete'),
  shouldTriggerVerification: _verificationNotifier.stream,  
);

Passcode input completed callback.

_onPasscodeEntered(String enteredPasscode) {
  
}

Notify passcode screen if passcode correct or not

final StreamController<bool> _verificationNotifier = StreamController<bool>.broadcast();

_onPasscodeEntered(String enteredPasscode) {
  bool isValid = '123456' == enteredPassword;
  _verificationNotifier.add(isValid);
}

Don't forget to close a stream

@override
void dispose() {
  _verificationNotifier.close();
  super.dispose();
}

Customize UI.

Customize circles

class CircleUIConfig {
  final Color borderColor;
  final Color fillColor;
  final double borderWidth;
  final double circleSize;
  double extraSize;
}

Customize keyboard

class KeyboardUIConfig {
  final double digitSize;
  final TextStyle digitTextStyle;
  final TextStyle deleteButtonTextStyle;
  final Color primaryColor;
  final Color digitFillColor;
  final EdgeInsetsGeometry keyboardRowMargin;
  final EdgeInsetsGeometry deleteButtonMargin;
}