How do I pan and zoom an image?

Question

I'm trying to get some basic pan and zoom functionality for images. The stateless version can display images (rotated 180 degrees by Transform) and the Scale events show up in the logs, but that's it.

Is GestureDetector the correct widget for getting the pan/pinch/spread events? Should I be looking at Transform, Animation, or should I just be modifying the fields inside the Image widget?

Stateless version

// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatelessWidget {
  InteractiveImage(this._image, {Key key}) : super(key: key);

  final Image _image;

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new GestureDetector(
        onScaleStart: (ScaleStartDetails details) => print(details),
        onScaleUpdate: (ScaleUpdateDetails details) => print(details),
        onScaleEnd: (ScaleEndDetails details) => print(details),
        child: new Transform(
          transform: new Matrix4.rotationZ(math.PI),
          alignment: FractionalOffset.center,
          child: _image,
        ),
      ),
    );
  }
}

Stateful version (doesn't work)

// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatefulWidget {
  InteractiveImage(this._image, {Key key}) : super(key: key);

  final Image _image;

  @override
  _InteractiveImageState createState() => new _InteractiveImageState(_image);
}

class _InteractiveImageState extends State<InteractiveImage> {
  _InteractiveImageState(this._image);

  final Image _image;

  @override
  Widget build(BuildContext context) {
    setState(() => print("STATE SET\n"));
    return new GestureDetector(
      onScaleStart: (ScaleStartDetails details) => print(details),
      onScaleUpdate: (ScaleUpdateDetails details) => print(details),
      onScaleEnd: (ScaleEndDetails details) => print(details),
      child: new Transform(
        transform: new Matrix4.rotationZ(math.PI),
        alignment: FractionalOffset.center,
        child: _image,
      ),
    );
  }
}

Update (library solution)

Use https://pub.dartlang.org/packages/zoomable_image

(And maybe help me add physics and elastic edges?)

Answer 1

You can use InteractiveViewer which comes out of the box with Flutter.

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      panEnabled: false, // Set it to false
      boundaryMargin: EdgeInsets.all(100),
      minScale: 0.5,
      maxScale: 2,
      child: Image.asset(
        'your_image_asset',
        width: 200,
        height: 200,
        fit: BoxFit.cover,
      ),
    ),
  );
}