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

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

简介

otp_number_field 是一个用于在 Flutter 应用中创建一次性验证码输入框的插件。它可以帮助开发者轻松实现用户输入一次性验证码的功能。

安装

首先，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  otp_number_field: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 otp_number_field 插件来创建一次性验证码输入框。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OtpExamplePage(),
    );
  }
}

class OtpExamplePage extends StatefulWidget {
  @override
  _OtpExamplePageState createState() => _OtpExamplePageState();
}

class _OtpExamplePageState extends State<OtpExamplePage> {
  String _otp = '';

  void _onOtpChanged(String value) {
    setState(() {
      _otp = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OTP 输入示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 创建 OTP 输入框
            OtpNumberField(
              length: 6, // 设置 OTP 验证码长度为 6
              onSubmit: (value) {
                // 用户输入完成后触发的回调
                print('OTP 输入完成: $value');
              },
              onChange: _onOtpChanged, // 用户输入时触发的回调
            ),

            SizedBox(height: 20),

            // 显示用户输入的 OTP 值
            Text(
              '当前输入的 OTP: $_otp',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

1. 导入必要的包：

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

2. 定义主应用类：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: OtpExamplePage(),
       );
     }
   }

3. 创建 OTP 输入页面：

   class OtpExamplePage extends StatefulWidget {
     @override
     _OtpExamplePageState createState() => _OtpExamplePageState();
   }

4. 定义状态类并处理输入逻辑：

   class _OtpExamplePageState extends State<OtpExamplePage> {
     String _otp = ''; // 存储用户输入的 OTP 值
   
     void _onOtpChanged(String value) {
       setState(() {
         _otp = value; // 更新 OTP 值
       });
     }

5. 构建 OTP 输入框：

   OtpNumberField(
     length: 6, // 设置 OTP 验证码长度为 6
     onSubmit: (value) {
       print('OTP 输入完成: $value'); // 用户输入完成后触发的回调
     },
     onChange: _onOtpChanged, // 用户输入时触发的回调
   )

6. 显示用户输入的 OTP 值：

   Text(
     '当前输入的 OTP: $_otp',
     style: TextStyle(fontSize: 18),
   ),