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