zoom_pinch_overlay

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Widget, das Instagram-artige Zoom- und Drag-Interaktionen für Bilder ermöglicht. Es erlaubt Benutzern, ein Bild frei auf dem Bildschirm zu skalieren und zu bewegen, was es ideal für Fotoanzeiger oder interaktive Bildanzeigen macht. Die Overlay-Funktion unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und sorgt für breite Kompatibilität. Dank reibungsloser Gestenerkennung bietet es eine responsive und intuitive Benutzererfahrung beim Zoomen und Panning.

Anwendungsfälle

Interaktive Bildansicht
Fotogalerie-Verbesserungen
Vergrößerbare Produktvorschauen
Geste-basierte Bildnavigation
Digitale Kunstexploration

Hauptmerkmale

Funktionalität zum Zoomen per Pinch
Globale Ziehfunktion
Plattformübergreifende Kompatibilität
Glatte Animationsübergänge
Anpassbares Overlay-Verhalten
Reaktive Touch-Gesten

Geeignet für

bildintensive Apps
Interaktive Medien-Viewer
E-Commerce-Produktanzeigen
Lerninhalts-Tools
Benutzeroberflächenprototypen

Hinweise

Kann eine Leistungsoptimierung für große Bilder erfordern
Begrenzte integrierte Gestaltungsoptionen
Nicht für komplexe Multi-Touch-Szenarien geeignet
Mögliche Verzögerung auf Geräten mit geringer Leistung
Erfordert sorgfältige Behandlung von Gestenkonflikten
Testen auf allen Zielplattformen erforderlich

Original-README

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

An instagram style pinch and zoom widget for all platform completely written in pure dart!

All other "zoom_pinch" package didn't work for me because it doesnt appear on top of all other widgets which was an issue on one of my project. This package solves that problem by introducing a OverlayEntry so that it appears on top of all other widgets.

Credit to @billylev for the contribution this package.

Getting Started

Just wrap your widget that you want to be able to zoom in a ZoomOverlay

This is the values used in the video which can be found in the example folder.

ZoomOverlay(
    modalBarrierColor: Colors.black12, // Optional
    minScale: 0.5, // Optional
    maxScale: 3.0, // Optional
    animationCurve: Curves.fastOutSlowIn, // Defaults to fastOutSlowIn which mimics IOS instagram behavior
    animationDuration: Duration(milliseconds: 300), // Defaults to 100 Milliseconds. Recommended duration is 300 milliseconds for Curves.fastOutSlowIn
    twoTouchOnly: true, // Defaults to false
    onScaleStart: () {}, // optional VoidCallback
    onScaleStop: () {}, // optional VoidCallback
    child: CachedNetworkImage(
        imageUrl: imageUrl,
    ),
),

Documentations

parameter	documentation
`minScale`	Specifies the minimum multiplier it can scale outwards.
`maxScale`	Specifies the maximum multiplier the user can zoom inwards.
`twoTouchOnly`	specifies wither the zoom is enabled only with two fingers on the screen. Defaults to `false`.
`child`	A widget to make zoomable.
`animationDuration`	Specifies the duration when the zoom has ended and is animating back to it's original place. Defaults to `Duration(milliseconds: 100)`
`animationCurve`	Specifies the curve when the zoom has ended and is animating back to it's original place. Defaults to `Curves.fastOutSlowIn`
`modalBarrierColor`	Specifies the color of the background of the modal barrier.
`onScaleStart`	Function that gets called when scaling of the widget starts.
`onScaleStop`	Function that gets called when scaling of the widget stops.
`buildContextOverlayState`	Overrides the default overlay state.

Medium blog post

Read the accompanying article here for more info about this package.

Kategorien, Pakete und Repositories suchen