前言

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說(shuō)：輪子是IT進(jìn)步的階梯！熱門(mén)的框架千篇一律，好用輪子萬(wàn)里挑一！Flutter作為這兩年開(kāi)始崛起的跨平臺(tái)開(kāi)發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開(kāi)發(fā)常用的輪子分享出來(lái)，給大家提高搬磚效率，同時(shí)也希望flutter的生態(tài)越來(lái)越完善，輪子越來(lái)越多。

本系列文章準(zhǔn)備了超過(guò)50個(gè)輪子推薦，工作原因，盡量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎(chǔ)的開(kāi)發(fā)者，入門(mén)請(qǐng)戳：flutter官網(wǎng)

正文

輪子

• 輪子名稱(chēng)：scratcher
• 輪子概述：flutter制作刮刮卡效果.
• 輪子作者：rykowski.dev
• 推薦指數(shù)：★★★★
• 常用指數(shù)：★★★

• 效果預(yù)覽：

  
  
  效果圖

安裝

dependencies:
  scratcher: "^1.3.0"

import 'package:scratcher/scratcher.dart';

基本使用

使用 Scratcher 構(gòu)建刮刮卡組件，使用示例如下：

Scratcher(
    brushSize: 30, //刷子大小（手指刮動(dòng)的筆刷）
    threshold: 50, //完全刮開(kāi)的閾值 百分比
    color: Colors.grey, //覆蓋層的顏色
    onChange: (value) { //被刮動(dòng)的回調(diào) 返回當(dāng)前刮開(kāi)區(qū)域百分比
        print("當(dāng)前刮開(kāi)比例: $value%");
    },
    onThreshold: () { //觸發(fā)完全刮開(kāi)的閾值回調(diào)
        print("已觸發(fā)設(shè)置的全部刮開(kāi)閾值");
    },
    child: Container( //覆蓋層下的原本組件 一般是刮卡結(jié)果展示
        height: 150,
        width: 300,
        color: Colors.blue,
    ),
)

進(jìn)階使用

使用圖片作為刮卡結(jié)果，使用key來(lái)進(jìn)行編程式控制：

final scratchKey = GlobalKey<ScratcherState>();

Scratcher(
    key: scratchKey,
    brushSize: 30,
    threshold: 50,
    color: Colors.pink,
    onChange: (value) {
        print("當(dāng)前刮開(kāi)比例: $value%");
    },
    onThreshold: () {
        print("已觸發(fā)設(shè)置的全部刮開(kāi)閾值");
        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("刮開(kāi)"),
    onPressed: (){
        scratchKey.currentState.reveal(duration: Duration(milliseconds: 500));
    },
)

參數(shù)

方法

結(jié)尾

• 輪子倉(cāng)庫(kù)地址：https://pub.flutter-io.cn/packages/scratcher
• 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo