序言
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!
热门的框架千篇一律,好用轮子万里挑一!
Flutter作为这两年开始崛起的跨平台开拓框架,其第三方生态比较其他成熟框架还略有不敷,但轮子的数量也已经很多了。本系列文章挑选日常app开拓常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。
本系列文章准备了超过50个轮子推举,事情缘故原由,只管即便每1-2天出一篇文章。
tip:本系列文章得当已有部分flutter根本的开拓者,入门请戳:flutter官网
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)); },)