HowTo: Flutter 360 Image Desktop and Web Zoom with Panorama Viewer

zoom overview

Using the panorama_viewer package for Flutter, pinch to zoom works on mobile devices. However, there is no dynamic zoom for web and desktop.

For web and desktop, you must set the zoom with the setZoom() method from the currentState of the PanoramaState.

The video covers the steps in detail. This is a snippet of the main code that handles the zoom


// inside stateful widget that holds PanoramaViewer

  final GlobalKey<PanoramaState> _panoKey = GlobalKey();

...
...

// inside button or event trigger
  final currentState = _panoKey.currentState;
          if (currentState != null) {
            final currentZoom = currentState.scene!.camera.zoom;
            currentState.setZoom(currentZoom + 0.3);

Code for tutorial to zoom 360 image using panorama_viewer package.

Works on desktop and web.

The mobile builds have pinch-to-zoom. You don’t need this technique for mobile.

Free 360 Images for Development Testing