feat(digital-guide): add photos gallery (#535)

* feat: carousel photos

* chore: format code

* refactor: replace statefull widget with flutter hooks and ui adjustments

lib/features/digital_guide_view/presentation/widgets/digital_guide_carousel.dart

@@ -0,0 +1,82 @@
+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 "package:flutter_hooks/flutter_hooks.dart";
+
+import "../../../../config/ui_config.dart";
+import "digital_guide_image.dart";
+
+class DigitalGuideCarouselWithIndicator extends HookWidget {
+  const DigitalGuideCarouselWithIndicator({
+    super.key,
+    required this.imgListId,
+    this.initId,
+  });
+
+  final IList<int> imgListId;
+  final int? initId;
+
+  @override
+  Widget build(BuildContext context) {
+    final current = useState(
+      initId != null ? imgListId.indexOf(initId!) : 0,
+    );
+    final controller = useMemoized(CarouselSliderController.new);
+
+    return Dialog(
+      insetPadding: EdgeInsets.zero,
+      backgroundColor: Colors.transparent,
+      child: Wrap(
+        children: [
+          CarouselSlider(
+            items: imgListId
+                .map(
+                  (item) => ClipRRect(
+                    borderRadius: const BorderRadius.all(
+                      Radius.circular(DigitalGuideConfig.borderRadiusMedium),
+                    ),
+                    child: DigitalGuideImage(
+                      id: item,
+                      zoomable: false,
+                    ),
+                  ),
+                )
+                .toList(),
+            controller: controller,
+            options: CarouselOptions(
+              initialPage: current.value,
+              autoPlay: true,
+              enlargeCenterPage: true,
+              onPageChanged: (index, reason) {
+                current.value = index;
+              },
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: 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.value == entry.key ? 230 : 102),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ],
+      ),
+    );
+  }
+}

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";
 
@@ -35,7 +38,13 @@ class DigitalGuidePhotoRow extends StatelessWidget {
                         borderRadius: BorderRadius.circular(
                           DigitalGuideConfig.borderRadiusMedium,
                         ),
-                        child: DigitalGuideImage(id: id),
+                        child: GestureDetector(
+                          onTap: () async => showGallery(context, initId: id),
+                          child: DigitalGuideImage(
+                            id: id,
+                            zoomable: false,
+                          ),
+                        ),
                       ),
                     ),
                   ),
@@ -49,11 +58,21 @@ 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, {int? initId}) async {
+    await showDialog(
+      context: context,
+      builder: (context) => DigitalGuideCarouselWithIndicator(
+        imgListId: imagesIDs,
+        initId: initId,
+      ),
+    );
+  }
 }

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