Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von bubble_lens
Paketdetailsv2.0.0

bubble_lens

Anpassbare Nachbildung der Apple Watch UI-Animation mit Flutter

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
2240
Likes
101
Pub-Punkte
155

Paket installieren

flutter pub add bubble_lens

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Bubble Lens ist ein Flutter-Paket, das die ikonische UI-Animation der Apple Watch nachbildet und eine anpassbare Linsenwirkung bietet, die eine vergrößerte Blasenüberlagerung simuliert. Es ermöglicht Entwicklern, dynamische, interaktive visuelle Rückmeldungen zu Elementen hinzuzufügen, was ideal für Touch-Interaktionen oder Fokus-Highlights ist. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und sorgt für konsistentes Verhalten über Geräte hinweg. Mit flüssigen Animationen und flexiblen Konfigurationsoptionen verbessert es die Benutzererfahrung in Apps, die intuitive, taktile Rückmeldungen erfordern.

Anwendungsfälle

  • Interaktive Touch-Rückmeldung
  • Fokus-Hervorhebung in der Benutzeroberfläche
  • Apple Watch-artige Animationen
  • Verbesserte Gestenerkennung
  • Visuelle Effekte in mobilen Apps
  • plattformübergreifende animierte Überlagerungen

Hauptmerkmale

  • Anpassbare Objektivgröße und -form
  • glatter Zoom-Animation
  • Unterstützung für mehrere Plattformen
  • Konfigurierbare Deckkraft und Unschärfe
  • Geste-basierte Aktivierung
  • Integration von Responsive Design

Geeignet für

  • Entwickler, die eine Apple Watch-inspirierte Benutzererfahrung suchen
  • Apps, die subtile interaktive Rückmeldung benötigen
  • Designer, die sich auf Mikro-Interaktionen konzentrieren
  • Cross-Platform-App-Entwickler
  • UI/UX-Enthusiasten
  • Prototyping interaktiver Schnittstellen

Hinweise

  • Leistungseinfluss bei mehreren Linsen
  • Erfordert sorgfältige Abstimmung für optimale Benutzererfahrung
  • Passt möglicherweise nicht zu allen Designästhetiken
  • Beschränkte Anpassungsmöglichkeiten jenseits der Kernanimation
  • Am besten nur sparsam verwenden, um Ablenkungen zu vermeiden
  • Abhängig von plattformspezifischen Rendering-Funktionen

Original-README

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

Bubble Lens

pub package

A reproduction of the Apple Watch UI animation

Example

Usage

Import the package
import 'package:bubble_lens/bubble_lens.dart';
Use the package
BubbleLens(
    width: 250,
    height: 250,
    widgets: [
        Container(
            width: 100,
            height: 100,
            color: Colors.red
        ),
        ...
    ]
);

Required Parameters

Prop Type Default Description
width double N/A Width of the container.
height double N/A Height of the container.
widgets List N/A List of widgets to display.

Optional Parameters

Prop Type Default Description
size double 100 Maximum size of a widget.
paddingX double 10 Horizontal padding between widgets.
paddingY double 0 Vertical padding between widgets.
duration Duration Duration(milliseconds: 100) Animation's duration.
radius Radius Radius.circular(999) Widget's radius.
highRatio double 0 High ratio, should be >= 0.
lowRatio double 0 Low ratio, should be >= 0.

Example

Find the example wiring in the Bubble Lens example application.

Details

See the bubble_lens.dart for more details.

Issues and feedback

Please file issues to send feedback or report a bug. Thank you!

Kategorien

Animation und ÜbergangLayout und Überlagerung

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.