How to Create a Virtual Reality VR Experience in FlutterFlow

1// FlutterFlow Custom Widget: PanoramaTour
2// A virtual tour with multiple connected panoramas and hotspot navigation
3// Package: panorama_viewer ^1.0.0
4import 'package:flutter/material.dart';
5import 'package:panorama_viewer/panorama_viewer.dart';
6
7class PanoramaTour extends StatefulWidget {
8  const PanoramaTour({
9    super.key,
10    required this.scenes,  // List of {url, label} maps
11    this.initialIndex = 0,
12    this.height = 400.0,
13  });
14
15  final List<dynamic> scenes;
16  final int initialIndex;
17  final double height;
18
19  @override
20  State<PanoramaTour> createState() => _PanoramaTourState();
21}
22
23class _PanoramaTourState extends State<PanoramaTour>
24    with SingleTickerProviderStateMixin {
25  late int _currentIndex;
26  late AnimationController _fadeController;
27  late Animation<double> _fadeAnimation;
28
29  @override
30  void initState() {
31    super.initState();
32    _currentIndex = widget.initialIndex;
33    _fadeController = AnimationController(
34      vsync: this,
35      duration: const Duration(milliseconds: 400),
36    );
37    _fadeAnimation = CurvedAnimation(
38      parent: _fadeController,
39      curve: Curves.easeInOut,
40    );
41    _fadeController.value = 1.0;
42  }
43
44  @override
45  void dispose() {
46    _fadeController.dispose();
47    super.dispose();
48  }
49
50  Future<void> _navigateTo(int index) async {
51    if (index < 0 || index >= widget.scenes.length) return;
52    await _fadeController.reverse();
53    setState(() => _currentIndex = index);
54    await _fadeController.forward();
55  }
56
57  @override
58  Widget build(BuildContext context) {
59    final scene = widget.scenes[_currentIndex];
60    final hasPrev = _currentIndex > 0;
61    final hasNext = _currentIndex < widget.scenes.length - 1;
62
63    return SizedBox(
64      height: widget.height,
65      child: Stack(
66        children: [
67          FadeTransition(
68            opacity: _fadeAnimation,
69            child: PanoramaViewer(
70              sensorControl: SensorControl.absoluteOrientation,
71              child: Image.network(
72                scene['url'] as String,
73                fit: BoxFit.cover,
74              ),
75            ),
76          ),
77          // Room label
78          Positioned(
79            top: 16, left: 16,
80            child: Container(
81              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
82              decoration: BoxDecoration(
83                color: Colors.black54,
84                borderRadius: BorderRadius.circular(20),
85              ),
86              child: Text(
87                scene['label'] as String? ?? '',
88                style: const TextStyle(color: Colors.white, fontSize: 14),
89              ),
90            ),
91          ),
92          // Navigation arrows
93          Positioned(
94            bottom: 24,
95            left: 0, right: 0,
96            child: Row(
97              mainAxisAlignment: MainAxisAlignment.center,
98              children: [
99                if (hasPrev)
100                  FloatingActionButton.small(
101                    heroTag: 'prev',
102                    onPressed: () => _navigateTo(_currentIndex - 1),
103                    backgroundColor: Colors.black54,
104                    child: const Icon(Icons.arrow_back, color: Colors.white),
105                  ),
106                const SizedBox(width: 16),
107                if (hasNext)
108                  FloatingActionButton.small(
109                    heroTag: 'next',
110                    onPressed: () => _navigateTo(_currentIndex + 1),
111                    backgroundColor: Colors.black54,
112                    child: const Icon(Icons.arrow_forward, color: Colors.white),
113                  ),
114              ],
115            ),
116          ),
117        ],
118      ),
119    );
120  }
121}