Recently, I have been learning Flutter. As the saying goes, paper comes to light, so I started a gank. IO APP. If you are interested in Flutter, you can go to GitHub to see the source code.

This article will share with you the custom zoom control GestureZoomBox from your project.

function

  • Double click to zoom.
  • Double finger zoom.
  • Use the double click position/double finger position as the zoom center.
  • Limits the zoom/drag range and automatically bounces back when the range is exceeded.
  • Nested directly as a parent Widget without intrusion.

Core principles

Gesture recognition

GestureDetector

Flutter already provides GestureDetector to handle gestures (click, double click, zoom, drag). We simply make the scalable content the Child of GestureDetector and set the corresponding gesture callback.

Pan and scale callbacks cannot be used simultaneous because scale is a superset of pan. Simply use the scale callbacks instead.

This is a comment in the source code to the effect that “scaling is a superset of panning, you can’t use both at the same time, just use the scaling callback”. So we only need to use the following callback:

/// Double click event callback to handle double click scaling.
final GestureTapCallback onDoubleTap;

/// The zoom value or drag position changes. This is where scaling/dragging is done based on each change.
final GestureScaleUpdateCallback onScaleUpdate;

/// zoom/drag ends. Used to detect and handle exceedances.
final GestureScaleEndCallback onScaleEnd;
Copy the code

Zoom and shift

Scale and shift using Transform.

// Current scale value
double _scale = 1.0;

// Current offset valueOffset _offset = Offset.zero; .// Wrap the child with a Transform for panning and scalingTransform( transform: Matrix4.identity() .. translate(_offset.dx, _offset.dy) .. scale(_scale, _scale), child: widget.child, alignment: Alignment.center, )Copy the code

Method of use

Add the dependent

dependencies:
  gesture_zoom_box: ^ hundreds
Copy the code

Guide package

import 'package:gesture_zoom_box/gesture_zoom_box.dart';
Copy the code

Use a control

GestureZoomBox(
    maxScale: 5.0,
    doubleTapScale: 2.0,
    duration: Duration(milliseconds: 200),
    onPressed: () => Navigator.pop(context),
    child: Image.network(widget.imageUrl),
)
Copy the code

The project address

GitHub | Pub