搜索插件、代码仓与 APP 分类

custom_pin_screen 封面
插件详情v1.0.1

custom_pin_screen

一个 Flutter 包,可为您的移动应用程序添加带有自定义键盘和密码的屏幕。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
429
喜欢数
49
Pub 分数
160

安装插件

flutter pub add custom_pin_screen

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,使开发者能够为移动和桌面应用程序实现可自定义的 PIN 输入屏幕,并配备定制键盘。它支持对 PIN、OTP 和密码的安全输入处理,提供灵活的设计和行为。该包可无缝集成到 Android、iOS、Web、macOS、Windows 和 Linux 上,非常适合需要数字或自定义输入的认证流程。它提供了简洁的 API,用于样式设置、验证和回调处理。

适合场景

  • 使用PIN码进行用户身份验证
  • 一次性密码 (OTP) 输入
  • 安全密码输入字段
  • 表单的自定义键盘布局
  • 多平台应用一致性

主要特点

  • 可自定义的键盘布局
  • 跨平台支持
  • 安全输入处理
  • 可配置的引脚长度
  • 更改时和完成时回调
  • 与现有用户界面轻松集成

适合对象

  • 开发人员构建身份验证流程
  • 需要安全数字输入的应用程序
  • 针对多个平台的项目
  • 希望使用可重用的钉子组件的团队
  • 以用户体验为中心的表单实现

使用建议

  • 需要手动处理安全最佳实践
  • 内置验证功能有限,仅限长度
  • 可能需要额外的样式来实现复杂的设计
  • 未针对非数值输入进行优化
  • 依赖于平台特定的渲染行为

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

🔐 custom pin screen

codecov CI license PRs Welcome GitHub contributors GitHub last commit

A flutter package to add screens with custom keyboards and pins to your mobile application.

🎖 Installing

dependencies:
  custom_pin_screen: "^1.0.0"
⚡️ Import
import 'package:custom_pin_screen/custom_pin_screen.dart';

🎮 How To Use

Dart Usage
  • Pin Auth
onPressed: (){
    Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PinAuthentication(
                      onChanged: (v) {
                        if (kDebugMode) {
                          print(v);
                        }
                      },
                      onSpecialKeyTap: () {},
                      specialKey: const SizedBox(),
                      useFingerprint: true,
                      onbuttonClick: () {},
                      submitLabel: const Text(
                        'Submit',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  ),
                );
    },
  • Custom Keyboard
Column(
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 35.0,
              vertical: 35.0,
            ),
            child: Text(
              "How much do you want to fund your wallet with",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
          ),
          Expanded(
              child: CustomAppKeyBoard(
            onChanged: (v) {
              if (kDebugMode) {
                print(v);
              }
            },
            onbuttonClick: () {
              if (kDebugMode) {
                print('clicked');
              }
            },
            maxLength: 4,
            submitLabel: const Text(
              'Proceed',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
            // ),
          ))
        ],
      )

For more info, please, refer to the main.dart in the example.

📸 ScreenShots

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

❗️ Note

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

🤓 Developer(s)

Abada Samuel Oghenero

⭐️ License

MIT LICENSE

所属分类

源码仓库

使用此插件的项目

暂无相关数据。