flutter pub add scratcher基于插件公开信息、社区数据与项目使用情况整理的选型参考。
Scratcher 包提供了一个 Flutter 小部件，可模拟刮奖卡体验，暂时隐藏内容，直到用户‘刮开’为止。它非常适合游戏化界面、奖励系统或应用中的惊喜揭示。该小部件支持所有主要平台（包括移动设备、网页和桌面）的触摸交互。可自定义的刮擦效果和视觉反馈可增强用户参与度。该组件注重性能和易于集成，非常适合希望添加互动元素但又无需复杂实现的开发者。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Scratch card widget which temporarily hides content from the user.
pubspec.yaml:dependencies:
scratcher: "^2.5.0"
flutter pub get or through code editor.import 'package:scratcher/scratcher.dart';
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,
),
)
| Property | Type | Description |
|---|---|---|
| child | Widget | Widget rendered under the scratch area. |
| enabled | bool | Whether new scratches can be applied. |
| threshold | double | Percentage level of scratch area which should be revealed to complete. |
| brushSize | double | Size of the brush. The bigger it is the faster user can scratch the card. |
| accuracy | ScratchAccuracy | Determines how accurate the progress should be reported. Lower accuracy means higher performance. |
| color | Color | Color used to cover the child widget. |
| image | Image | Image widget used to cover the child widget. |
| rebuildOnResize | bool | Determines if the scratcher should rebuild itself when space constraints change (resize). |
| onChange | Function | Callback called when new part of area is revealed (min 0.1% difference). |
| onThreshold | Function | Callback called when threshold is reached (only when defined). |
| onScratchStart | Function | Callback called when scratching starts. |
| onScratchUpdate | Function | Callback called during scratching. |
| onScratchEnd | Function | Callback called when scratching ends. |
You can control the Scratcher programmatically by assigning the GlobalKey to the widget.
final scratchKey = GlobalKey<ScratcherState>();
Scratcher(
key: scratchKey,
// remaining properties
)
After assigning the key, you can call any exposed methods e.g.:
RaisedButton(
child: const Text('Reset'),
onPressed: () {
scratchKey.currentState.reset(duration: Duration(milliseconds: 2000));
},
);
| Method | Description |
|---|---|
| reset | Resets the scratcher state to the initial values. |
| reveal | Reveals the whole scratcher, so than only original child is displayed. |
There is a crazy example project in the example folder. Check it out to see most of the available options.