Pakete, Repositories und App-Kategorien suchen

Paketdetailsv0.1.1

ripple_effect

Eine einfache Möglichkeit, von einem beliebigen Widget aus eine Wellenwirkung über die gesamte Bildschirmfläche in Ihrer Flutter-App zu starten.

30-Tage-Downloads
12
Likes
34
Pub-Punkte
40

Paket installieren

flutter pub add ripple_effect

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das ripple_effect-Paket bietet eine einfache Möglichkeit, eine Wellenanimation von jedem Widget über den gesamten Bildschirm in Flutter-Anwendungen auszulösen. Es verbessert die Benutzerinteraktion, indem es visuell auf Berührungen oder Gesten mit expandierenden konzentrischen Kreisen reagiert und den natürlichen Welleneffekt im Wasser nachahmt. Ideal für Schaltflächen, Symbole oder Touch-Ziele, fügt es subtile Rückmeldungen hinzu, ohne komplexe benutzerdefinierte Animationen zu erfordern. Das Paket ist leichtgewichtig und lässt sich nahtlos in bestehende Benutzeroberflächen integrieren. Es unterstützt sowohl Android als auch iOS und gewährleistet ein konsistentes Verhalten über Geräte hinweg.

Anwendungsfälle

  • Visuelle Rückmeldung zu Schaltflächen hinzufügen
  • Verbesserung von Berührungseingaben
  • Erstellen ansprechender App-Onboarding-Bildschirme
  • Verbesserung der Reaktionsfähigkeit bei Gesten
  • Entwicklung interaktiver Benutzeroberflächenelemente
  • Animierte Tipppunkte in Spielen

Hauptmerkmale

  • Einfache Integration mit jedem Widget
  • Vollbild-Ripple-Propagation
  • Anpassbare Wellenfarbe und -größe
  • Glatte Animation mit Leistungsoptimierung
  • Plattformübergreifende Kompatibilität
  • Minimale Boilerplate-Code

Geeignet für

  • Entwickler, die schnelle visuelle Rückmeldung suchen
  • UI-Designer, die Benutzererfahrung verbessern
  • Apps mit hoher Touch-Interaktion
  • Spiele oder interaktive Prototypen
  • Projekte, die reibungslose Animationen priorisieren

Hinweise

  • Kann die Leistung auf Low-End-Geräten beeinträchtigen
  • Ripple-Effekte können für auf Barrierefreiheit ausgerichtete Apps nicht geeignet sein
  • Begrenzte Anpassungsmöglichkeiten außer Farbe und Größe
  • Nicht ideal für komplexe schichtweise Animationen
  • Erfordert sorgfältige Platzierung, um visuelle Überlastung zu vermeiden
  • Am besten sparsam verwenden, um die UX-Klarheit zu gewährleisten

Original-README

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

Pub Package GitHub Actions

ripple_effect

A easy way to achieve a ripple effect on you flutter app.

Usage

First you need to wrap your page/Scaffold with the RipplePage widget, the ripple efect will growth until this widget. Then wrap with the RippleEffect where the animation should begin. When the animation should begin, call the RippleEffect.start method passing you callback method(often navigate to other page).

The RipplePage and RippleEffect widgets need their GlobalKeys respectively to work.

Example

class Stateless extends StatelessWidget {
  final pageKey = RipplePage.createGlobalKey();
  final effectKey = RippleEffect.createGlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return RipplePage(
      child: Scaffold(
        body: Center(),
        floatingActionButton: RippleEffect(
          pageKey: pageKey,
          effectKey: effectKey,
          color: Colors.blue,
          child: FloatingActionButton(
            backgroundColor: Colors.blue,
            onPressed: () =>
                 RippleEffect.start(effectKey, () => toNextPage(context)),
            child: Icon(Icons.arrow_back),
          ),
        )
      ),
    );
  }
}

Kategorien

Abhängigkeiten

Abhängigkeiten 1 Einträge

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.