Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von scratcher
Paketdetailsv2.5.0

scratcher

Scratch-Karten-Widget, das den Inhalt vorübergehend vor dem Benutzer versteckt.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
14.900
Likes
501
Pub-Punkte
140

Paket installieren

flutter pub add scratcher

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das Scratch-Widget-Paket bietet ein Flutter-Widget, das ein Kratzer-Karten-Erlebnis simuliert und den Inhalt vorübergehend verdeckt, bis der Benutzer ihn „abkratzt“. Es ist ideal für gamifizierte Oberflächen, Belohnungssysteme oder Überraschungsaufdeckungen in Apps. Das Widget unterstützt Touch-Interaktionen auf allen wichtigen Plattformen, einschließlich Mobilgeräte, Web und Desktop. Anpassbare Kratzeffekte und visuelle Rückmeldungen erhöhen die Benutzerengagement. Auf Leistung und einfache Integration ausgelegt, ist es perfekt für Entwickler, die interaktive Elemente hinzufügen möchten, ohne komplexe Implementierung erforderlich zu haben.

Anwendungsfälle

  • Gamifizierte App-Belohnungen
  • Verborgener Inhalt wird sichtbar
  • Interaktive Aktionen
  • Digitale Scratch-Karten
  • Benutzerengagement-Funktionen

Hauptmerkmale

  • Plattformübergreifende Unterstützung
  • Anpassbarer Kratzeffekt
  • Berührungseingabe-Verarbeitung
  • Glatte Animation
  • Einfache Integration mit Flutter
  • Konfigurierbare Kratz-Transparenz

Geeignet für

  • App-Entwickler, die interaktive Benutzeroberflächen suchen
  • Gamifizierungsprojekte
  • Marketingkampagnen mit Überraschungselementen
  • Lern-Apps mit Aufdeckmechanismus
  • Einfache belohnungsorientierte Anwendungen

Hinweise

  • Kann die Leistung auf Low-End-Geräten beeinträchtigen
  • Begrenzte Anpassungsmöglichkeiten für fortgeschrittene Kratzmuster
  • Nicht geeignet für die Verdeckung von hochsicheren Inhalten
  • Erfordert sorgfältige Gestaltung für Barrierefreiheit
  • Am besten mit leichtem Inhalt verwenden

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

scratcher

Scratch card widget which temporarily hides content from the user.

Version

Demo

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:
dependencies:
 scratcher: "^2.5.0"
  1. Now you can install it by running flutter pub get or through code editor.

Setting up

  1. Import the library:
import 'package:scratcher/scratcher.dart';
  1. 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.

Resources

Kategorien

Spiele und Belohnungen

Quell-Repository

Projekte, die dieses Paket verwenden