title: Flutter Zoomable Widget
body: <p>What I want to build is a widget that can make its child widget zoomable similar to the zoomable behavior.</p>
  
  <p>Gestures I want to cover are</p>
  
  <ol>
  <li>Pinch To Zoom</li>
  <li>Double Tap to Zoom</li>
  <li>Tap to get the local Position of the widget</li>
  </ol>
  
  <p>Here is my widget plan:</p>
  
  <pre><code>ZoomableWidget(
     child: // My custom Widget which should be zoomable.
  )
  </code></pre>
  
  <p>Here is my current progress:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter/widgets.dart';
  import 'package:vector_math/vector_math_64.dart';
  
  class ZoomableWidget extends StatefulWidget {
    final Widget child;
  
    const ZoomableWidget({Key key, this.child}) : super(key: key);
    @override
    _ZoomableWidgetState createState() =&gt; _ZoomableWidgetState();
  }
  
  class _ZoomableWidgetState extends State&lt;ZoomableWidget&gt; {
    double _scale = 1.0;
    double _previousScale;
    @override
    Widget build(BuildContext context) {
      return ClipRect(
        child: GestureDetector(
          onScaleStart: (ScaleStartDetails details) {
            _previousScale = _scale;
          },
          onScaleUpdate: (ScaleUpdateDetails details) {
            setState(() {
              _scale = _previousScale * details.scale;
            });
          },
          onScaleEnd: (ScaleEndDetails details) {
            _previousScale = null;
          },
          child: Transform(
            transform: Matrix4.diagonal3(Vector3(_scale.clamp(1.0, 5.0),
                _scale.clamp(1.0, 5.0), _scale.clamp(1.0, 5.0))),
            alignment: FractionalOffset.center,
            child: widget.child,
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>The problem I have faced is, I cannot change the center of the pinch thus the image only zooms at (0,0) even after I zoom in the corner. Also, I cannot access horizontal drag and vertical drag to scroll the widget.</p>
  
  <p>Thanks in advance.</p>