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…