縮放和捏合覆蓋

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.