Flutter验证码处理插件flutter_verification_code的使用

简介

flutter_verification_code 是一个Flutter包，它可以帮助您创建一个验证码输入框。该插件基于https://github.com/tiny-express/flutter_verification_code_input，并添加了当用户在完成填写后删除字符时的状态变化功能。此外，从1.1.0版本开始，支持整个验证码的复制和粘贴。

安装后，在您的Dart代码中可以使用如下导入语句：

import 'package:flutter_verification_code/flutter_verification_code.dart';

使用方法

基本用法

下面是一个基本的例子，展示了如何使用VerificationCode小部件来创建一个简单的验证码输入框。

VerificationCode(
  textStyle: TextStyle(fontSize: 20.0, color: Colors.red[900]),
  keyboardType: TextInputType.number,
  underlineColor: Colors.amber, // 如果为null，则使用来自Theme的primaryColor: Colors.red
  length: 4,
  cursorColor: Colors.blue, // 如果为null，则默认为环境色
  clearAll: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
      'clear all',
      style: TextStyle(fontSize: 14.0, decoration: TextDecoration.underline, color: Colors.blue[700]),
    ),
  ),
  onCompleted: (String value) {
    setState(() {
      _code = value;
    });
  },
  onEditing: (bool value) {
    setState(() {
      _onEditing = value;
    });
    if (!_onEditing) FocusScope.of(context).unfocus();
  },
),

完整示例代码

以下是一个完整的示例代码，您可以直接将其用于自己的项目中进行测试。

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: Colors.red,
        hintColor: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _onEditing = true;
  String? _code;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(
          child: Text('Example verify code'),
        ),
      ),
      body: Column(
        children: [
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Center(
              child: Text(
                'Enter your code',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ),
          VerificationCode(
            textStyle: Theme.of(context)
                .textTheme
                .bodyText2!
                .copyWith(color: Theme.of(context).primaryColor),
            keyboardType: TextInputType.number,
            underlineColor: Colors.amber, // 如果为null，则使用来自Theme的primaryColor: Colors.red
            length: 4,
            cursorColor: Colors.blue, // 如果为null，则默认为环境色
            clearAll: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'clear all',
                style: TextStyle(
                  fontSize: 14.0,
                  decoration: TextDecoration.underline,
                  color: Colors.blue[700],
                ),
              ),
            ),
            margin: const EdgeInsets.all(12),
            onCompleted: (String value) {
              setState(() {
                _code = value;
              });
            },
            onEditing: (bool value) {
              setState(() {
                _onEditing = value;
              });
              if (!_onEditing) FocusScope.of(context).unfocus();
            },
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: _onEditing
                  ? const Text('Please enter full code')
                  : Text('Your code: $_code'),
            ),
          )
        ],
      ),
    );
  }
}

复制粘贴功能

如果您想了解更多关于如何使用复制粘贴功能的信息，请参考这个GitHub issue中的讨论。完整示例可以在此链接找到。

展示案例

以下是两个展示案例的截图：

致谢

这是由Agoradesk开发的一个项目，Agoradesk是一个点对点（P2P）加密货币交易平台。该项目由LocalMonero背后的团队创建，LocalMonero是最大且最值得信赖的Monero P2P交易平台。

希望这些信息能帮助您更好地理解和使用flutter_verification_code插件！如果有任何问题或需要进一步的帮助，请随时提问。