认识 Flutter 刮刮卡组件 scratcher一文读懂这个隐藏内容的终极神器【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher什么是 Flutter 刮刮卡组件 scratcherFlutter 刮刮卡组件 scratcher是一款专为 Flutter 开发者打造的刮刮卡Scratch Card开源组件它的核心作用只有一个用涂层临时隐藏页面内容等待用户亲手刮开。无论是抽奖转盘、优惠券解锁、盲盒开奖还是游戏彩蛋只需要这一个组件就能实现和线下刮刮乐一模一样的交互体验。scratcher 目前最新版本为 2.5.0支持 Android、iOS 以及 WebCanvasKit三大平台纯 Dart 实现、零额外依赖安装即用。它通过Scratcher组件包裹目标内容手指划过的地方涂层逐渐消失底层内容随之显现——整个过程流畅顺滑还自带进度统计与动画过渡。scratcher 刮刮卡组件凭什么值得用先看它最亮眼的五大功能纯色或自定义图片涂层默认用纯色遮盖也可以换成任意图片让卡片更精美实时刮开进度追踪随时知道用户刮了多少从 0% 到 100% 一目了然阈值触发回调刮到指定百分比如 30%自动触发“中奖”逻辑️笔刷大小可调笔刷越大刮得越快手感由你决定️完全可配置精度、回调、启停开关、尺寸自适应全部开放最快接入方法三步搞定刮刮卡第一步添加依赖在项目的pubspec.yaml中声明依赖dependencies: scratcher: ^2.5.0第二步导入并包裹内容import package:scratcher/scratcher.dart; Scratcher( brushSize: 30, threshold: 50, color: Colors.red, onChange: (value) print(已刮开: $value%), onThreshold: () print(达到阈值中奖啦), child: Container( height: 300, width: 300, color: Colors.blue, ), )第三步运行生效执行flutter pub get后即可运行一个可交互的 Flutter 刮刮卡组件就这样诞生了。完整可运行示例位于 example/lib/basic.dart另一个花式玩法九宫格刮卡抽奖见 example/lib/advanced.dart。核心参数配置指南调出理想手感想要刮得顺手、玩得尽兴这几个关键参数一定要掌握参数作用brushSize笔刷大小越大刮得越快threshold触发完成回调的刮开百分比accuracy精度档位low / medium / high低精度性能更高color涂层颜色不传图片时生效image涂层图片支持资源图、网络图、内存图enabled是否允许继续刮擦rebuildOnResize尺寸变化时是否自动重建组件还提供了onChange、onThreshold、onScratchStart、onScratchUpdate、onScratchEnd五个回调覆盖从按下手指到松开的完整生命周期方便你在刮卡过程中做埋点、音效、动效等联动。高级玩法用代码控制刮刮卡除了手动刮scratcher 还支持编程式控制。给组件挂上GlobalKeyScratcherState后即可随时调用两个方法reset()重置刮卡状态可指定动画时长让涂层重新盖回reveal()直接揭开全部涂层展示完整内容final scratchKey GlobalKeyScratcherState(); // 按钮点击2 秒动画重置涂层 scratchKey.currentState.reset(duration: Duration(milliseconds: 2000)); // 按钮点击直接全部揭开 scratchKey.currentState.reveal(duration: Duration(milliseconds: 2000));这一招非常适合“看广告直接揭晓答案”“倒计时结束自动开奖”等场景。源码结构速览理解它为什么这么好用scratcher 的核心源码非常精简全项目仅三个 Dart 文件很适合当作源码学习范本lib/widgets.dartScratcher组件与ScratcherState负责手势收集、进度计算与状态管理lib/painter.dartScratchPainter自定义绘制器用BlendMode.clear实现涂层擦除是刮卡效果的关键lib/utils.dartScratchPoint数据结构记录刮擦轨迹点刮开的原理其实很优雅组件先在画布上铺满涂层颜色或图片再通过GestureDetector捕捉手指滑动轨迹用圆头笔触实时擦除涂层同时按网格采样点计算剩余未刮面积从而得出精确的进度百分比。底层核心逻辑都集中在ScratcherState._addPoint与_calculateCheckpoints两个方法中见 lib/widgets.dart。这些场景都适合用 Flutter 刮刮卡组件电商营销刮出优惠券、折扣码刺激消费转化抽奖活动刮开即开奖配合onThreshold控制中奖概率App 彩蛋隐藏小惊喜提升用户探索乐趣游戏互动刮地图、刮拼图丰富玩法层次结语作为一款轻量、高可定制、跨平台的Flutter 刮刮卡组件scratcher 用最少的代码解决了“隐藏内容 交互揭示”这一经典需求。无论你是想做营销活动、抽奖游戏还是想给 App 加点小惊喜它都是开箱即用的终极神器。快把它加进你的依赖列表动手做一个属于自己的刮刮乐吧【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 认识 Flutter 刮刮卡组件 scratcher：一文读懂这个隐藏内容的终极神器
认识 Flutter 刮刮卡组件 scratcher一文读懂这个隐藏内容的终极神器【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher什么是 Flutter 刮刮卡组件 scratcherFlutter 刮刮卡组件 scratcher是一款专为 Flutter 开发者打造的刮刮卡Scratch Card开源组件它的核心作用只有一个用涂层临时隐藏页面内容等待用户亲手刮开。无论是抽奖转盘、优惠券解锁、盲盒开奖还是游戏彩蛋只需要这一个组件就能实现和线下刮刮乐一模一样的交互体验。scratcher 目前最新版本为 2.5.0支持 Android、iOS 以及 WebCanvasKit三大平台纯 Dart 实现、零额外依赖安装即用。它通过Scratcher组件包裹目标内容手指划过的地方涂层逐渐消失底层内容随之显现——整个过程流畅顺滑还自带进度统计与动画过渡。scratcher 刮刮卡组件凭什么值得用先看它最亮眼的五大功能纯色或自定义图片涂层默认用纯色遮盖也可以换成任意图片让卡片更精美实时刮开进度追踪随时知道用户刮了多少从 0% 到 100% 一目了然阈值触发回调刮到指定百分比如 30%自动触发“中奖”逻辑️笔刷大小可调笔刷越大刮得越快手感由你决定️完全可配置精度、回调、启停开关、尺寸自适应全部开放最快接入方法三步搞定刮刮卡第一步添加依赖在项目的pubspec.yaml中声明依赖dependencies: scratcher: ^2.5.0第二步导入并包裹内容import package:scratcher/scratcher.dart; Scratcher( brushSize: 30, threshold: 50, color: Colors.red, onChange: (value) print(已刮开: $value%), onThreshold: () print(达到阈值中奖啦), child: Container( height: 300, width: 300, color: Colors.blue, ), )第三步运行生效执行flutter pub get后即可运行一个可交互的 Flutter 刮刮卡组件就这样诞生了。完整可运行示例位于 example/lib/basic.dart另一个花式玩法九宫格刮卡抽奖见 example/lib/advanced.dart。核心参数配置指南调出理想手感想要刮得顺手、玩得尽兴这几个关键参数一定要掌握参数作用brushSize笔刷大小越大刮得越快threshold触发完成回调的刮开百分比accuracy精度档位low / medium / high低精度性能更高color涂层颜色不传图片时生效image涂层图片支持资源图、网络图、内存图enabled是否允许继续刮擦rebuildOnResize尺寸变化时是否自动重建组件还提供了onChange、onThreshold、onScratchStart、onScratchUpdate、onScratchEnd五个回调覆盖从按下手指到松开的完整生命周期方便你在刮卡过程中做埋点、音效、动效等联动。高级玩法用代码控制刮刮卡除了手动刮scratcher 还支持编程式控制。给组件挂上GlobalKeyScratcherState后即可随时调用两个方法reset()重置刮卡状态可指定动画时长让涂层重新盖回reveal()直接揭开全部涂层展示完整内容final scratchKey GlobalKeyScratcherState(); // 按钮点击2 秒动画重置涂层 scratchKey.currentState.reset(duration: Duration(milliseconds: 2000)); // 按钮点击直接全部揭开 scratchKey.currentState.reveal(duration: Duration(milliseconds: 2000));这一招非常适合“看广告直接揭晓答案”“倒计时结束自动开奖”等场景。源码结构速览理解它为什么这么好用scratcher 的核心源码非常精简全项目仅三个 Dart 文件很适合当作源码学习范本lib/widgets.dartScratcher组件与ScratcherState负责手势收集、进度计算与状态管理lib/painter.dartScratchPainter自定义绘制器用BlendMode.clear实现涂层擦除是刮卡效果的关键lib/utils.dartScratchPoint数据结构记录刮擦轨迹点刮开的原理其实很优雅组件先在画布上铺满涂层颜色或图片再通过GestureDetector捕捉手指滑动轨迹用圆头笔触实时擦除涂层同时按网格采样点计算剩余未刮面积从而得出精确的进度百分比。底层核心逻辑都集中在ScratcherState._addPoint与_calculateCheckpoints两个方法中见 lib/widgets.dart。这些场景都适合用 Flutter 刮刮卡组件电商营销刮出优惠券、折扣码刺激消费转化抽奖活动刮开即开奖配合onThreshold控制中奖概率App 彩蛋隐藏小惊喜提升用户探索乐趣游戏互动刮地图、刮拼图丰富玩法层次结语作为一款轻量、高可定制、跨平台的Flutter 刮刮卡组件scratcher 用最少的代码解决了“隐藏内容 交互揭示”这一经典需求。无论你是想做营销活动、抽奖游戏还是想给 App 加点小惊喜它都是开箱即用的终极神器。快把它加进你的依赖列表动手做一个属于自己的刮刮乐吧【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考