Flutter一次性密码输入插件otp_field_premium的使用

Flutter一次性密码输入插件otp_field_premium的使用

一次性密码（OTP）在许多应用中被广泛使用，以确保用户身份验证的安全性。本文将介绍如何在Flutter项目中使用otp_field_premium插件来实现OTP输入功能。

特点

• 高度可定制化：可以根据需求自定义OTP字段样式。
• 可变OTP长度：可以配置字段以接受任意长度的OTP。
• 安全输入：可以选择隐藏OTP输入，以保护敏感数据。
• 键盘支持：自动聚焦并处理输入导航。
• 复制粘贴：支持OTP的复制粘贴功能。
• OTP字段形状：用户可以选择方形、下划线或圆形形状的OTP字段。

安装

在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  otp_field_premium: ^0.0.8  // 运行 `flutter pub get` 来安装包。

使用

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

import 'package:otp_field_premium/otp_field_premium.dart';

// 在需要使用OTP字段的地方插入以下代码
OTPFieldPremium(
  length: 6,  // 设置OTP的长度为6
  onSubmit: (pin) {  // 当用户完成输入时调用此回调函数
    print("Entered OTP: $pin");  // 打印输入的OTP
  },
),

形状

OTP字段支持以下三种形状：

1. shape = OtpFiledShape.square
2. shape = OtpFiledShape.underscore
3. shape = OtpFiledShape.circular

参数

以下是OTPFieldPremium组件的一些参数：

  // 设置所需的字段数量（最多8个）
  final int length;
  // 返回有效的OTP字段值
  final Function(String val) onSubmit;
  // 设置OTP字段的圆角半径
  final double borderRadius;
  // 设置OTP字段选中时的边框宽度
  final double focusBorderWidth;
  // 设置OTP字段选中时的边框颜色
  final Color focusBorderColor;
  // 设置OTP字段选中时的背景颜色
  final Color focusFillColor;
  // 设置OTP字段未选中时的边框颜色
  final double unFocusBorderWidth;
  // 设置OTP字段未选中时的边框颜色
  final Color unFocusBorderColor;
  // 设置OTP字段未选中时的背景颜色
  final Color unFocusFillColor;
  // 设置OTP字段为空时的边框宽度
  final double errorBorderWidth;
  // 设置OTP字段为空时的边框颜色
  final Color errorBorderColor;
  // 设置OTP字段为空时的背景颜色
  final Color errorFillColor;
  // 设置阴影的密度
  final double shadowElevation;
  // 设置阴影的颜色
  final Color shodowColor;
  // 如果需要隐藏OTP文本，则设置hideText=true
  final bool hideText;
  // 当前支持的形状有三种：OtpFiledShape.underscore, OtpFiledShape.square, OtpFiledShape.circular
  final OtpFiledShape otpFiledShape;

示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用otp_field_premium插件：

// 忽略对公共成员API的文档
import 'package:flutter/material.dart';
import 'package:otp_field_premium/config/theme/theme.dart';
import 'package:otp_field_premium/otp_field_premium.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Image.asset("assets/v_code.jpg"),  // 添加一个示意图
                Text(
                  '获取您的验证码',
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .titleLarge!
                      .copyWith(fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 5),
                Text(
                  "请输入发送到您手机 \"01*********\" 的四位数字验证码。",
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .bodyMedium!
                      .copyWith(color: const Color(0xFF757575)),
                ),
                const SizedBox(height: 25),
                OtpFieldPremium(
                  length: 4,  // 设置OTP长度为4
                  onSubmit: (val) {},  // 输入完成后回调
                  focusBorderWidth: .7,  // 选中时的边框宽度
                  focusBorderColor: const Color(0xFF30BCED),  // 选中时的边框颜色
                  focusFillColor: const Color(0xFFFAFAFA),  // 选中时的背景颜色
                  unFocusBorderWidth: .3,  // 未选中时的边框宽度
                  unFocusBorderColor: const Color(0xFFD6D6D6),  // 未选中时的边框颜色
                  unFocusFillColor: const Color(0xFFFAFAFA),  // 未选中时的背景颜色
                  errorBorderWidth: 1,  // 错误时的边框宽度
                  errorBorderColor: Colors.red,  // 错误时的边框颜色
                  errorFillColor: const Color(0xFFFAFAFA),  // 错误时的背景颜色
                  shadowElevation: 0,  // 阴影的密度
                  shodowColor: Colors.transparent,  // 阴影颜色
                  hideText: false,  // 是否隐藏OTP文本
                  otpFiledShape: OtpFiledShape.square,  // 设置OTP字段形状为方形
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("未收到验证码？  ", style: TextStyle(color: Color(0xFF757575))),  // 提示用户重新获取验证码
                      Text(
                        "重新发送验证码",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF30BCED),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},  // 提交按钮的点击事件
                  child: const Text("提交"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}