Flutter example to compare two panorama images. sync movement and zoom

flutter_pano_compare_lock.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:panorama_viewer/panorama_viewer.dart';
import 'dart:math' as math;

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final GlobalKey<PanoramaState> _panoAKey = GlobalKey();
  final GlobalKey<PanoramaState> _panoBKey = GlobalKey();

  double _longitudeRad = 0;
  double _latitudeRad = 0;
  double _longitudeDeg = 0;
  double _latitudeDeg = 0;

  void zoomIn() {
    final currentAState = _panoAKey.currentState;
    final currentBState = _panoBKey.currentState;

    if (currentAState != null) {
      final currentZoom = currentAState.scene!.camera.zoom;
      currentAState.setZoom(currentZoom + 0.3);
    }

    if (currentBState != null) {
      final currentZoom = currentBState.scene!.camera.zoom;
      currentBState.setZoom(currentZoom + 0.3);
    }
  }

  void zoomOut() {
    final currentAState = _panoAKey.currentState;
    final currentBState = _panoBKey.currentState;

    if (currentAState != null) {
      final currentZoom = currentAState.scene!.camera.zoom;
      currentAState.setZoom(currentZoom - 0.3);
    }

    if (currentBState != null) {
      final currentZoom = currentBState.scene!.camera.zoom;
      currentBState.setZoom(currentZoom - 0.3);
    }
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Listener(
          onPointerMove: (event) {
            final panoACurrentState = _panoAKey.currentState;
            final panoBCurrentState = _panoBKey.currentState;

            if (panoACurrentState != null) {
              _latitudeRad = panoACurrentState.latitudeRad;
              _longitudeRad = panoACurrentState.longitudeRad;
              _longitudeDeg = _longitudeRad * 180 / math.pi;
              _latitudeDeg = _latitudeRad * 180 / math.pi;
              // debugPrint('latitudeRad: $_latitudeRad');
              // debugPrint('longitudeRad: $_longitudeRad');
              if (panoBCurrentState != null) {
                // debugPrint('setting PanoramaB');
                panoBCurrentState.setView(_latitudeDeg, _longitudeDeg);
              }
            }
          },
          onPointerSignal: (event) {
            if (event is PointerScrollEvent) {
              double yScroll = event.scrollDelta.dy;
              if (yScroll <= 0) {
                zoomIn();
              }
              if (yScroll > 0) {
                zoomOut();
              }
            }
          },
          child: Stack(
            children: [
              Row(
                children: [
                  SizedBox(
                    width: screenWidth / 2,
                    height: screenHeight,
                    child: PanoramaViewer(
                      key: _panoAKey,
                      child: Image.asset('assets/images/enhanced.jpg'),
                    ),
                  ),
                  SizedBox(
                    width: screenWidth / 2,
                    height: screenHeight,
                    child: PanoramaViewer(
                      key: _panoBKey,
                      child: Image.asset('assets/images/dark.jpg'),
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    color: Colors.white,
                    width: screenWidth / 7,
                    height: screenHeight,
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    height: screenHeight,
                    width: screenWidth / 14,
                    color: Colors.white,
                  ),
                  Container(
                    height: screenHeight,
                    width: screenWidth / 14,
                    color: Colors.white,
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}