[Flutter] zoom in on an image with double tap(extended_image ) : 탭하여 확대하기

Motivation

사진을 두번 눌러서 확대하는 기능을 구현하고 싶을때

아래는 extended image 라는 패키지를 사용했을때의 예시

class _DetailState extends State<Detail> with TickerProviderStateMixin{


@override
  Widget build(BuildContext context) {
  AnimationController _animationController = AnimationController(duration: Duration(milliseconds: 200),vsync: this);
  Function() animationListener = () {};
  Animation? _animation;
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: ExtendedImage.network(
            widget.wallpaper.path,
            fit: BoxFit.contain,
            mode: ExtendedImageMode.gesture,
            initGestureConfigHandler: (state) {
              return GestureConfig(
                minScale: 0.9,
                animationMinScale: 0.7,
                maxScale: 3.0,
                animationMaxScale: 3.5,
                speed: 1.0,
                inertialSpeed: 100.0,
                initialScale: 1.0,
                inPageView: false,
                initialAlignment: InitialAlignment.center,
              );
            },
            onDoubleTap:  (ExtendedImageGestureState state) {
              ///you can use define pointerDownPosition as you can,
              ///default value is double tap pointer down postion.
              var pointerDownPosition = state.pointerDownPosition;
              double begin = state.gestureDetails!.totalScale!;
              double end;

              _animation?.removeListener(animationListener);
              _animationController.stop();
              _animationController.reset();

              if (begin == 1) {
                end = 1.5;
              } else {
                end = 1;
              }
              animationListener = () {
                //print(_animation.value);
                state.handleDoubleTap(
                    scale: _animation!.value,
                    doubleTapPosition: pointerDownPosition);
              };
              _animation = _animationController
                  .drive(Tween<double>(begin: begin, end: end));

              _animation!.addListener(animationListener);

              _animationController.forward();
            },
          ),
      ),
  }
}

 

Reference

https://stackoverflow.com/questions/58285513/fluttercandies-extended-image-how-do-i-zoom-in-on-an-image-with-double-tap-of-1

fluttercandies extended_image. How do I zoom in on an image with double tap of 1 finger instead of needing 2?

 

 

 

https://pub.dev/packages/extended_image

extended_image | Flutter Package