插件详情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;
}