5 分钟快速上手 scratcher创建你的第一个 Flutter 刮刮乐应用的完整教程【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher想给 App 加一点趣味互动scratcher是一款轻量级开源的Flutter 刮刮乐组件它用纯色涂层或自定义图片暂时隐藏内容用户用手指刮开涂层就能逐渐看到下方的奖品、图片或文字。本教程从零开始手把手带你完成Flutter 刮刮乐应用的搭建5 分钟内写出第一个可运行的刮刮卡页面全程只需少量代码。scratcher 是什么一个开箱即用的 Flutter 刮刮卡插件scratcher当前版本 2.5.0的核心能力很简单暂时隐藏内容等待用户刮开。它就像超市里的即开型彩票涂一层膜盖住奖励手指划过的区域会被擦除露出底下真正的内容。它的亮点在于️ 支持 Android、iOS 以及 WebCanvasKit三大平台 涂层可以用纯色也可以用任意图片本地资源、网络图、内存图皆可 实时追踪刮开进度并在达到设定阈值时触发回调⚙️ 几乎所有细节都可配置笔刷大小、精度、阈值、动画等第一步环境准备与创建 Flutter 项目开始前请确保电脑已安装 Flutter 3.16 及以上版本建议最新稳定版并配置好 Android 或 iOS 环境。然后在终端执行flutter create scratch_demo cd scratch_demo第二步快速安装 scratcher 依赖在项目根目录运行一条命令即可完成scratcher 安装flutter pub add scratcher也可以手动在pubspec.yaml的 dependencies 中加入scratcher: ^2.5.0再执行flutter pub get效果相同。第三步编写你的第一个刮刮乐页面打开lib/main.dart引入库并写一个最简单的刮刮卡。核心只需一个Scratcher组件用child放真实内容如奖品图片、文字用color或image设置覆盖层import package:flutter/material.dart; import package:scratcher/scratcher.dart; void main() runApp(MaterialApp(home: ScratchPage())); class ScratchPage extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( body: Center( child: Scratcher( brushSize: 30, // 笔刷大小越大刮得越快 threshold: 50, // 刮开 50% 即视为完成 color: Colors.blueGrey, // 覆盖层颜色 child: Container( width: 300, height: 300, color: Colors.orange, child: const Center(child: Text(恭喜你中奖啦, style: TextStyle(fontSize: 24, color: Colors.white))), ), ), ), ); } }运行flutter run你就可以用手指或鼠标刮开涂层看到下面的中奖文字了 代码逻辑主要封装在 lib/widgets.dart刮擦绘制效果则在 lib/painter.dart感兴趣可以深入阅读。定制你的刮刮卡常用参数速查表参数作用推荐值brushSize笔刷大小越大刮得越快25~50threshold刮开多少百分比视为完成30~70color纯色覆盖层任意 Colorimage图片覆盖层如Image.asset(...)本地/网络图enabled是否允许继续刮默认 trueaccuracy进度计算精度越低性能越高low / medium / highrebuildOnResize尺寸变化时是否重建默认 true想用图片当涂层把color换成image: Image.asset(assets/background.jpg)即可示例工程 example/lib/basic.dart 中有完整演示。进阶技巧进度监听、一键重置与全部揭开给Scratcher挂一个GlobalKeyScratcherState就能在任意位置程序化控制刮刮卡final key GlobalKeyScratcherState(); Scratcher( key: key, onChange: (value) print(已刮开 $value%), onThreshold: () print(达到阈值触发奖励), child: /* 你的内容 */, ) // 一键重置涂层 key.currentState?.reset(duration: Duration(milliseconds: 1500)); // 直接揭晓全部内容 key.currentState?.reveal(duration: Duration(milliseconds: 1500));配合onChange、onThreshold、onScratchStart等回调你可以实现刮开进度条提示刮完自动跳转领奖页等玩法甚至像 example/lib/advanced.dart 那样做出刮出三连图标触发动画的小游戏。常见问题与性能优化Web 端不显示scratcher 依赖 Canvas 绘图请确保以 CanvasKit 渲染模式运行。卡顿怎么办将accuracy设为low或medium进度计算精度降低但性能显著提升。涂层突然消失尺寸变化时组件会自动重建若不需要可把rebuildOnResize设为false。总结到这里你已经掌握了Flutter 刮刮乐的核心玩法引入依赖、写出第一个刮刮卡、配置参数、监听进度并程序化控制。这套交互非常适合抽奖、签到、红包开奖等场景成本低、效果好快去你的项目里试试吧【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
5 分钟快速上手 scratcher：创建你的第一个 Flutter 刮刮乐应用的完整教程
5 分钟快速上手 scratcher创建你的第一个 Flutter 刮刮乐应用的完整教程【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher想给 App 加一点趣味互动scratcher是一款轻量级开源的Flutter 刮刮乐组件它用纯色涂层或自定义图片暂时隐藏内容用户用手指刮开涂层就能逐渐看到下方的奖品、图片或文字。本教程从零开始手把手带你完成Flutter 刮刮乐应用的搭建5 分钟内写出第一个可运行的刮刮卡页面全程只需少量代码。scratcher 是什么一个开箱即用的 Flutter 刮刮卡插件scratcher当前版本 2.5.0的核心能力很简单暂时隐藏内容等待用户刮开。它就像超市里的即开型彩票涂一层膜盖住奖励手指划过的区域会被擦除露出底下真正的内容。它的亮点在于️ 支持 Android、iOS 以及 WebCanvasKit三大平台 涂层可以用纯色也可以用任意图片本地资源、网络图、内存图皆可 实时追踪刮开进度并在达到设定阈值时触发回调⚙️ 几乎所有细节都可配置笔刷大小、精度、阈值、动画等第一步环境准备与创建 Flutter 项目开始前请确保电脑已安装 Flutter 3.16 及以上版本建议最新稳定版并配置好 Android 或 iOS 环境。然后在终端执行flutter create scratch_demo cd scratch_demo第二步快速安装 scratcher 依赖在项目根目录运行一条命令即可完成scratcher 安装flutter pub add scratcher也可以手动在pubspec.yaml的 dependencies 中加入scratcher: ^2.5.0再执行flutter pub get效果相同。第三步编写你的第一个刮刮乐页面打开lib/main.dart引入库并写一个最简单的刮刮卡。核心只需一个Scratcher组件用child放真实内容如奖品图片、文字用color或image设置覆盖层import package:flutter/material.dart; import package:scratcher/scratcher.dart; void main() runApp(MaterialApp(home: ScratchPage())); class ScratchPage extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( body: Center( child: Scratcher( brushSize: 30, // 笔刷大小越大刮得越快 threshold: 50, // 刮开 50% 即视为完成 color: Colors.blueGrey, // 覆盖层颜色 child: Container( width: 300, height: 300, color: Colors.orange, child: const Center(child: Text(恭喜你中奖啦, style: TextStyle(fontSize: 24, color: Colors.white))), ), ), ), ); } }运行flutter run你就可以用手指或鼠标刮开涂层看到下面的中奖文字了 代码逻辑主要封装在 lib/widgets.dart刮擦绘制效果则在 lib/painter.dart感兴趣可以深入阅读。定制你的刮刮卡常用参数速查表参数作用推荐值brushSize笔刷大小越大刮得越快25~50threshold刮开多少百分比视为完成30~70color纯色覆盖层任意 Colorimage图片覆盖层如Image.asset(...)本地/网络图enabled是否允许继续刮默认 trueaccuracy进度计算精度越低性能越高low / medium / highrebuildOnResize尺寸变化时是否重建默认 true想用图片当涂层把color换成image: Image.asset(assets/background.jpg)即可示例工程 example/lib/basic.dart 中有完整演示。进阶技巧进度监听、一键重置与全部揭开给Scratcher挂一个GlobalKeyScratcherState就能在任意位置程序化控制刮刮卡final key GlobalKeyScratcherState(); Scratcher( key: key, onChange: (value) print(已刮开 $value%), onThreshold: () print(达到阈值触发奖励), child: /* 你的内容 */, ) // 一键重置涂层 key.currentState?.reset(duration: Duration(milliseconds: 1500)); // 直接揭晓全部内容 key.currentState?.reveal(duration: Duration(milliseconds: 1500));配合onChange、onThreshold、onScratchStart等回调你可以实现刮开进度条提示刮完自动跳转领奖页等玩法甚至像 example/lib/advanced.dart 那样做出刮出三连图标触发动画的小游戏。常见问题与性能优化Web 端不显示scratcher 依赖 Canvas 绘图请确保以 CanvasKit 渲染模式运行。卡顿怎么办将accuracy设为low或medium进度计算精度降低但性能显著提升。涂层突然消失尺寸变化时组件会自动重建若不需要可把rebuildOnResize设为false。总结到这里你已经掌握了Flutter 刮刮乐的核心玩法引入依赖、写出第一个刮刮卡、配置参数、监听进度并程序化控制。这套交互非常适合抽奖、签到、红包开奖等场景成本低、效果好快去你的项目里试试吧【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考