阅读 2438

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

结尾