From 86abf723f2cc64863051bfc4d6233021fe343004 Mon Sep 17 00:00:00 2001
From: tomasz-trela <trela.tomasz@protonmail.com>
Date: Fri, 17 Jan 2025 19:44:11 +0100
Subject: [PATCH] feat: carousel photos

---
 .../widgets/digital_guide_carousel.dart       | 77 +++++++++++++++++++
 .../widgets/digital_guide_photo_row.dart      | 14 +++-
 pubspec.yaml                                  |  1 +
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 lib/features/digital_guide_view/presentation/widgets/digital_guide_carousel.dart

diff --git a/lib/features/digital_guide_view/presentation/widgets/digital_guide_carousel.dart b/lib/features/digital_guide_view/presentation/widgets/digital_guide_carousel.dart
new file mode 100644
index 00000000..04ce2539
--- /dev/null
+++ b/lib/features/digital_guide_view/presentation/widgets/digital_guide_carousel.dart
@@ -0,0 +1,77 @@
+import "dart:async";
+
+import "package:carousel_slider_plus/carousel_slider_plus.dart";
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:flutter/material.dart";
+
+import "../../../../config/ui_config.dart";
+import "digital_guide_image.dart";
+
+class DigitalGuideCarouselWithIndicator extends StatefulWidget {
+  const DigitalGuideCarouselWithIndicator({super.key, required this.imgListId});
+
+  final IList<int> imgListId;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _CarouselWithIndicatorState();
+  }
+}
+
+class _CarouselWithIndicatorState
+    extends State<DigitalGuideCarouselWithIndicator> {
+  int _current = 0;
+  final CarouselSliderController _controller = CarouselSliderController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      insetPadding: EdgeInsets.zero,
+      backgroundColor: Colors.transparent,
+      child: Wrap(
+        children: [
+          CarouselSlider(
+            items: widget.imgListId
+                .map(
+                  (item) => ClipRRect(
+                    borderRadius: const BorderRadius.all(
+                        Radius.circular(DigitalGuideConfig.borderRadiusMedium),),
+                    child: DigitalGuideImage(id: item),
+                  ),
+                )
+                .toList(),
+            controller: _controller,
+            options: CarouselOptions(
+              autoPlay: true,
+              enlargeCenterPage: true,
+              onPageChanged: (index, reason) {
+                setState(() => _current = index);
+              },
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: widget.imgListId.asMap().entries.map((entry) {
+              return GestureDetector(
+                onTap: () => unawaited(_controller.animateToPage(entry.key)),
+                child: Container(
+                  width: 12,
+                  height: 12,
+                  margin: const EdgeInsets.symmetric(
+                    vertical: DigitalGuideConfig.heightMedium,
+                    horizontal: 4,
+                  ),
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: Colors.black
+                        .withAlpha(_current == entry.key ? 230 : 102),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/features/digital_guide_view/presentation/widgets/digital_guide_photo_row.dart b/lib/features/digital_guide_view/presentation/widgets/digital_guide_photo_row.dart
index 3d60507c..996605d1 100644
--- a/lib/features/digital_guide_view/presentation/widgets/digital_guide_photo_row.dart
+++ b/lib/features/digital_guide_view/presentation/widgets/digital_guide_photo_row.dart
@@ -1,8 +1,11 @@
+import "dart:async";
+
 import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
 
 import "../../../../config/ui_config.dart";
 import "../../../../utils/context_extensions.dart";
+import "digital_guide_carousel.dart";
 import "digital_guide_image.dart";
 import "digital_guide_nav_link.dart";
 
@@ -49,11 +52,20 @@ class DigitalGuidePhotoRow extends StatelessWidget {
               top: DigitalGuideConfig.heightSmall,
             ),
             child: DigitalGuideNavLink(
-              onTap: () => {},
+              onTap: () async => showGallery(context),
               text: context.localize.see_all_photos(imagesIDs.length),
             ),
           ),
       ],
     );
   }
+
+  Future<void> showGallery(BuildContext context) async {
+    await showDialog(
+      context: context,
+      builder: (context) => DigitalGuideCarouselWithIndicator(
+        imgListId: imagesIDs,
+      ),
+    );
+  }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
index d1cbad9e..048e54c9 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -73,6 +73,7 @@ dependencies:
   animated_list_plus: ^0.5.2
   dotted_border: ^2.1.0
   fluttertoast: ^8.2.8
+  carousel_slider_plus: ^7.1.0
 
   #Data
   freezed_annotation: ^2.4.4