Flutter随机输入面板插件random_input_pad的使用

RandomInputPad 是一个可自定义的随机排列数字键盘小部件，专为安全的PIN输入设计。此Flutter小部件非常适合任何涉及密码或安全性相关的屏幕，其不可预测的输入布局可以增加额外的安全性。

特性

• 随机按键布局：每次初始化时按键都会被随机打乱，防止可预测的PIN输入。
• 可定制的设计：可以配置颜色、形状、按钮边框、文本标签和其他UI元素。
• 完成回调：当用户输入完成后或按下“确定”时，触发带有用户输入的 onFinish 回调函数。
• 支持自定义输入长度：设置所需的数字输入位数。

安装

在您的Flutter项目中使用 RandomInputPad，只需将其添加到 pubspec.yaml 文件的依赖项中：

dependencies:
  flutter:
    sdk: flutter
  random_input_pad:

然后在Dart文件中导入它：

import 'package:random_input_pad/random_input_pad.dart';

基本用法

将 RandomInputPad 小部件添加到您的widget树中，并根据需要自定义参数：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Random Input Pad Example")),
        body: Center(
          child: RandomInputPad(
            onFinish: (input) {
              // 处理完成的PIN输入
              print("输入的PIN: $input");
            },
            totalInput: 4, // 设置所需的数字位数
            backgroundColor: Colors.white,
            actionButtonCollor: Colors.indigo,
            filledColor: Colors.green,
            title: "请输入您的PIN",
            titleColor: Colors.black,
            numberColor: Colors.black,
            buttonBorderColor: Colors.grey,
            inputButtonRounded: 8.0,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

参数

示例

以下是如何创建默认设置的 RandomInputPad：

RandomInputPad(
  onFinish: (input) {
    print("输入的PIN: $input");
  },
)

以下是创建自定义 RandomInputPad 的示例：

RandomInputPad(
  onFinish: (input) {
    print("PIN已完整输入: $input");
  },
  totalInput: 4,
  backgroundColor: Colors.blue.shade50,
  actionButtonCollor: Colors.redAccent,
  filledColor: Colors.green,
  title: "安全PIN输入",
  titleColor: Colors.blueGrey,
  numberColor: Colors.black,
  buttonBorderColor: Colors.blueGrey,
  inputButtonRounded: 10.0,
)

示例代码

以下是一个完整的示例代码，展示如何使用 RandomInputPad：

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

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Body(),
    );
  }
}

class Body extends StatelessWidget {
  const Body({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () async {
              String? pin = await Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const InputPin()),
              );
              if (pin != null) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Center(child: Text("PIN : $pin")),
                    backgroundColor: Colors.blue.shade500,
                    showCloseIcon: true,
                  ),
                );
              }
            },
            child: const Text("输入PIN"),
          ),
        ),
      ),
    );
  }
}

class InputPin extends StatelessWidget {
  const InputPin({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: null,
      ),
      body: SafeArea(
        child: RandomInputPad(
          onFinish: (input) {
            Navigator.pop(context, input);
          },
          totalInput: 6,
          backgroundColor: Colors.white,
          filledColor: Colors.indigo,
          actionButtonCollor: Colors.indigo,
          titleColor: Colors.black,
          title: "请输入您的PIN",
          inputButtonRounded: 4.0,
          numberColor: Colors.black,
          buttonBorderColor: Colors.grey,
        ),
      ),
    );
  }
}