Flutter验证码功能插件flutter_captcha的使用

Flutter验证码功能插件flutter_captcha的使用

简介

flutter_captcha 是一个用于在Flutter应用中实现验证码功能的插件。它可以将任何小部件自动分割成多个部分，并允许这些部分进行旋转和定位。用户可以通过拖动这些部分来完成验证，开发者可以在任何时候检查用户的解决方案是否正确。

功能特性

• 自动分割：可以将任何小部件自动分割成多个部分。
• 旋转和定位：每个部分可以被随机旋转和定位。
• 验证状态检查：可以随时检查用户的解决方案是否正确。
• 自定义样式：支持自定义交叉线、拖动效果等。

使用步骤

1. 添加依赖

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

dependencies:
  flutter_captcha: ^latest_version

替换 ^latest_version 为最新版本号。

2. 初始化控制器

在你的页面中初始化 FlutterCaptchaController，并将其传递给 FlutterCaptcha 小部件。以下是一个完整的示例代码，展示了如何使用 flutter_captcha 插件。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_captcha/flutter_captcha.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _crossLined = true;
  double _crossLineWidth = 10.0;
  final _textEditingController = TextEditingController();
  final _controller = FlutterCaptchaController(
    random: Random.secure(),
  )..init();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    _textEditingController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: Builder(builder: (context) {
          return SafeArea(
            bottom: false,
            child: SingleChildScrollView(
              child: Column(
                children: [
                  const Text(
                    '显示交叉线',
                    style: TextStyle(fontSize: 20),
                  ),
                  Switch(
                    value: _crossLined,
                    onChanged: (value) => setState(() => _crossLined = value),
                  ),
                  const Text(
                    '允许移动',
                    style: TextStyle(fontSize: 20),
                  ),
                  Switch(
                    value: _controller.randomizePositions,
                    onChanged: (value) =>
                        setState(() => _controller.randomizePositions = value),
                  ),
                  const Text(
                    '允许旋转',
                    style: TextStyle(fontSize: 20),
                  ),
                  Switch(
                    value: _controller.randomizeAngles,
                    onChanged: (value) =>
                        setState(() => _controller.randomizeAngles = value),
                  ),
                  Text(
                    '分割大小: ${_controller.size}',
                    style: const TextStyle(fontSize: 20),
                  ),
                  Slider(
                    value: _controller.size.toDouble(),
                    min: 2,
                    max: 15,
                    onChanged: (value) =>
                        setState(() => _controller.size = value.toInt()),
                  ),
                  Text(
                    '交叉线宽度: ${_crossLineWidth.toStringAsFixed(1)}',
                    style: const TextStyle(fontSize: 20),
                  ),
                  Slider(
                    value: _crossLineWidth,
                    min: 1.0,
                    max: 20,
                    onChanged: (value) => setState(() => _crossLineWidth = value),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text(
                    '检查解决方案',
                    style: TextStyle(fontSize: 20),
                  ),
                  FilledButton(
                    onPressed: () async {
                      await _onCheck(context);
                    },
                    child: const Text('检查'),
                  ),
                  const Text(
                    '重新开始',
                    style: TextStyle(fontSize: 20),
                  ),
                  FilledButton(
                    onPressed: () async {
                      final sc = Scaffold.of(context);
                      _controller.reset();
                      sc.closeDrawer();
                    },
                    child: const Text('重新开始'),
                  ),
                  const Text(
                    '自动解决',
                    style: TextStyle(fontSize: 20),
                  ),
                  FilledButton(
                    onPressed: () async {
                      final sc = Scaffold.of(context);
                      _controller.solve();
                      sc.closeDrawer();
                    },
                    child: const Text('自动解决'),
                  ),
                ],
              ),
            ),
          );
        }),
      ),
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('验证码'),
      ),
      body: Center(
        child: FlutterCaptcha(
          controller: _controller,
          crossLine: _crossLined
              ? (color: Colors.white, width: _crossLineWidth)
              : null,
          fit: BoxFit.cover,
          partsBuilder: (context, part) {
            return ColoredBox(
              color: Colors.red, // 可以自定义每个部分的背景颜色
              child: part,
            );
          },
          draggingBuilder: (_, child) => Opacity(opacity: 0.5, child: child), // 拖动时的透明度效果
          child: Image.asset('assets/flutter-dash.png'), // 替换为你的图片资源
        ),
      ),
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Builder(builder: (context) {
            return FloatingActionButton.large(
              onPressed: Scaffold.of(context).openDrawer,
              child: const Icon(Icons.settings),
            );
          }),
        ],
      ),
    );
  }

  Future<void> _onCheck(BuildContext context) async {
    final scaffold = Scaffold.of(context);
    if (_controller.checkSolution()) {
      showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: const Text('成功'),
              content: const Text('你不是机器人'),
              actions: [
                TextButton(
                  onPressed: () => Navigator.of(context).pop(),
                  child: const Text('确定'),
                ),
              ],
            );
          });
      scaffold.closeDrawer();
      return;
    }

    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text('错误'),
            content: const Text('你是机器人'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: const Text('确定'),
              ),
            ],
          );
        });

    scaffold.closeDrawer();
  }
}