How to Set Up a Virtual Museum Tour in FlutterFlow

Create a `rooms` collection with fields: name (String), floorPlanImageUrl (String pointing to Firebase Storage), order (Integer for room sequence), description (String). Create an `exhibits` collection with fields: title (String), description (String), imageUrls (List of Strings for the gallery), audioGuideUrl (String pointing to an MP3 in Storage), roomId (String referencing the room), positionX (Double, percentage 0-1 of floor plan width), positionY (Double, percentage 0-1 of floor plan height), category (String: painting/sculpture/artifact/installation). Add a `favorites` subcollection under each user document with fields: exhibitId (String), savedAt (Timestamp). Register all collections in FlutterFlow's Data panel.

Create a MuseumTour page. Add a PageView widget at the top half of the screen. Bind it to a Backend Query on the rooms collection ordered by the order field. Each page represents one room. Inside each page, add a Stack widget. The first child of the Stack is an Image widget displaying the room's floorPlanImageUrl. Wrap the entire Stack in an InteractiveViewer Custom Widget to enable pinch-to-zoom so users can zoom into the floor plan on mobile devices. Below the PageView, add a Row with the room name Text and left/right arrow IconButtons for manual navigation between rooms. Add a SmoothPageIndicator (dots) to show the current room position.

For each room's Stack, query the exhibits collection filtered by roomId matching the current room. For each exhibit, add a Positioned widget inside the Stack. Set left to positionX times the Stack width and top to positionY times the Stack height. Inside each Positioned, add a GestureDetector wrapping a Container styled as a colored circle (20x20 pixels, with a pulsing animation or a small exhibit icon). On tap, navigate to the ExhibitDetail page passing the exhibitId. Since FlutterFlow's visual builder does not support dynamic Positioned widgets natively, create a Custom Widget that takes the floor plan URL and a list of exhibit hotspot data as parameters, then renders the Stack with Image and Positioned GestureDetectors programmatically.

1// Custom Widget: FloorPlanWithHotspots
2import 'package:flutter/material.dart';
3
4class FloorPlanWithHotspots extends StatelessWidget {
5  final double width;
6  final double height;
7  final String floorPlanUrl;
8  final List<Map<String, dynamic>> hotspots;
9  final Function(String exhibitId) onHotspotTap;
10
11  const FloorPlanWithHotspots({
12    Key? key,
13    required this.width,
14    required this.height,
15    required this.floorPlanUrl,
16    required this.hotspots,
17    required this.onHotspotTap,
18  }) : super(key: key);
19
20  @override
21  Widget build(BuildContext context) {
22    return InteractiveViewer(
23      minScale: 1.0,
24      maxScale: 3.0,
25      child: SizedBox(
26        width: width,
27        height: height,
28        child: Stack(
29          children: [
30            Image.network(floorPlanUrl,
31              width: width, height: height, fit: BoxFit.contain),
32            ...hotspots.map((h) => Positioned(
33              left: (h['positionX'] as double) * width,
34              top: (h['positionY'] as double) * height,
35              child: GestureDetector(
36                onTap: () => onHotspotTap(h['exhibitId']),
37                child: Container(
38                  width: 28, height: 28,
39                  decoration: BoxDecoration(
40                    color: Colors.red.withOpacity(0.8),
41                    shape: BoxShape.circle,
42                    border: Border.all(
43                      color: Colors.white, width: 2),
44                  ),
45                  child: const Icon(Icons.museum,
46                    color: Colors.white, size: 14),
47                ),
48              ),
49            )),
50          ],
51        ),
52      ),
53    );
54  }
55}

Create an ExhibitDetail page that receives an exhibitId parameter. Query the exhibits collection for this document. At the top, add a PageView bound to the exhibit's imageUrls array — each page shows a full-width Image with a SmoothPageIndicator below for gallery navigation. Below the gallery, display the exhibit title as a heading Text, category as a styled Chip, and description in a scrollable Text widget. For the audio guide, add a Custom Widget using the just_audio package. Pass the audioGuideUrl as a parameter. The widget renders play/pause IconButton, a Slider for seeking, and a duration Text. Add a heart IconButton in the AppBar for bookmarking — on tap, create or delete a document in the user's favorites subcollection.

Add a Guided Tour tab or button on the MuseumTour page. Query all exhibits ordered by roomId then by a tourOrder field (add this to the schema). Display them in a numbered ListView as a suggested walking route. Each item shows the exhibit title, room name, a thumbnail image, and a checkmark that the user taps when they have visited. Track visited exhibits in a Page State list of exhibitIds. Show a LinearPercentIndicator at the top: visitedCount / totalExhibits. For the favorites, add a Favorites page with a GridView bound to the current user's favorites subcollection. Each card shows the exhibit thumbnail and title. Tap to navigate to the exhibit detail.