import 'dart:io'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'package:panorama/panorama.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Panorama', theme: ThemeData.dark(), home: const MyHomePage(title: 'Flutter Panorama'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, this.title}); final String? title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { double _lon = 0; double _lat = 0; double _tilt = 0; int _panoId = 0; List panoImages = [ Image.asset('assets/panorama.jpg'), Image.asset('assets/panorama2.webp'), Image.asset('assets/panorama_cropped.webp'), ]; ImagePicker picker = ImagePicker(); void onViewChanged(double longitude, double latitude, double tilt) { setState(() { _lon = longitude; _lat = latitude; _tilt = tilt; }); } Widget hotspotButton({String? text, IconData? icon, VoidCallback? onPressed}) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton( style: ButtonStyle( shape: WidgetStateProperty.all(const CircleBorder()), backgroundColor: WidgetStateProperty.all(Colors.black38), foregroundColor: WidgetStateProperty.all(Colors.white), ), onPressed: onPressed, child: Icon(icon), ), text != null ? Container( padding: const EdgeInsets.all(4.0), decoration: const BoxDecoration(color: Colors.black38, borderRadius: BorderRadius.all(Radius.circular(4))), child: Center(child: Text(text)), ) : Container(), ], ); } @override Widget build(BuildContext context) { Widget panorama; switch (_panoId % panoImages.length) { case 0: panorama = Panorama( sensorControl: SensorControl.orientation, onViewChanged: onViewChanged, onTap: (longitude, latitude, tilt) => debugPrint('onTap: $longitude, $latitude, $tilt'), onLongPressStart: (longitude, latitude, tilt) => debugPrint('onLongPressStart: $longitude, $latitude, $tilt'), onLongPressMoveUpdate: (longitude, latitude, tilt) => debugPrint('onLongPressMoveUpdate: $longitude, $latitude, $tilt'), onLongPressEnd: (longitude, latitude, tilt) => debugPrint('onLongPressEnd: $longitude, $latitude, $tilt'), hotspots: [ Hotspot( latitude: -15.0, longitude: -129.0, width: 90, height: 75, widget: hotspotButton(text: 'Next scene', icon: Icons.open_in_browser, onPressed: () => setState(() => _panoId++)), ), Hotspot( latitude: -42.0, longitude: -46.0, width: 60.0, height: 60.0, widget: hotspotButton(icon: Icons.search, onPressed: () => setState(() => _panoId = 2)), ), Hotspot( latitude: -33.0, longitude: 123.0, width: 60.0, height: 60.0, widget: hotspotButton(icon: Icons.arrow_upward, onPressed: () {}), ), ], child: Image.asset('assets/panorama.jpg'), ); break; case 2: panorama = Panorama( sensorControl: SensorControl.orientation, onViewChanged: onViewChanged, croppedArea: const Rect.fromLTWH(2533.0, 1265.0, 5065.0, 2533.0), croppedFullWidth: 10132.0, croppedFullHeight: 5066.0, hotspots: [ Hotspot( latitude: 0.0, longitude: -46.0, width: 90.0, height: 75.0, widget: hotspotButton(text: 'Next scene', icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)), ), ], child: Image.asset('assets/panorama_cropped.jpg'), ); break; default: panorama = Panorama( sensorControl: SensorControl.orientation, onViewChanged: onViewChanged, hotspots: [ Hotspot( latitude: 0.0, longitude: 160.0, width: 90.0, height: 75.0, widget: hotspotButton(text: 'Next scene', icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)), ), ], child: panoImages[_panoId % panoImages.length], ); } return Scaffold( appBar: AppBar( title: Text(widget.title!), ), body: Stack( children: [ panorama, Text('${_lon.toStringAsFixed(3)}, ${_lat.toStringAsFixed(3)}, ${_tilt.toStringAsFixed(3)}'), ], ), floatingActionButton: FloatingActionButton( mini: true, onPressed: () async { final pickedFile = await picker.pickImage(source: ImageSource.gallery); setState(() { if (pickedFile != null) { panoImages.add(Image.file(File(pickedFile.path))); _panoId = panoImages.length - 1; } }); }, child: const Icon(Icons.panorama), ), ); } }