Flutter Mouse Scroll Wheel Tutorial for Web and Desktop

THETA Media
1

Get values of the Flutter mouse scroll wheel from a widget using a listener. This example shows zoom in and zoom out of a 360 image using Panorama Viewer on desktop and web.

code for tutorial: GitHub - codetricity/flutter_tutorial_pano_zoom: Code for video tutorial on using panorama_viewer with 360 image desktop and web zoom
free 360 images: Free 360 Images For Development Tests

previous video: https://studio.youtube.com/video/vpdZpwJKmLo/edit

overview

To get the values of the scroll wheel, first wrap a Flutter Listener around the widget that the scroll wheel will interact with. In the example below, the scroll wheel is interacting with the PanoramaViewer widget.

The Listener has a property called onPointerSignal. When the pointer (mouse) sends an event such as scroll, move, click, the event is picked up by the Listener.

Check if the event is a PointerScrollEvent.

The PointerScrollEvent has a property for scrollDelta.dy. Use this value to take the desired action.

The example shows 360 RICOH THETA X image zooming in and out.

code snippet

Listener(
  onPointerSignal: (event) {
    if (event is PointerScrollEvent) {
      double yScroll = event.scrollDelta.dy;
      if (yScroll <= 0) {
        zoomIn();
      }
      if (yScroll > 0) {
        zoomOut();
      }
    }
  },
  child: PanoramaViewer(
1 Like