I want to zoom an image in flutter and I am able to do it using GestureDetector
and TransForm
but I am not able to move around my image. It is just zooming. I want implement something dragging so that after zooming I can move around my image.
How can I do this?
PS I tried using onPanStart...
in GestureDetector
but I can't use both onScaleStart
and onPanStart
.
Here is my code:
class _ImageViewState extends State<ImageView> {
File img;
double _scale = 1.0;
double _prev = 1.0;
_ImageViewState(this.img);
@override
Widget build(BuildContext context) {
return SafeArea(
child: GestureDetector(
onScaleStart: (ScaleStartDetails details){
setState(() {
_scale = _prev;
});
},
onScaleUpdate: (ScaleUpdateDetails details){
setState(() {
_scale = _prev * details.scale;
});
print(_scale);
},
onScaleEnd: (ScaleEndDetails details){
setState(() {
_prev = _scale;
});
},
child : Transform(
alignment : FractionalOffset.center,
transform: Matrix4.diagonal3(Vector3(_scale , _scale , _scale)),
child: Image.file(img),
)
),
);
}
}
I have tried to implement something similar in my project. I'm using the matrix_gesture_detector package and created the following custom widget:
import 'package:flutter/material.dart';
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';
class ZoomableWidget extends StatefulWidget {
final Widget child;
const ZoomableWidget({Key key, this.child}) : super(key: key);
@override
_ZoomableWidgetState createState() => _ZoomableWidgetState();
}
class _ZoomableWidgetState extends State<ZoomableWidget> {
Matrix4 matrix = Matrix4.identity();
Matrix4 zerada = Matrix4.identity();
@override
Widget build(BuildContext context) {
return GestureDetector(
onDoubleTap: (){
setState(() {
matrix = zerada;
});
},
child: MatrixGestureDetector(
shouldRotate: false,
onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
setState(() {
matrix = m;
});
},
child: Transform(
transform: matrix,
child: widget.child,
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.