If you want to pan and zoom an image in flutter app? Based on the code from the question and encouraged by Collin’s answer, this is what I came up with:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import 'package:flutter/material.dart'; import 'package:vector_math/vector_math_64.dart'; class InteractiveImage extends StatefulWidget { InteractiveImage(this.image, {Key key}) : super(key: key); final Image image; @override _InteractiveImageState createState() => new _InteractiveImageState(); } class _InteractiveImageState extends State<InteractiveImage> { _InteractiveImageState(); double _scale = 1.0; double _previousScale = null; @override Widget build(BuildContext context) { setState(() => print("STATE SET\n")); return new GestureDetector( onScaleStart: (ScaleStartDetails details) { print(details); // Does this need to go into setState, too? // We are only saving the scale from before the zooming started // for later - this does not affect the rendering... _previousScale = _scale; }, onScaleUpdate: (ScaleUpdateDetails details) { print(details); setState(() => _scale = _previousScale * details.scale); }, onScaleEnd: (ScaleEndDetails details) { print(details); // See comment above _previousScale = null; }, child: new Transform( transform: new Matrix4.diagonal3(new Vector3(_scale, _scale, _scale)), alignment: FractionalOffset.center, child: widget.image, ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
