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…