Flutter InteractiveViewer class 如何在加载新图像时进行缩放

Question

I love the InteractiveViewer class , it allows me the user to pinch out to zoom in on Image Widgets.

However, it's given me a bug. If the user remains zoomed in on an image, then exits my DetailsScreen containing that image, then activates DetailScreen again with new details and image, then the new image is zoomed in by the same amount as the old one. The InteractiveViewer's scale is not being reset.

I've tried to reset it by giving the InteractiveViewer a transformationController: imageZoomController, parameter in its constructor. Then when I exit the DetailScreen I tried imageZoomController.dispose() , however this causes lots of crashes... hmmmph.

It just needs to reset to being fully zoomed out, I need to retrigger InteractiveViewer's initial minScale: 1, parameter.

I don't favour using InteractiveViewer's onInteractionEnd parameter, because I find it annoying when I've intentionally zoomed in on an image and it jumps away from it.

Help appreciated.

Answer 1

You can try this package: https://pub.dev/packages/photo_view

It also allows us to double click to animate to init scale without even touch the controller.

Usage:

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

Answer 2

Found a solution through experimentation, it appears to work in the emulator, not quite sure why, but problem solved I hope.

imageZoomController.value = Matrix4.identity();
Navigator.of(context).pop();

When I exit the DetailsScreen twiddling the imageZoomController.value seems to reset the InteractiveViewer to a zoom of 1.

Thanks for the suggestion Thea, if others have my problem & my solution doesn't work, then try Thea's plugin.

I'll provide more context, Widgets etc. in future, my bad. Apologies @Nisanth

Answer 3

viewController.value = Matrix4.identity();

GET YOU TO THE INITIAL ZOOM OF THE PHOTO

TransformationController viewController = TransformationController();

    var initialControllerValue;
    
    InteractiveViewer(
     
        transformationController: viewController,
        onInteractionStart: (details){

            initialControllerValue = viewController.value;
        },
    
        onInteractionEnd: (details){
   
            viewController.value = initialControllerValue;
        },
           

Answer 4

First, check if the image or widget is already zoomed in then take it to default zoom.

            final _transformationController = TransformationController();
            if (_transformationController.value != Matrix4.identity()) {
                  _transformationController.value = Matrix4.identity();
                }

Widget:
        InteractiveViewer(
              transformationController: _transformationController,
              child:Container(),
             ),