覺(jué)得這種交互很有意思，相對(duì)其他驗(yàn)證 比較符合用戶(hù)體驗(yàn)烹笔。
只實(shí)現(xiàn)了前端的動(dòng)作邏輯，以及驗(yàn)證是否拖動(dòng)到正確區(qū)域抛丽。
未達(dá)到真正的人機(jī)識(shí)別
邏輯也很簡(jiǎn)單
1：隨機(jī)生成 滑塊按鈕谤职、答案區(qū)域 的位置。
2：拖動(dòng)的過(guò)程中驗(yàn)證是否在答案區(qū)域亿鲜，如果在 答案區(qū)域變成綠色允蜈。
3：拖動(dòng)結(jié)束，驗(yàn)證是否在答案區(qū)域蒿柳；在：返回成功 不在：執(zhí)行滑塊歸位動(dòng)畫(huà)饶套。
（拼圖滑塊驗(yàn)證碼）
以下是github地址，覺(jué)得對(duì)你有幫助 請(qǐng)不要吝嗇star ~
主要的代碼也就100多行（格式不知道為啥不對(duì)齊）
import 'dart:math'; import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:shack/widget/dotted_border/r_dotted_line_border.dart'; /// 驗(yàn)證widget /// return /// [true] 成功 /// [false] 失敗 class DemoVerity extends StatefulWidget { final Function lister; DemoVerity({required this.lister}); @override _DemoVerityState createState() => _DemoVerityState(); } class _DemoVerityState extends State<DemoVerity> with TickerProviderStateMixin { /// 半徑 final double radius = 32.0; /// 拖動(dòng)控制 /// 左上角點(diǎn)坐標(biāo)垒探，布局時(shí)會(huì)自動(dòng)轉(zhuǎn)換為中心點(diǎn) /// 初始值 Offset offsetCtrInit = Offset.zero; /// 拖動(dòng)控制 /// 左上角點(diǎn)坐標(biāo)妓蛮，布局時(shí)會(huì)自動(dòng)轉(zhuǎn)換為中心點(diǎn) /// 拖動(dòng)會(huì)變化 Offset offsetCtr = Offset.zero; /// 正確區(qū)域 中心點(diǎn) Offset offsetAwe = Offset.zero; late AnimationController anwerAnimationController; late AnimationController animationController; /// 錯(cuò)誤歸位動(dòng)畫(huà) late final Animation<double> moveAnimation; /// 答案區(qū)域縮放動(dòng)畫(huà) late final Animation<double> scaleAnimation; /// 兩點(diǎn)距離 double get distance => (offsetAwe - offsetCtr).distance; /// 是否滑入正確區(qū)域 bool success = false; @override void initState() { super.initState(); animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 200)); animationController.addStatusListener((status) { if (status == AnimationStatus.completed) { animationController.reset(); setState(() { offsetCtr = offsetCtrInit; }); } }); moveAnimation = Tween<double>(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: animationController, curve: const Cubic(0.68, 0, 0, 1.5), ), ); anwerAnimationController = AnimationController( vsync: this, duration: const Duration(milliseconds: 800)); scaleAnimation = Tween<double>(begin: 1.0, end: 1.3).animate( CurvedAnimation( parent: anwerAnimationController, curve: Curves.fastOutSlowIn, ), ); WidgetsBinding.instance!.addPostFrameCallback((timeStamp) { final size = context.size ?? Size.zero; final x1 = radius + Random().nextInt((size.width - radius * 2.2).toInt()); final y1 = radius + Random().nextInt(30); /// 正確答案在下半部分區(qū)域 final x2 = radius + Random().nextInt((size.width - radius * 2.6).toInt()); final y2 = size.height * 0.7 + Random().nextInt((size.height * 0.3).toInt()) - radius * 1.2 - MediaQuery.of(context).padding.bottom; setState(() { offsetCtr = Offset(x1, y1); offsetCtrInit = offsetCtr; offsetAwe = Offset(x2, y2); }); anwerAnimationController.repeat(reverse: true); }); } @override void dispose() { animationController.dispose(); anwerAnimationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return SizedBox( width: double.infinity, child: Stack( clipBehavior: Clip.none, children: [ /// 答案區(qū)域 Positioned( top: offsetAwe.dy - radius, left: offsetAwe.dx - radius, child: ScaleTransition( scale: scaleAnimation, child: Container( width: radius * 2, height: radius * 2, alignment: const Alignment(0, 0), decoration: BoxDecoration( border: RDottedLineBorder.all( width: 1, color: success ? Colors.green : Colors.blue), color: success ? const Color(0xffe9faef) : const Color(0xffe9f5fe), shape: BoxShape.circle, ), child: success ? const SizedBox() : const Icon(Icons.add, size: 20, color: Colors.blue), ), ), ), /// 滑塊 AnimatedBuilder( animation: animationController, builder: (_, child) { return Positioned( left: offsetCtr.dx - ((offsetCtr.dx - offsetCtrInit.dx) * moveAnimation.value) - radius, top: offsetCtr.dy - ((offsetCtr.dy - offsetCtrInit.dy) * moveAnimation.value) - radius, child: child!, ); }, child: GestureDetector( onPanUpdate: (DragUpdateDetails details) { /// 答案半徑 * 0.9 final rDistance = radius * 0.9; /// 答案區(qū) 內(nèi) if ((distance < rDistance) && !success) { success = true; // 震動(dòng) HapticFeedback.mediumImpact(); anwerAnimationController.stop(); anwerAnimationController.animateTo(1.0, duration: const Duration()); } /// 答案區(qū) 外 if ((distance >= rDistance) && success) { success = false; if (!anwerAnimationController.isAnimating) anwerAnimationController.repeat(reverse: true); } if (!mounted) return; setState(() { offsetCtr += Offset(details.delta.dx, details.delta.dy); }); }, onPanEnd: (DragEndDetails details) { // debugPrint('longer 結(jié)束拖動(dòng) 是否答案內(nèi) >>> $success '); // 如果沒(méi)有在答案內(nèi) 執(zhí)行返回位置的動(dòng)畫(huà) if (!success) { animationController.forward(); } widget.lister(success); }, child: Container( width: radius * 2, height: radius * 2, padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: const Color(0xff016df3), shape: BoxShape.circle, boxShadow: const <BoxShadow>[ BoxShadow( color: Color(0xFF616161), offset: Offset(4.0, 4.0), blurRadius: 8.0, ), ], ), child: Image.asset('assets/img/safe_icon.jpg'), ), ), ), ], ), ); } }
