前言
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。
本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网
正文
轮子
- 轮子名称：scratcher
- 轮子概述：flutter制作刮刮卡效果.
- 轮子作者：rykowski.dev
- 推荐指数：★★★★
- 常用指数：★★★
-
效果预览：
效果图
安装
dependencies:
scratcher: "^1.3.0"
import 'package:scratcher/scratcher.dart';
基本使用
使用 Scratcher 构建刮刮卡组件，使用示例如下：
Scratcher(
brushSize: 30, //刷子大小（手指刮动的笔刷）
threshold: 50, //完全刮开的阈值 百分比
color: Colors.grey, //覆盖层的颜色
onChange: (value) { //被刮动的回调 返回当前刮开区域百分比
print("当前刮开比例: $value%");
},
onThreshold: () { //触发完全刮开的阈值回调
print("已触发设置的全部刮开阈值");
},
child: Container( //覆盖层下的原本组件 一般是刮卡结果展示
height: 150,
width: 300,
color: Colors.blue,
),
)
进阶使用
使用图片作为刮卡结果，使用key来进行编程式控制：
final scratchKey = GlobalKey<ScratcherState>();
Scratcher(
key: scratchKey,
brushSize: 30,
threshold: 50,
color: Colors.pink,
onChange: (value) {
print("当前刮开比例: $value%");
},
onThreshold: () {
print("已触发设置的全部刮开阈值");
scratchKey.currentState.reveal(duration: Duration(milliseconds: 500));
},
child: Container(
width: 300,
height: 150,
child: Image.network('图片地址',fit: BoxFit.cover,),
),
)
编程式控制刮刮卡方法：
RaisedButton(
child: Text("重置"),
onPressed: (){
scratchKey.currentState.reset();
},
),
RaisedButton(
child: Text("刮开"),
onPressed: (){
scratchKey.currentState.reveal(duration: Duration(milliseconds: 500));
},
)
参数
| 属性 | 类型 | 说明 |
|---|---|---|
| child | Widget | 覆盖层下的真实组件. |
| threshold | double | 完全刮开的阈值，百分比制. |
| brushSize | double | 刮刮笔刷大小. |
| accuracy | ScratchAccuracy | 刮痕精度，一般默认即可. |
| color | Color | 覆盖层的颜色. |
| image | Image | 使用图片替代child组件. |
| onChange | Function | 刮动时的回调函数，返回当前已刮开的区域面积比例. |
| onThreshold | Function | 当触发刮开阈值时的回调函数. |
方法
| 方法 | 说明 |
|---|---|
| reset | 重置状态，可设置过渡时间，参数写法：duration: Duration(milliseconds: 500). |
| reveal | 直接刮开，可设置过渡时间，参数写法：duration: Duration(milliseconds: 500). |
