Skip to content

Latest commit

 

History

History
55 lines (42 loc) · 4.07 KB

README.md

File metadata and controls

55 lines (42 loc) · 4.07 KB
Raw

zoom_pinch_overlay

     Buy Me A Coffee

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.