mouse wheel scroll should not propagate to parent

[KD]

A CfCartesianChart widget is contained in a CustomScrollView widget with scrollDirection set to Axis.vertical. On the chart widget, the zoomPanBehavior is set to 

ZoomPanBehavior(
  zoomMode: ZoomMode.x,
  enableSelectionZooming: true,
  enableMouseWheelZooming: true,
  enablePanning: true,
  enablePinching: true,
)


The mouse wheel is properly changing the zoom of the x axis on the cartesian chart. But the parent CustomScrollView is also scrolling vertically with the mouse wheel as well. I want to block the parent CustomScrollView from scrolling if the mouse wheel is used to zoom in the CfCartesianChart (but to still scroll if the mouse wheel is used when not over the chart).

I tried using a GestureDetector or Listener wrapping the chart widget with the behavior set to opaque to try and block mouse wheel events from going upward, but it didn't work. Using the approach described here does work but is really awkward. The chart should really behave like other widgets that consume mouse wheel events where if it does consume it then it shouldn't allow the mouse wheel event to propate upward. This behavior has been tested on the windows desktop flutter platform.

[Yuvaraj Gajaraj]

Hi KD,

We are validating your query at our end and we will update further details in one business day on 30 Dec 2022. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi KD,

We have validated your query and ensured that it can be reproduced at our end. We have reproduced the issue in a simple sample and have already raised a query for this issue in the flutter framework. We have shared a link below for your reference.

The issue regarding the mouse wheel scroll, 

https://github.com/flutter/flutter/issues/70192

However, we can resolve this issue in the application label by using the ValueListenableBuilder and MouseRegion widgets. We have achieved the desired result by wrapping the SingleChildScrollView with a ValueListenableBuilder and then wrapped each chart inside a MouseRegion widget as its child. Changed ValueListenableBuilder's value to true when the chart is zoomed using the onZoomStart callback, and set it to false when the mouse exits the chart using the onExit event in the MouseRegion. Based on this ValueListenableBuilder value, we have handled the SingleChildScrollView's physics to enable or disable the scroll view swiping. We have shared a code snippet and sample below for your reference.

Code snippet:

ValueNotifier<bool> isZooming = ValueNotifier(false);

 

ValueListenableBuilder<bool>(

    valueListenable: isZooming,

    builder: (context, value, child) {

      return SingleChildScrollView(

        physics: value ? const NeverScrollableScrollPhysics() : null,

        scrollDirection: Axis.vertical,

        child: Column(

          children: [

            MouseRegion(

              onExit: (PointerEvent event) =>

                  disableMouseWheelZooming(),

              child: SfCartesianChart(

                onZoomStart: (ZoomPanArgs event) =>

                  enableMouseWheelZooming(),

                // Other required properties

                     ),

             ),

             MouseRegion(

                onExit: (PointerEvent event) =>

                    disableMouseWheelZooming(),

                child: SfCartesianChart(

                  onZoomStart: (ZoomPanArgs event) =>

                      enableMouseWheelZooming(),

                  // Other required properties

                 ),

             ),

             MouseRegion(

                onExit: (PointerEvent event) =>

                    disableMouseWheelZooming(),

                child: SfCartesianChart(

                  onZoomStart: (ZoomPanArgs event) =>

                      enableMouseWheelZooming(),

                  // Other required properties

                ),

             ),

          ],

        ),

      );

  })

 

void enableMouseWheelZooming() {

    isZooming.value = true;

  }

 

  void disableMouseWheelZooming() {

    isZooming.value = false;

  }

Regards,

Yuvaraj.

Attachment: f179686_f10d2e69.zip