flutter好用的轮子推荐二十一-flutter制做刮刮卡效果

前言

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).

结尾

• 轮子仓库地址：pub.flutter-io.cn/packages/sc…
• 系列演示demo源码：github.com/826327700/f…