Flutter数字面板插件n_pin

Flutter数字面板插件n_pin_board的使用

Neil’s Pin Board

Widget属性

NPinBoard(
    /// 必需的控制器类
    controller          -> NPinController
    /// 显示或隐藏输入行
    showInputs          -> bool
    /// 按钮容器的装饰
    buttonsDecoration   -> BoxDecoration
    /// 输入容器的装饰
    inputsDecoration    -> BoxDecoration
    /// 按钮容器的边距
    buttonsMargin       -> EdgeInsetsGeometry
    /// 输入容器的边距
    inputsMargin        -> EdgeInsetsGeometry
    /// 按钮容器的内边距
    buttonsPadding      -> EdgeInsetsGeometry
    /// 输入容器的内边距
    inputsPadding       -> EdgeInsetsGeometry
    /// 所有输入的配置
    input               -> PinInput
    /// 所有按钮的配置
    button              -> PinButton
    /// 左侧动作图标配置及其点击同步/异步函数，可以为空
    leftIcon            -> PinIcon
    /// 右侧动作图标配置及其点击同步/异步函数，可以为空
    rightIcon           -> PinIcon
)

控制器属性

    shuffle -&gt; bool // 声明是否要打乱按钮位置但保持动作位置不变。
    length  -&gt; int // 声明输入的数量
    isFull  -&gt; bool // 当输入等于长度时
    isEmpty -&gt; bool // 当输入为空时
    value   -&gt; String // 连接后的输入
    inputs  -&gt; List&lt;String&gt; // 输入列表
    last    -&gt; String // 最后一个输入或空字符串
    key     -&gt; String // 按钮按下的值，不适用于图标

如何使用它

1. 创建一个控制器

// 声明控制器
NPinController nPinController = NPinController(
    shuffle   : true,
    hideInputs: false
);

// 添加监听器以通知更改
[@override](/user/override)
void initState() {
    super.initState();
    nPinController.addListener(() => setState(() {}));
}

// 移除监听器并销毁类控制器
[@override](/user/override)
void dispose() {
    super.dispose();
    nPinController.removeListener(() { });
    nPinController.dispose();
}

2. 使用该组件

NPinBoard(
    buttonsMargin : const EdgeInsets.symmetric(vertical: 20),
    controller    : nPinController,
    input         :
    PinInput(
        textStyle: TextStyle(fontSize: 25),
        settings:
        InputSettings(
            margin  : const EdgeInsets.symmetric(horizontal: 1),
            padding : const EdgeInsets.symmetric(vertical: 5),
            border  : Border(bottom: BorderSide(color: Colors.grey.shade300))
        ),
        onFilledSettings:
        InputSettings(
            border  : Border(bottom: BorderSide(color: Colors.black))
        ),
    ),
    button        :
    PinButton(
        textStyle :
        TextStyle(
            color     : Colors.black,
            fontSize  : 18,
            shadows   : [BoxShadow(color: Colors.grey, blurRadius: 1)]
        ),
        onHoverTextStyle :
        TextStyle(
            color       : Colors.white,
            fontSize    : 24,
            fontWeight  : FontWeight.w500,
            shadows     : [BoxShadow(color: Colors.black, blurRadius: 2)]
        ),
        settings:
        ButtonSettings(
            width       : 60,
            height      : 60,
            margin      : EdgeInsets.all(10),
            color       : Colors.transparent,
            borderRadius: BorderRadius.circular(50),
            shadow      :
            BoxShadow(
                color      : Colors.black45,
                blurRadius : 5,
                blurStyle  : BlurStyle.outer
            )
        ),
        onHoverSettings:
        ButtonSettings(
            color       : Colors.red,
            borderRadius: BorderRadius.circular(10),
        )
    ),
    leftIcon  :
    PinIcon(
        onTap             : () async => await Future.delayed(Duration(seconds: 2), () => print(nPinController.value)), // 打印当前输入值
        icon              : Icons.fingerprint,
        onHoverIconStyle  : IconStyle(color: Colors.white, shadows: [BoxShadow(color: Colors.black, blurRadius: 10)]),
    ),
    rightIcon :
    PinIcon(
        onTap            : () => nPinController.removeLast(), // 删除最后一个输入
        icon             : Icons.remove,
        onHoverIcon      : Icons.ac_unit_sharp,
        iconStyle        : IconStyle(color: Colors.black, shadows: [BoxShadow(color: Colors.blue, blurRadius: 10)]),
        onHoverIconStyle : IconStyle(color: Colors.white, shadows: [BoxShadow(color: Colors.black, blurRadius: 10)]),
    )
),

示例代码

