Flutter一次性验证码输入插件otp_field_bya2的使用

Flutter一次性验证码输入插件otp_field_bya2的使用

什么是额外的功能？

该插件提供了更好的功能：

• 转到下一个字段
• 回退到上一个字段
• 不清除原有值的情况下替换新值
• 方便地粘贴一次性验证码（OTP）
• 等等

如果在您的应用中实现这些功能，用户将非常喜爱，因为这能显著提升用户体验。

信用

该插件是在修改了 原始插件 的基础上制作的。

您可以查看原始插件的文档以获取更多参考信息。

注意事项

该插件仍在开发阶段，因此会有一些新的功能陆续增加，以提高用户体验。之后我会更新文档。

完整示例代码

以下是使用 otp_field_bya2 插件的一个完整示例代码：

import 'package:flutter/material.dart';
import 'package:otp_text_field/otp_text_field.dart';
import 'package:otp_text_field/style.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.redAccent,
          primary: Colors.redAccent,
        ),
      ),
      home: OTPScreen(),
    ),
  );
}

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

  [@override](/user/override)
  State<OTPScreen> createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  final OtpFieldController controller = OtpFieldController(); // 控制器用于管理OTP输入框
  String _otp = ""; // 存储OTP值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "请输入一次性验证码",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 15),
              Text(
                "我们已经向您的邮箱发送了一个六位数的一次性验证码，请将其输入到下方",
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 15),
              SizedBox(
                width: double.infinity,
                child: OTPTextField(
                  length: 6, // 设置验证码长度为6位
                  controller: controller, // 使用控制器
                  fieldStyle: FieldStyle.box, // 设置输入框样式
                  outlineBorderRadius: 6, // 设置边框圆角
                  fieldWidth: 40, // 设置每个输入框宽度
                  onChanged: (otpValue) { // 当OTP值发生变化时调用
                    setState(() {
                      _otp = otpValue; // 更新状态
                    });
                  },
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _otp.length < 6 ? null : () {}, // 如果OTP长度小于6，则禁用按钮
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.redAccent,
                ),
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 15),
                  child: Text("提交"), // 提交按钮
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}