Home > Enterprise >  Flutter image zoomed but how to change zoom position
Flutter image zoomed but how to change zoom position

Time:05-08

Hello i have implemented double tap to zoom on flutter app but when the image is zoomed i can't navigate to other parts of image when it's in zoomed position. Pinch to zoom working fine, Double tap to zoom and reset to normal also working fine. Only issue is not be able to move in image when its in zoomed state. please help me for that here is my code :

GestureDetector(
            onDoubleTapDown: (details) {
              tapDownDetails = details;
            },
            onDoubleTap: () {
              final position = tapDownDetails?.localPosition;
              final double scale = 4;

              final x = -position!.dx * (scale - 1);
              final y = -position.dy * (scale - 1);

              final zoomed = Matrix4.identity()
                ..translate(x, y)
                ..scale(scale);

              final end = _controller!.value.isIdentity()
                  ? zoomed
                  : Matrix4.identity();

              _animation = Matrix4Tween(
                begin: _controller?.value,
                end: end,
              ).animate(
                CurveTween(curve: Curves.easeInOut)
                    .animate(_animationController!),
                // CurvedAnimation(parent: _animationController!, curve: Curves.easeInOut),
              );
              _animationController?.forward(from: 0);
            },
            child: InteractiveViewer(
              transformationController: _controller,
              clipBehavior: Clip.none,
              panEnabled: false,
              minScale: minScale,
              maxScale: maxScale,
              onInteractionStart: (details) {
                if (details.pointerCount < 2) return;
                if (entry == null) {
                  showOverlay(context);
                }
              },
              onInteractionUpdate: (details) {
                if (entry == null) return;
                this.scale = details.scale;
                entry!.markNeedsBuild();
              },
              onInteractionEnd: (details) {
                if (details.pointerCount != 1) return;
                resetAnimation();
              },
              child: Image(
                image: imageProvider,
              ),
            ),
          ),

CodePudding user response:

Remove this line or set to true, which is the default. This will enable panning.

panEnabled: true,
  • Related