刮刮乐

刮刮卡小部件，可暂时隐藏用户内容。

Demo

功能

  • Android和iOS支持
  • 用纯色或自定义图片覆盖内容
  • 跟踪刮擦进度和阈值
  • 完全可配置

入门

  1. 您需要做的第一件事是将刮刮乐添加为pubspec.yaml中的项目依赖项
dependencies:
 scratcher: "^2.1.0"
  1. 现在您可以通过运行flutter pub get或通过代码编辑器进行安装。

设置

  1. 导入库
import 'package:scratcher/scratcher.dart';
  1. 用刮刮卡覆盖所需的控件
Scratcher(
  brushSize: 30,
  threshold: 50,
  color: Colors.red,
  onChange: (value) => print("Scratch progress: $value%"),
  onThreshold: () => print("Threshold reached, you won!"),
  child: Container(
    height: 300,
    width: 300,
    color: Colors.blue,
  ),
)

属性

属性 类型 描述
child Widget 在刮擦区域下渲染的控件。
enabled 布尔值 是否可以应用新的刮擦。
threshold 双精度 要揭示以完成的刮擦区域的百分比级别。
brushSize 双精度 画笔大小。越大，用户刮擦卡的速度越快。
accuracy ScratchAccuracy 确定进度的报告准确性。较低的准确性意味着更高的性能。
color 颜色 用于覆盖子控件的颜色。
image Image 用于覆盖子控件的图片控件。
rebuildOnResize 布尔值 确定刮刮乐在空间约束发生变化（调整大小）时是否应重新构建自身。
onChange 功能 当新的区域被揭示时调用的回调（最小差异为0.1%）。
onThreshold 功能 达到阈值时调用的回调（仅在定义时）。
onScratchStart 功能 开始刮擦时调用的回调。
onScratchUpdate 功能 刮擦过程中调用的回调。
onScratchEnd 功能 刮擦结束时调用的回调。

程序化访问

您可以通过将GlobalKey分配给控件来以编程方式控制刮刮乐。

final scratchKey = GlobalKey<ScratcherState>();

Scratcher(
  key: scratchKey,
  // remaining properties
)

分配密钥后，您可以调用任何公开的方法，例如：

RaisedButton(
  child: const Text('Reset'),
  onPressed: () {
    scratchKey.currentState.reset(duration: Duration(milliseconds: 2000));
  },
);
方法 描述
reset 将刮刮乐状态重置为初始值。
reveal 揭示整个刮刮乐，因此只显示原始子控件。

示例项目

example文件夹中有一个很棒的示例项目。查看它以了解大多数可用选项。

GitHub

https://github.com/vintage/scratcher