Flutter验证码表单插件flutter_captcha_form_field的使用

Flutter验证码表单插件flutter_captcha_form_field的使用

特性

flutter_captcha_form_field 是一个可定制的 Flutter 表单字段小部件，用于验证码验证，确保用户认证的安全性。

开始使用

要将 flutter_captcha_form_field 添加到你的项目中，你需要在 pubspec.yaml 文件中添加依赖项。你可以从 pub.dev 或 GitHub 安装该包。

从 pub.dev 安装：

dependencies:
  flutter_captcha_form_field: ^0.0.4

从 GitHub 安装：

dependencies:
  flutter_captcha_form_field:
    git:
      url: https://github.com/arminmehraeen/Flutter-Captcha.git

然后，在你的 Dart 文件中导入该库：

import 'package:flutter_captcha_form_field/flutter_captcha_form_field.dart';

使用方法

以下是如何使用 CaptchaFormField 的基本示例：

// 创建一个验证码表单字段实例
CaptchaFormField captchaFormField = CaptchaFormField();

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_captcha_form_field 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Captcha',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 姓名输入框
              TextFormField(
                decoration: const InputDecoration(
                  labelText: "姓名",
                  border: const OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value == "") {
                    return "此字段为必填项";
                  }
                },
              ),
              const SizedBox(height: 15),

              // 默认的验证码表单字段
              const CaptchaFormField(),

              const SizedBox(height: 15),

              // 自定义的验证码表单字段
              CaptchaFormField(
                captchaDuration: Duration(seconds: 3), // 验证码有效时间
                captchaBackground: BoxDecoration(
                  gradient: LinearGradient(colors: [Colors.red, Colors.blue]), // 背景渐变
                ),
                labelText: "验证码", // 提示文本
                captchaLength: 6, // 验证码长度
                onChanged: (value) {
                  print(value); // 打印验证码值
                },
              ),
              const SizedBox(height: 15),

              // 验证按钮
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('表单验证成功')),
                    );
                  }
                },
                child: const Text("验证"),
              )
            ],
          ),
        ),
      ),
    );
  }
}