套件詳情v2.0.1

passcode_screen

一個跨平台的 Flutter 套件，用於顯示密碼輸入畫面，類似於原生 iOS。可透過顏色、尺寸、字型等自訂畫面。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 4580
喜歡數: 117
Pub 分數: 135

安裝套件

flutter pub add passcode_screen

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個與平台無關的 Flutter 套件，提供可自訂的密碼輸入畫面，設計風格類似於原生 iOS 密碼介面。它支援多種自訂選項，包括顏色、尺寸和字型，適用於跨多個平台的安全 PIN 或 OTP 輸入。此套件輕量且能順暢整合至 Flutter 應用程式中，在 Android、iOS、Web、macOS、Windows 及 Linux 上提供一致的使用者體驗。

適用情境

使用PIN碼安全登入
雙因素驗證
OTP 驗證
生物特徵備用
應用鎖屏
付款確認

主要特色

原生iOS設計
完全可自定義的外觀
跨平台相容性
簡單整合
支援所有主要平台
可設定的輸入行為

適合對象

需要安全PIN碼輸入的應用程式
認證流程
行動應用開發者
以使用者體驗為導向的應用程式
多平台專案
注重安全的功能

使用建議

需要手動處理密碼驗證
有限的內建安全措施
自定樣式可能會影響可存取性
未針對複雜表單工作流程進行優化
無內建生物識別整合
依賴外部邏輯進行狀態管理

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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;
}