scratcher
scratch card widget which temporarily hides content from user.
features
- android and ios support
- cover content with full color or custom image
- track the scratch progress and threshold
- fully configurable
getting started
- first thing you need to do is adding the scratcher as a project dependency in
pubspec.yaml:
dependencies:
scratcher: "^2.1.0"
- now you can install it by running
flutter pub getor through code editor.
setting up
- import the library:
import 'package:scratcher/scratcher.dart';
- cover desired widget with the scratch card:
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.
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. |
example project
there is a crazy example project in the example folder. check it out to see most of the available options.
Comments are closed.