Flutter验证码输入插件 verification_code_field 的使用

概述

VerificationCodeField 是一个Flutter插件，它提供了一个输入字段，允许用户在应用程序中输入4、5或6位的验证码。该插件具有多种功能，包括自定义数字计数、光标和焦点管理、样式选项、事件监听器等。

主要特性

• 可定制的数字计数：支持4、5或6位验证码输入。
• 光标和焦点管理：自动处理焦点导航，确保用户在输入时无缝切换字段。
• 样式选项：可以自定义边框、填充颜色、光标颜色、文本样式等。
• 事件监听器：包含onSubmit回调函数，方便获取完整的验证码。
• 内置输入格式化：默认情况下只允许输入数字，防止意外字符进入验证码。

开始使用

首先，通过以下命令安装插件：

flutter pub add verification_code_field

使用示例

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

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Verification Code Field Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: VerificationCodeFieldExample(),
    );
  }
}

class VerificationCodeFieldExample extends StatelessWidget {
  VerificationCodeFieldExample({super.key});

  final ValueNotifier<String> _enteredCode1 = ValueNotifier<String>('');
  final ValueNotifier<String> _enteredCode2 = ValueNotifier<String>('');
  final ValueNotifier<String> _enteredCode3 = ValueNotifier<String>('');

  void _handleSubmit1(String code) {
    _enteredCode1.value = code;
    debugPrint('#1 Entered Code: $code');
  }

  void _handleSubmit2(String code) {
    _enteredCode2.value = code;
    debugPrint('#2 Entered Code: $code');
  }

  void _handleSubmit3(String code) {
    _enteredCode3.value = code;
    debugPrint('#3 Entered Code: $code');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Verification Code Field'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Example #1'),
                Center(
                  child: VerificationCodeField(
                    cleanAllAtOnce: true,
                    onSubmit: _handleSubmit1,
                    onChanged: (p0) {
                      debugPrint(p0);
                    },
                  ),
                ),
              ],
            ),
            const SizedBox(height: 30),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Example #2'),
                Center(
                  child: VerificationCodeField(
                    tripleSeparated: true,
                    codeDigit: CodeDigit.six,
                    onSubmit: _handleSubmit2,
                    onChanged: (p0) {
                      debugPrint(p0);
                    },
                    enabled: true,
                    showCursor: true,
                    filled: true,
                    fillColor: Colors.blue.shade100,
                    cursorColor: Colors.blue,
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide: BorderSide.none),
                    textStyle: const TextStyle(
                        fontSize: 26,
                        color: Colors.blue,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 30),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Example #3'),
                Center(
                  child: VerificationCodeField(
                    tripleSeparated: true,
                    codeDigit: CodeDigit.six,
                    onSubmit: _handleSubmit3,
                    enabled: true,
                    border: const UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.green, width: 1.5),
                    ),
                    focusedBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.green, width: 1.5),
                    ),
                    textStyle:
                        const TextStyle(fontSize: 20, color: Colors.green),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 30),
            ValueListenableBuilder(
              valueListenable: _enteredCode1,
              builder: (context, value, child) => Text(
                '#1 Entered Code: ${_enteredCode1.value}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(height: 10),
            ValueListenableBuilder(
              valueListenable: _enteredCode2,
              builder: (context, value, child) => Text(
                '#2 Entered Code: ${_enteredCode2.value}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(height: 10),
            ValueListenableBuilder(
              valueListenable: _enteredCode3,
              builder: (context, value, child) => Text(
                '#3 Entered Code: ${_enteredCode3.value}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}