序言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！
热门的框架千篇一律，好用轮子万里挑一！
Flutter作为这两年开始崛起的跨平台开拓框架，其第三方生态比较其他成熟框架还略有不敷，但轮子的数量也已经很多了。
本系列文章挑选日常app开拓常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推举，事情缘故原由，只管即便每1-2天出一篇文章。

tip:本系列文章得当已有部分flutter根本的开拓者，入门请戳：flutter官网

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)); },)