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

简介

otp_pin_field_fork 是一个用于生成一次性密码输入框的 Flutter 包。它提供了美观的设计和动画效果，是一个高度可定制化的 Flutter 小部件，用于输入一次性密码。

创建者：Shivam Mishra
联系方式：@shivbo96

支持作者：

• Buy Me A Coffee
• PayPal: Donate via PayPal

使用方法

1. 添加依赖

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

dependencies:
  otp_pin_field_fork: ^版本号

然后运行以下命令安装依赖：

$ flutter packages get

或者使用 IDE 的自动获取功能。

2. 导入包

在 Dart 文件中导入以下内容：

import 'package:otp_pin_field_fork/otp_pin_field.dart';

属性说明

以下是 OtpPinField 的主要属性及其描述：

示例代码

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

import 'package:flutter/material.dart';
import 'package:otp_pin_field_fork/otp_pin_field.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OTP Pin Field Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _otpPinFieldController = GlobalKey<OtpPinFieldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('OTP Pin Field Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OtpPinField(
              key: _otpPinFieldController,
              maxLength: 4,
              showCursor: true,
              cursorColor: Colors.indigo,
              cursorWidth: 3,
              otpPinFieldStyle: const OtpPinFieldStyle(
                showHintText: true,
                activeFieldBorderGradient: LinearGradient(
                  colors: [Colors.black, Colors.redAccent],
                ),
                filledFieldBorderGradient: LinearGradient(
                  colors: [Colors.green, Colors.tealAccent],
                ),
                defaultFieldBorderGradient: LinearGradient(
                  colors: [Colors.orange, Colors.brown],
                ),
                fieldBorderWidth: 3,
              ),
              upperChild: const Column(
                children: [
                  SizedBox(height: 30),
                  Icon(Icons.flutter_dash_outlined, size: 150),
                  SizedBox(height: 20),
                ],
              ),
              middleChild: Column(
                children: [
                  const SizedBox(height: 30),
                  ElevatedButton(
                    onPressed: () {
                      _otpPinFieldController.currentState?.clearOtp();
                    },
                    child: const Text('Clear OTP'),
                  ),
                  const SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () => Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => const NextPage()),
                    ),
                    child: const Text('Next Page'),
                  ),
                  const SizedBox(height: 30),
                ],
              ),
              onSubmit: (text) {
                debugPrint('Entered pin is $text');
              },
              onChange: (text) {
                debugPrint('Change pin is $text');
              },
              otpPinFieldDecoration: OtpPinFieldDecoration.defaultPinBoxDecoration,
            ),
          ],
        ),
      ),
    );
  }
}

Android SMS 约束

为了确保短信验证码能够被正确接收，需要满足以下条件：

1. 短信内容不得超过 140 字节。
2. 必须包含一次性验证码，并将其发送回服务器以完成验证流程。
3. 结尾必须附加一个 11 位的哈希字符串，用于标识应用。

例如：

8125 是你的验证码 Ov114rXIhwf (Ov114rXIhwf 是你的哈希值，请在日志中搜索并添加到短信中)