Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vintage/scratcher
Scratch card widget which temporarily hides content from user.
https://github.com/vintage/scratcher
flutter flutter-plugin flutter-widget
Last synced: 6 days ago
JSON representation
Scratch card widget which temporarily hides content from user.
- Host: GitHub
- URL: https://github.com/vintage/scratcher
- Owner: vintage
- License: mit
- Created: 2019-07-22T18:51:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-24T13:38:55.000Z (about 1 year ago)
- Last Synced: 2024-12-30T03:05:57.130Z (13 days ago)
- Topics: flutter, flutter-plugin, flutter-widget
- Language: Dart
- Homepage: https://pub.dev/packages/scratcher
- Size: 4.78 MB
- Stars: 593
- Watchers: 9
- Forks: 67
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Scratcher - 刮刮卡小部件，临时隐藏用户内容，由[Kamil Rykowski](https://github.com/vintage)创建。 (组件 / UI)
- awesome-flutter - Scratcher - Scratch card widget which temporarily hides content from user. ` 📝 a month ago ` (UI [🔝](#readme))
- awesome-flutter - Scratcher - Scratch card widget which temporarily hides content from user, by [Kamil Rykowski](https://github.com/vintage). (Components / UI)
- awesome-flutter-cn - Scratcher - 刮刮乐小工具，可暂时向用户隐藏内容，[Kamil Rykowski](https://github.com/vintage). (组件 / UI)
README
# scratcher
Scratch card widget which temporarily hides content from the user.
[](https://pub.dartlang.org/packages/scratcher)
## Features
- Supported platforms:
- Android
- iOS
- Web (CanvasKit only)
- Cover content with full color or custom image
- Track the scratch progress and threshold
- Fully configurable
## Getting started
1. First thing you need to do is adding the scratcher as a project dependency in `pubspec.yaml`:
```yaml
dependencies:
scratcher: "^2.5.0"
```
2. Now you can install it by running `flutter pub get` or through code editor.
## Setting up
1. Import the library:
```dart
import 'package:scratcher/scratcher.dart';
```
2. Cover desired widget with the scratch card:
```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,
),
)
```
## Properties
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.
## Programmatic access
You can control the Scratcher programmatically by assigning the `GlobalKey` to the widget.
```dart
final scratchKey = GlobalKey();
Scratcher(
key: scratchKey,
// remaining properties
)
```
After assigning the key, you can call any exposed methods e.g.:
```dart
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.
## Example Project
There is a crazy example project in the `example` folder. Check it out to see most of the available options.
## Resources
- [https://www.youtube.com/watch?v=EM4D1pUpadA](https://www.youtube.com/watch?v=EM4D1pUpadA) by The CS Guy