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.