Flutter滑动验证码插件slider_captcha的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter滑动验证码插件slider_captcha的使用

SLIDER CAPTCHA

通过图像进行验证。

Install 安装

在您的pubspec.yaml文件中添加依赖:

dependencies:
  slider_captcha: ^最新版本号

然后运行flutter pub get来安装插件。

Demo 演示

Code Example 示例代码

客户端验证 Slider Captcha verify with client

下面是一个简单的客户端验证的例子:

SliderCaptcha(
  controller: controller,
  image: Image.asset(
    'assets/image.jpeg',
    fit: BoxFit.fitWidth,
  ),
  colorBar: Colors.blue,
  colorCaptChar: Colors.blue,
  onConfirm: (value) {
    Future.delayed(const Duration(seconds: 1)).then(
      (value) {
        controller.create();
      },
    );
  },
),

服务端验证 Slider Captcha verify with server

如果您想要实现与服务器交互的验证,可以参考以下代码:

SliderCaptchaClient(
  provider: SliderCaptchaClientProvider(
    base64Image,
    base64Piece,
    coordinateY,
  ),
  onConfirm: (value) async {
    /// 在这里你可以对验证码进行验证
    await Future.delayed(const Duration(seconds: 1));
    debugPrint(value.toString());
  },
),

如何实现服务器端的逻辑,可以参考 GitHub上的这个项目

感谢@i5hi推荐和支持"服务端验证"功能。更多讨论请参阅这里

完整示例demo

为了更好地理解如何使用这个插件,我们提供了一个完整的示例demo,您可以直接在自己的项目中尝试。

main.dart

import 'package:example/slider_captcha_client_verify.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SliderCaptchaClientVerify(title: 'SliderCaptchaClientVerify'),
    );
  }
}

SliderCaptchaClientVerify.dart

确保你有一个名为slider_captcha_client_verify.dart的文件,用于展示滑动验证码的功能。以下是该文件的一个简化示例:

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

class SliderCaptchaClientVerify extends StatefulWidget {
  final String title;

  const SliderCaptchaClientVerify({Key? key, required this.title}) : super(key: key);

  @override
  _SliderCaptchaClientVerifyState createState() => _SliderCaptchaClientVerifyState();
}

class _SliderCaptchaClientVerifyState extends State<SliderCaptchaClientVerify> {
  late SliderCaptchaController controller;

  @override
  void initState() {
    super.initState();
    controller = SliderCaptchaController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SliderCaptcha(
              controller: controller,
              image: Image.asset(
                'assets/image.jpeg', // 确保你的项目中有这个图片资源
                fit: BoxFit.fitWidth,
              ),
              colorBar: Colors.blue,
              colorCaptChar: Colors.blue,
              onConfirm: (value) {
                Future.delayed(const Duration(seconds: 1)).then(
                  (value) {
                    controller.create();
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

希望这些信息能帮助您快速上手slider_captcha插件。如果有任何问题或需要进一步的帮助,请随时提问!


更多关于Flutter滑动验证码插件slider_captcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滑动验证码插件slider_captcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中集成和使用slider_captcha滑动验证码插件的示例代码。这个示例将展示如何设置滑动验证码的基本配置,并处理验证结果。

首先,你需要在你的pubspec.yaml文件中添加slider_captcha依赖:

dependencies:
  flutter:
    sdk: flutter
  slider_captcha: ^最新版本号  # 替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter应用中实现滑动验证码。以下是一个完整的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slider Captcha Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SliderCaptchaScreen(),
    );
  }
}

class SliderCaptchaScreen extends StatefulWidget {
  @override
  _SliderCaptchaScreenState createState() => _SliderCaptchaScreenState();
}

class _SliderCaptchaScreenState extends State<SliderCaptchaScreen> {
  late SliderCaptchaController _controller;
  bool _isVerified = false;

  @override
  void initState() {
    super.initState();
    _controller = SliderCaptchaController(
      blockSize: Size(300, 50), // 设置滑块的大小
      trackColor: Colors.grey[300]!, // 轨道颜色
      trackHeight: 10.0, // 轨道高度
      blockColor: Colors.blue, // 滑块颜色
      blockShadowColor: Colors.blue[700]!, // 滑块阴影颜色
      completedBlockColor: Colors.green, // 完成后的滑块颜色
      completedTrackColor: Colors.green[100]!, // 完成后的轨道颜色
      textStyle: TextStyle(color: Colors.black, fontSize: 16), // 文本样式
      verificationLength: 0.5, // 验证滑块需要滑动到轨道长度的比例
      puzzle: {
        'image': 'path_to_your_puzzle_image', // 拼图图片路径
        'gap': 30.0, // 拼图缺口大小
      },
      onVerificationCompleted: (result) {
        // 验证完成后的回调
        setState(() {
          _isVerified = result;
        });
        if (result) {
          print('Verification successful!');
        } else {
          print('Verification failed!');
        }
      },
      onVerificationStarted: () {
        // 验证开始时的回调
        print('Verification started!');
      },
      onVerificationCancelled: () {
        // 验证取消时的回调
        print('Verification cancelled!');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Captcha Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SliderCaptcha(
              controller: _controller,
            ),
            SizedBox(height: 20),
            Text(
              _isVerified ? 'Verification successful!' : 'Verification failed or not started.',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重置滑动验证码
          _controller.reset();
          setState(() {
            _isVerified = false;
          });
        },
        tooltip: 'Reset',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

注意事项:

  1. 拼图图片:在puzzle参数中,'image'应该是一个有效的图片路径,可以是本地资源路径或网络图片URL。
  2. 依赖版本:确保你使用的是slider_captcha插件的最新版本。
  3. 回调处理onVerificationCompletedonVerificationStartedonVerificationCancelled回调分别处理验证完成、开始和取消的情况。

这个示例展示了如何配置和使用slider_captcha插件,包括初始化滑块控制器、设置滑块样式和处理验证结果。你可以根据需要进一步自定义和扩展这个示例。

回到顶部