flutter InteractiveViewer with CarouselSlider very difficult to pinch zoom

Question

I have a flutter app that show images with a CarouselSlider and InteractiveViewer so the user can pinch to zoom in and out. the problem is that it's very difficult to do this, normally the pinch movement make the CarouselSlider to slide between photos. One solution is to disable slide with neverscrollablescrollphysics() but I dont wanto to do that.

here is part of the code:

CarouselSlider(
          items: widget.photos.map((i) {
            return Container(
              margin: EdgeInsets.all(10),
              child: InteractiveViewer(
                scaleEnabled: true,
                minScale: 0.1,
                maxScale: 10.0,
                child: Image.network(i),
              ),
            );
          }).toList(),
          options: CarouselOptions(
            enableInfiniteScroll: false,
            height: MediaQuery.of(context).size.height,
            disableCenter: true,
            viewportFraction: 1.0,
            initialPage: widget.position,
            onPageChanged: (index, reason) {
              setState(() {
                widget.position = index;
              });
            },
          ),
        ),

Answer 1

this is a first quick fix

You can copy the CarouselSlider-Class and name it like MyCarouselSlider

Then edit the getGestrureWrapper-Method like this

  Widget getGestureWrapper(Widget child) {
    Widget wrapper;
    if (widget.options.height != null) {
      wrapper = Container(height: widget.options.height, child: child);
    } else {
      wrapper = AspectRatio(aspectRatio: widget.options.aspectRatio, child: child);
    }
    return GestureDetector(
      child: NotificationListener(
        onNotification: (dynamic notification) {
          if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) {
            widget.options.onScrolled(carouselState.pageController.page);
          }
          return false;
        },
        child: wrapper,
      ),
      behavior: HitTestBehavior.opaque,
      dragStartBehavior: DragStartBehavior.start,
    );

    // return RawGestureDetector(
    //   behavior: HitTestBehavior.translucent,
    //   gestures: {
    //     _MultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>(
    //         () => _MultipleGestureRecognizer(), (_MultipleGestureRecognizer instance) {
    //       instance.onStart = (_) {
    //         onPanDown();
    //       };
    //       instance.onDown = (_) {
    //         onPanDown();
    //       };
    //       instance.onEnd = (_) {
    //         onPanUp();
    //       };
    //       instance.onCancel = () {
    //         onPanUp();
    //       };
    //     }),
    //   },
    //   child: NotificationListener(
    //     onNotification: (dynamic notification) {
    //       if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) {
    //         widget.options.onScrolled(carouselState.pageController.page);
    //       }
    //       return false;
    //     },
    //     child: wrapper,
    //   ),
    // );
  }

And use your newly created MyCarouselSlider-Class instead. Important: this is not a final solution.

I'm unsure whats the problem with the RawGestureDetector. If I find a better solution I will update this post.