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(