Flutter滑动验证码插件slider_captcha的使用
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 回复