title: How do I pan and zoom an image?
body: <p>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.</p>
  
  <p>Is <code>GestureDetector</code> 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 <code>Image</code> widget?</p>
  
  <h2>Stateless version</h2>
  
  <pre><code>// 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) =&gt; print(details),
          onScaleUpdate: (ScaleUpdateDetails details) =&gt; print(details),
          onScaleEnd: (ScaleEndDetails details) =&gt; print(details),
          child: new Transform(
            transform: new Matrix4.rotationZ(math.PI),
            alignment: FractionalOffset.center,
            child: _image,
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <h2>Stateful version (doesn't work)</h2>
  
  <pre><code>// 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() =&gt; new _InteractiveImageState(_image);
  }
  
  class _InteractiveImageState extends State&lt;InteractiveImage&gt; {
    _InteractiveImageState(this._image);
  
    final Image _image;
  
    @override
    Widget build(BuildContext context) {
      setState(() =&gt; print("STATE SET\n"));
      return new GestureDetector(
        onScaleStart: (ScaleStartDetails details) =&gt; print(details),
        onScaleUpdate: (ScaleUpdateDetails details) =&gt; print(details),
        onScaleEnd: (ScaleEndDetails details) =&gt; print(details),
        child: new Transform(
          transform: new Matrix4.rotationZ(math.PI),
          alignment: FractionalOffset.center,
          child: _image,
        ),
      );
    }
  }
  </code></pre>
  
  <h2>Update (library solution)</h2>
  
  <p><strong>Use <a href="https://pub.dartlang.org/packages/zoomable_image" rel="noreferrer">https://pub.dartlang.org/packages/zoomable_image</a></strong></p>
  
  <p>(And maybe help me add physics and elastic edges?)</p>