photo_view icon indicating copy to clipboard operation
photo_view copied to clipboard

[FEATURE REQUEST] Double Tap to zoom in

Open ErrorCode-404 opened this issue 3 years ago • 3 comments

Hi I really like this plugin and it works very well. I using the double tap to reset the photoview's scale state to initial which also has a smooth animation. But I couldn't find a possibility to zoom in smoothly with a double tap on the widget.

My Widget using the PhotoView Widget looks like the following:

class GameImageViewerPage extends StatelessWidget {
  final String url;
  final ValueChanged<PhotoViewScaleState>? scaleStateChangedCallback;
  final PhotoViewScaleStateController? scaleStateController;
  final PhotoViewController? controller;

  GameImageViewerPage(
      {required this.url,
      this.scaleStateChangedCallback,
      this.controller,
      this.scaleStateController});

  @override
  Widget build(BuildContext context) {
    return PhotoView.customChild(
        controller: controller,
        scaleStateChangedCallback: scaleStateChangedCallback,
        scaleStateController: scaleStateController,
        backgroundDecoration:
            BoxDecoration(color: AppColors.COMMON_TRANSPARENT),
        initialScale: PhotoViewComputedScale.contained * 1.0,
        minScale: PhotoViewComputedScale.contained * 1.0,
        maxScale: PhotoViewComputedScale.covered * 2.5,
        child: GestureDetector(
            onDoubleTap: onDoubleTap,
            child: CachedNetworkImage(
                imageUrl: link,
                cacheManager: GameImageCacheManager.getInstance())));
  }

  void onDoubleTap() {
    if (scaleStateController!.isZooming) {
      scaleStateController!.reset();
    } else {
      controller!.scale = (PhotoViewComputedScale.covered * 2.5).multiplier;
    }
  }
}

As you can see I use the PhotoViewController to set the scale value directly. With the PhotoViewScaleStateController I reset the state which also triggers an animation. So is there a possibility to have a zoom in animation when double tapping too?

ErrorCode-404 avatar May 25 '21 13:05 ErrorCode-404

Have you tried to use a custom scale state cycle?

PhotoViewScaleState myScaleStateCycle(PhotoViewScaleState actual) {
  switch (actual) {
    case PhotoViewScaleState.zoomedIn:
    case PhotoViewScaleState.zoomedOut:
    case PhotoViewScaleState.covering:
      return PhotoViewScaleState.initial
    case PhotoViewScaleState.initial:
    case PhotoViewScaleState.originalSize:
    default:
      return PhotoViewScaleState.covering;
  }
}

class GameImageViewerPage extends StatelessWidget {
  final String url;
  GameImageViewerPage(
      {required this.url,
      this.scaleStateChangedCallback,
      this.controller,
      this.scaleStateController});

  @override
  Widget build(BuildContext context) {
    return PhotoView.customChild(
        scaleStateCycle: myScaleStateCycle
        backgroundDecoration: BoxDecoration(color: AppColors.COMMON_TRANSPARENT),
        initialScale: PhotoViewComputedScale.contained * 1.0,
        minScale: PhotoViewComputedScale.contained * 1.0,
        maxScale: PhotoViewComputedScale.covered * 2.5,
        child: CachedNetworkImage(
                imageUrl: link,
                cacheManager: GameImageCacheManager.getInstance()));
  }
}

renancaraujo avatar May 26 '21 15:05 renancaraujo

Yes I did that before and I have tried your scale state cycle now. But it didn't work as wanted. To be exactly it's like the scaleStateCycle property is ignored somehow because it's always reacts to double taps which resets the scale to initial. But I want it to react also to double taps to zoom in. I have seen that in modern photo apps where a double taps causes the image to zoom in and another to reset to initial scale.

ErrorCode-404 avatar May 26 '21 16:05 ErrorCode-404

I also need to implement this feature. Is it possible to do something like this:

PhotoViewScaleState myScaleStateCycle(PhotoViewScaleState actual) {
  switch (actual) {
    case PhotoViewScaleState.initial:
      //Zoom image to maxScale
      return PhotoViewScaleState.zoomToMaxScale;
    default:
      return PhotoViewScaleState.initial;
  }
}

UlanNurmatov avatar Jul 22 '21 12:07 UlanNurmatov