Flutter一次性密码（OTP）显示插件custom_otp_modal的使用

本Flutter插件提供了一个可自定义的一次性密码（OTP）模态框，用于输入验证。它支持动态设置OTP长度、通过单个TextEditingController实现流畅输入以避免键盘闪烁，并且可以灵活格式化OTP输入。该模态框内置了验证功能，提供了成功和错误弹窗，并且易于集成到任何Flutter应用中。

特性

• 动态配置OTP长度
• 使用单个TextEditingController实现平滑输入
• 自定义成功和错误消息
• 简单易用，适合快速集成到现有项目中

使用示例

以下是一个完整的示例，展示如何在Flutter应用中使用custom_otp_modal插件。

示例代码

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

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

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

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

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

  // 显示OTP模态框
  Future<void> showOtp(BuildContext context) async {
    // 初始化OTP模态框
    OtpModal otpModal = OtpModal(
      context: context, // 上下文
      keyboardType: TextInputType.number, // 键盘类型
      backgroundColor: Colors.blue, // 背景颜色
      textColor: Colors.white, // 文本颜色
      buttonColor: Colors.white, // 按钮背景颜色
      borderColor: Colors.blue, // 边框颜色
      titleTextStyle: const TextStyle(color: Colors.white, fontSize: 18), // 标题样式
      contentTextStyle: const TextStyle(color: Colors.white, fontSize: 16), // 内容样式
      buttonTextStyle: const TextStyle(color: Colors.blue, fontSize: 16), // 按钮文本样式
      otpTtl: 60, // OTP有效时间（秒）
    );

    // 显示OTP模态框并获取用户输入
    String? otpValue = await otpModal.show();

    // 验证用户输入
    if (otpValue != null && otpValue == "123456") {
      // 输入正确时显示成功提示
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('OTP Verified Successfully!')),
      );
    } else {
      // 输入错误时显示失败提示
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('OTP Verification Failed!')),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('OTP Modal Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showOtp(context); // 点击按钮时显示OTP模态框
          },
          child: const Text('Show OTP Modal'),
        ),
      ),
    );
  }
}