#19: Implement image carousel with fullscreen photo view.

lib/components/full_screen_image.dart

@@ -0,0 +1,29 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+
+class FullScreenImage extends StatelessWidget {
+  final String imageUrl;
+
+  const FullScreenImage({
+    super.key,
+    required this.imageUrl,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Full Screen Image'),
+      ),
+      body: PhotoView.customChild(
+        child: CachedNetworkImage(
+          imageUrl: imageUrl,
+          placeholder: (context, url) => const CircularProgressIndicator(),
+          errorWidget: (context, url, error) => const Icon(Icons.error),
+          fit: BoxFit.contain,
+        ),
+      ),
+    );
+  }
+}

lib/components/image_carousel.dart

@@ -0,0 +1,91 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:dots_indicator/dots_indicator.dart';
+import 'package:flutter/material.dart';
+import 'package:iccm_eu_app/components/full_screen_image.dart';
+
+class ImageCarousel extends StatefulWidget {
+  final List<String> imageUrls;
+
+  const ImageCarousel({
+    super.key,
+    required this.imageUrls,
+  });
+
+  @override
+  ImageCarouselState createState() => ImageCarouselState();
+}
+
+class ImageCarouselState extends State<ImageCarousel> {
+  int _currentIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.imageUrls.isEmpty) {
+      return SizedBox.shrink();
+    } else {
+      return Column(
+        children: [
+          CarouselSlider(
+            options: CarouselOptions(
+              height: 200, // Adjust height as needed
+              viewportFraction: 1.0, // Display one image at a time
+              onPageChanged: (index, reason) {
+                setState(() {
+                  _currentIndex = index;
+                });
+              },
+            ),
+            items: widget.imageUrls.map((imageUrl) {
+              return Builder(
+                builder: (BuildContext context) {
+                  return GestureDetector(
+                    onTap: () {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => FullScreenImage(
+                              imageUrl: imageUrl,
+                          ),
+                        ),
+                      );
+                    },
+                    child: Container(
+                      width: MediaQuery
+                          .of(context)
+                          .size
+                          .width,
+                      margin: const EdgeInsets.symmetric(horizontal: 5.0),
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).canvasColor,
+                      ),
+                      child: CachedNetworkImage(
+                        imageUrl: imageUrl,
+                        // imageBuilder: (context, imageProvider) => CircleAvatar(
+                        //   backgroundImage: imageProvider,
+                        //   radius: 50,
+                        // ),
+                        placeholder: (context, url) => const CircularProgressIndicator(),
+                        errorWidget: (context, url, error) => const Icon(Icons.error),
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                  );
+                },
+              );
+            }).toList(),
+          ),
+          const SizedBox(height: 10), // Spacing between carousel and dots
+          DotsIndicator(
+            dotsCount: widget.imageUrls.length,
+            position: _currentIndex,
+            decorator: DotsDecorator(
+              color: Colors.grey, // Inactive dot color
+              activeColor: Colors.blue, // Active dot color
+            ),
+          ),
+        ],
+      );
+    }
+  }
+}

lib/data/model/room_data.dart

@@ -9,19 +9,22 @@ class RoomData extends ModelItem {
   final String name;
   @override
   final String details;
+  String? mapImageUrl;
   late ColorsData? colors;
 
   RoomData({
     required this.imageUrl,
     required this.name,
     required this.details,
+    this.mapImageUrl,
     this.colors,
   });
 
   RoomData._({
     required this.imageUrl,
     required this.name,
     required this.details,
+    this.mapImageUrl,
     this.colors,
   });
 
@@ -30,6 +33,7 @@ class RoomData extends ModelItem {
       imageUrl: UrlFunctions.proxy(itemData['Photo 1']),
       name: itemData['Name'] ?? '',
       details: itemData['Description'] ?? '',
+      mapImageUrl: UrlFunctions.proxy(itemData['Photo 2']),
       colors: null,
     );
   }
@@ -40,6 +44,7 @@ class RoomData extends ModelItem {
       imageUrl: json['imageUrl'],
       name: json['name'] as String? ?? '',
       details: json['details'] as String? ?? '',
+      mapImageUrl: json['details'] as String? ?? '',
     );
   }
 
@@ -48,6 +53,7 @@ class RoomData extends ModelItem {
       'imageUrl': imageUrl,
       'name': name.toString(),
       'details': details.toString(),
+      'mapImageUrl': mapImageUrl.toString()
     };
   }
 }

lib/pages/room_details_page.dart

@@ -1,6 +1,6 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:iccm_eu_app/components/event_list_tile.dart';
+import 'package:iccm_eu_app/components/image_carousel.dart';
 import 'package:iccm_eu_app/controls/nav_bar.dart';
 import 'package:iccm_eu_app/data/dataProviders/events_provider.dart';
 import 'package:iccm_eu_app/data/model/event_data.dart';
@@ -23,6 +23,14 @@ class RoomDetailsPage extends StatelessWidget {
     List<EventData> listItems = eventsProvider.eventsByRoom(
       name: item.name,
     );
+    List<String> imageUrls = [];
+    if (item.imageUrl.startsWith('https://')) {
+      imageUrls.add(item.imageUrl);
+    }
+    if (item.mapImageUrl != null &&
+        item.mapImageUrl!.startsWith('https://')) {
+      imageUrls.add(item.mapImageUrl ?? '');
+    }
     return Scaffold(
       appBar: AppBar(
         title: const Text("Room Details"),
@@ -36,18 +44,7 @@ class RoomDetailsPage extends StatelessWidget {
             Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                if (item.imageUrl.startsWith("http"))
-                  CachedNetworkImage(
-                    imageUrl: item.imageUrl,
-                    imageBuilder: (context, imageProvider) => CircleAvatar(
-                      backgroundImage: imageProvider,
-                      radius: 50,
-                    ),
-                    placeholder: (context, url) => const CircularProgressIndicator(),
-                    errorWidget: (context, url, error) => const Icon(Icons.error),
-                  )
-                else
-                  const SizedBox.shrink(),
+                ImageCarousel(imageUrls: imageUrls),
                 const SizedBox(height: 16),
                 Text(item.name,
                   style: Theme.of(context).textTheme.headlineSmall,

pubspec.lock

@@ -73,6 +73,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.1"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      sha256: "7b006ec356205054af5beaef62e2221160ea36b90fb70a35e4deacd49d0349ae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.0"
   characters:
     dependency: transitive
     description:
@@ -137,6 +145,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.10"
+  dots_indicator:
+    dependency: "direct main"
+    description:
+      name: dots_indicator
+      sha256: "58b6a365744aa62aa1b70c4ea29e5106fbe064f5edaf7e9652e9b856edbfd9bb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   fake_async:
     dependency: transitive
     description:
@@ -472,6 +488,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.2"
+  photo_view:
+    dependency: "direct main"
+    description:
+      name: photo_view
+      sha256: "1fc3d970a91295fbd1364296575f854c9863f225505c28c46e0a03e48960c75e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.0"
   platform:
     dependency: transitive
     description:

pubspec.yaml

@@ -51,6 +51,9 @@ dependencies:
   flutter_local_notifications: ^18.0.1
   firebase_core: ^3.8.0
   firebase_messaging: ^15.1.5
+  carousel_slider: ^5.0.0
+  dots_indicator: ^3.0.0
+  photo_view: ^0.15.0
 
 dev_dependencies:
   flutter_test: