如何用 scratcher 实现纯色与图片双重封面Flutter 刮刮卡封面设计的 5 种玩法【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcherscratcher 是一款开箱即用的 Flutter 刮刮卡组件Scratch card widget核心能力是用一层可刮开的覆盖层临时隐藏内容用户手指刮开即可露出底下的图片、文字或奖品。它同时支持纯色封面与图片封面两种刮刮卡封面设计并内置刮开进度追踪、阈值回调等完整能力。本文用 5 种玩法带你把 scratcher 的封面设计一次玩明白。快速开始3 步安装 Flutter 刮刮卡组件先解决怎么用的问题。scratcher 已发布到 pub.dev安装非常简单。第 1 步在pubspec.yaml的 dependencies 中加入dependencies: scratcher: ^2.5.0第 2 步运行flutter pub get完成依赖拉取。第 3 步在代码中导入组件即可开始使用import package:scratcher/scratcher.dart;该组件支持 Android、iOS 以及 WebCanvasKit平台核心实现位于 lib/widgets.dart 与 lib/painter.dart感兴趣的读者可以直接阅读源码学习刮涂层绘制原理。第 1 种玩法纯色封面最简洁的刮开效果如果只想快速实现刮开显内容纯色封面是最省事的方案。通过color参数指定覆盖层颜色组件会自动用该颜色遮住 child 内容。Scratcher( brushSize: 30, threshold: 50, color: Colors.red, onChange: (value) print(刮开进度: $value%), onThreshold: () print(达到阈值你赢了), child: Container( height: 300, width: 300, color: Colors.blue, ), )纯色封面适合签到打卡、盲盒开奖、积分兑换等场景——覆盖层颜色可与页面主题色保持一致视觉上干净利落用户刮开后获得明确反馈。第 2 种玩法图片封面让刮刮卡更有质感如果你觉得纯色太单调可以改用image参数用任意图片作为刮刮卡封面。比如在封面印上品牌 Logo、活动海报或宣传语刮开才露出真实奖励营销氛围直接拉满。图片封面支持 asset、网络与内存图片只需传入一个Image组件即可Scratcher( image: Image.asset(assets/background.jpg), brushSize: 25, threshold: 30, child: Container(color: Colors.black), )上面的示例取自官方示例项目 example/lib/basic.dart——封面使用一张海滩风景图刮开后露出黑色背景上的中奖文案图文反差强烈交互提示非常直观。第 3 种玩法刮开进度追踪与中奖阈值想让刮刮卡活起来就要用到进度回调。scratcher 内置了一套完整的进度体系onChange实时回调当前刮开百分比适合驱动进度条 UIthresholdonThreshold设定阈值如 50刮开比例达到后触发回调常用于中奖判定onScratchStart/onScratchUpdate/onScratchEnd追踪一次刮擦的完整生命周期。例如在抽奖活动中只有刮开超过 50% 才判定中奖Scratcher( threshold: 50, onChange: (value) setState(() progress value), onThreshold: () showDialog(context: context, builder: ...), child: prizeContent, )进度计算的核心逻辑位于 lib/widgets.dart 的ScratchState中采用检查点 笔刷半径的算法精度可通过accuracy参数low / medium / high在流畅度与准确性之间权衡。第 4 种玩法reset 与 reveal程序化控制刮刮卡有些场景下用户不该自己刮——比如一键揭晓按钮、倒计时结束自动开奖。scratcher 提供了程序化控制能力给组件绑定GlobalKeyScratcherState即可随时调用两个方法reset()重置刮开状态可传入 duration 让涂层以动画方式恢复reveal()直接揭晓全部内容同样支持过渡动画。final scratchKey GlobalKeyScratcherState(); Scratcher(key: scratchKey, child: content); // 一键揭晓 scratchKey.currentState.reveal(duration: Duration(milliseconds: 800)); // 重置再来一次 scratchKey.currentState.reset(duration: Duration(milliseconds: 2000));这个能力在每日签到中非常实用用户每天刮一次中奖后reset涂层恢复第二天可以继续玩。第 5 种玩法多卡片刮刮乐组合出高级交互把多个 Scratcher 组合起来就能做出更复杂的游戏化交互。官方示例项目 example/lib/advanced.dart 就是一个三张卡片刮刮乐三张卡片分别以 Google、Flutter、Dart 图标作为底层内容刮开卡片后图标渐显全部刮开后触发弹性缩放动画仪式感十足。其中每张卡片被封装成独立的 example/lib/scratch_box.dart 组件内部使用ScratchAccuracy.low提高性能、threshold: 60控制揭晓时机。这种小卡片 组合动画的封装思路非常适合做福袋、盲盒、集卡类玩法。如果你想把封面换成品牌图标官方还准备了 example/assets/google.png 等素材可以参考——图片封面的选择非常自由。小结按场景挑选你的封面方案玩法核心参数推荐场景纯色封面color签到、开奖、快速原型图片封面image品牌营销、活动海报进度追踪onChange/threshold抽奖判定、进度展示程序化控制reset()/reveal()一键揭晓、每日重置多卡片组合多个 Scratcher集卡、盲盒、刮刮乐scratcher 组件虽小但纯色 图片双封面、进度追踪、程序化控制等能力一应俱全足以覆盖绝大多数刮刮卡交互需求。如果你正在做 Flutter 互动营销类功能不妨直接上手5 分钟就能集成出第一个可玩的刮刮卡。【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考