import 'package:flutter/material.dart';
import 'package:n_pin_board/n_pin_board.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  NPinController nPinController = NPinController(
    shuffle : false,
    length  : 6
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    nPinController.addListener(() => setState(() {}));
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    nPinController.removeListener(() { });
    nPinController.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) =>
    MaterialApp(
      debugShowCheckedModeBanner: true,
      title : 'Pin Board Example',
      home  : Scaffold(
        body:
        Center(
          child:
          Column(
            mainAxisAlignment : MainAxisAlignment.center,
            children          : [
              NPinBoard(
                buttonsMargin : const EdgeInsets.symmetric(vertical: 20),
                controller    : nPinController,
                input         :
                PinInput(
                  textStyle: TextStyle(fontSize: 25),
                  settings:
                  InputSettings(
                    margin  : const EdgeInsets.symmetric(horizontal: 1),
                    padding : const EdgeInsets.symmetric(vertical: 5),
                    border  : Border(bottom: BorderSide(color: Colors.grey.shade300))
                  ),
                  onFilledSettings:
                  InputSettings(
                    border  : Border(bottom: BorderSide(color: Colors.black))
                  ),
                ),
                button        :
                PinButton(
                  textStyle :
                  TextStyle(
                    color     : Colors.black,
                    fontSize  : 18,
                    shadows   : [BoxShadow(color: Colors.grey, blurRadius: 1)]
                  ),
                  onHoverTextStyle :
                  TextStyle(
                    color       : Colors.white,
                    fontSize    : 24,
                    fontWeight  : FontWeight.w500,
                    shadows     : [BoxShadow(color: Colors.black, blurRadius: 2)]
                  ),
                  settings:
                  ButtonSettings(
                    width       : 60,
                    height      : 60,
                    margin      : EdgeInsets.all(10),
                    color       : Colors.transparent,
                    borderRadius: BorderRadius.circular(50),
                    shadow      :
                    BoxShadow(
                      color      : Colors.black45,
                      blurRadius : 5,
                      blurStyle  : BlurStyle.outer
                    )
                  ),
                  onHoverSettings:
                  ButtonSettings(
                    color       : Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  )
                ),
                leftIcon  :
                PinIcon(
                  // onTap             : () async => await Future.delayed(Duration(seconds: 2), () => print(nPinController.value)),
                  onTap             : () => nPinController.clear(),
                  icon              : Icons.fingerprint,
                  onHoverIconStyle  : IconStyle(color: Colors.white, shadows: [BoxShadow(color: Colors.black, blurRadius: 10)]),
                ),
                rightIcon :
                PinIcon(
                  onTap            : () => nPinController.removeLast(),
                  icon             : Icons.remove,
                  onHoverIcon      : Icons.ac_unit_sharp,
                  iconStyle        : IconStyle(color: Colors.black, shadows: [BoxShadow(color: Colors.blue, blurRadius: 10)]),
                  onHoverIconStyle : IconStyle(color: Colors.white, shadows: [BoxShadow(color: Colors.black, blurRadius: 10)]),
                )
              ),
              if ( nPinController.isEmpty ) Text("Is empty"),
              if ( nPinController.isFull  ) Text("Is full" ),
              if ( !nPinController.isEmpty && !nPinController.isFull  ) Text("value: " + nPinController.value)
            ],
          ),
        ),
      ),
    );
}

更多关于Flutter数字面板插件n_pin_board的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼•1 个月前

更多关于Flutter数字面板插件n_pin_board的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

n_pin_board 是一个用于 Flutter 的数字面板插件，允许用户输入数字密码或 PIN 码。它通常用于需要用户输入数字密码的场景，如支付、解锁、验证等。

安装

首先，你需要在 pubspec.yaml 文件中添加 n_pin_board 依赖：

dependencies:
  flutter:
    sdk: flutter
  n_pin_board: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 n_pin_board 插件：

import 'package:flutter/material.dart';
import 'package:n_pin_board/n_pin_board.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('n_pin_board Example'),
        ),
        body: Center(
          child: PinBoard(
            onCompleted: (String pin) {
              print('Completed PIN: $pin');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

PinBoard 组件有一些可选参数，可以用来自定义数字面板的外观和行为：

onCompleted: 当用户完成输入数字密码时触发的回调函数。
pinLength: 设置 PIN 码的长度，默认为 4。
buttonSize: 设置按钮的大小，默认为 60.0。
buttonColor: 设置按钮的背景颜色。
textColor: 设置按钮上的文本颜色。
borderColor: 设置按钮的边框颜色。
borderRadius: 设置按钮的圆角半径。
buttonShape: 设置按钮的形状，可以是 BoxShape.circle 或 BoxShape.rectangle。

自定义示例

以下是一个自定义 PinBoard 的示例：

PinBoard(
  onCompleted: (String pin) {
    print('Completed PIN: $pin');
  },
  pinLength: 6,
  buttonSize: 70.0,
  buttonColor: Colors.blue,
  textColor: Colors.white,
  borderColor: Colors.black,
  borderRadius: BorderRadius.circular(10.0),
  buttonShape: BoxShape.rectangle,
)

处理用户输入

在 onCompleted 回调中，你可以处理用户输入的 PIN 码。例如，验证 PIN 码是否正确，或者将 PIN 码发送到服务器进行验证。

PinBoard(
  onCompleted: (String pin) {
    if (pin == '1234') {
      print('PIN is correct');
    } else {
      print('PIN is incorrect');
    }
  },
)