Package detailsv1.4.3

zoom_pinch_overlay

An instagram style pinch and zoom widget that can be moved globally.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 3.9K
Likes: 229
Pub points: 160

Install package

flutter pub add zoom_pinch_overlay

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter widget that enables Instagram-style pinch-to-zoom and global drag interactions for images. It allows users to scale and move an image freely across the screen, making it ideal for photo viewers or interactive image displays. The overlay supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring broad compatibility. Built with smooth gesture handling, it provides a responsive and intuitive user experience for zooming and panning.

Use cases

Interactive image viewing
Photo gallery enhancements
Zoomable product previews
Gesture-based image navigation
Digital art exploration

Key features

Pinch-to-zoom functionality
Global drag support
Cross-platform compatibility
Smooth animation transitions
Customizable overlay behavior
Responsive touch gestures

Suitable for

Image-heavy apps
Interactive media viewers
E-commerce product displays
Educational content tools
User interface prototyping

Considerations

May require performance optimization for large images
Limited built-in styling options
Not designed for complex multi-touch scenarios
Potential lag on low-end devices
Requires careful handling of gesture conflicts
Needs testing across all target platforms

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

zoom_pinch_overlay

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.

Categories

Dependencies

Dependency list 1 items

vector_math^2.1.0

Source repository

zoom_pinch_overlay project cover

Mayb3Nots/zoom_pinch_overlay

zoom_pinch_overlay

☆ 28 Stars⑂ 13 Forks

Projects using this package

No data available yet.