added swiping

lib/features/home/api/unsplash_images_api.dart

@@ -25,7 +25,7 @@ class UnsplashImagesApi with LoggingService implements ImagesApi {
         return ImageModel(
           imageIndex: imageIndex,
           uri: imageUri,
-          imageName: '${Strings.current.image} $imageIndex: size=$imageSide',
+          imageName: '${Strings.current.image} ${imageIndex + 1}: size=$imageSide',
         );
       });
     } on Exception catch (ex, stackTrace) {

lib/features/home/services/images_service.dart

@@ -36,6 +36,9 @@ class ImagesService {
 
   int get firstAvailableImageIndex => 0;
   int get lastAvailableImageIndex => _imageModels.length - 1;
+  int get numberOfImages => _imageModels.length;
+
+  ImageModel imageModelAt({required int index}) => _imageModels.elementAt(index);
 
   static ImagesService get locate => Locator.locate();
 }

lib/features/home/views/gallery/gallery_view.dart

@@ -46,8 +46,6 @@ class GalleryView extends StatelessWidget {
                                   context,
                                   imageModel: imageModel,
                                 ),
-                                child: Hero(
-                                  tag: imageModel.imageIndex.toString(),
                                 child: CachedNetworkImage(
                                   imageUrl: imageModel.uri.toString(),
                                   cacheKey: imageModel.imageIndex.toString(),
@@ -57,7 +55,6 @@ class GalleryView extends StatelessWidget {
                                   ),
                                 ),
                               ),
-                              ),
                           ],
                         ),
                       ),

lib/features/home/views/image_carousel/image_carousel_view.dart

@@ -1,9 +1,12 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
-import 'package:mc_gallery/features/core/data/constants/const_colors.dart';
+import 'package:mc_gallery/features/home/data/models/image_model.dart';
-import 'package:mc_gallery/features/core/data/constants/const_text.dart';
 
+import '/features/core/data/constants/const_colors.dart';
+import '/features/core/data/constants/const_text.dart';
 import '/features/core/widgets/gap.dart';
 import '/features/core/widgets/mcg_scaffold.dart';
 import '/features/core/widgets/view_model_builder.dart';
@@ -28,6 +31,7 @@ class ImageCarouselView extends StatelessWidget {
       viewModelBuilder: () => ImageCarouselViewModel.locate,
       argumentBuilder: () => imageCarouselViewArguments,
       builder: (context, final model) => McgScaffold(
+        bodyBuilderWaiter: model.isInitialised,
         appBar: AppBar(
           title: Text(model.strings.imageCarousel),
         ),
@@ -36,12 +40,24 @@ class ImageCarouselView extends StatelessWidget {
             Expanded(
               child: Card(
                 elevation: 8,
-                child: Stack(
+                child: CarouselSlider.builder(
+                  itemCount: model.numberOfImages,
+                  options: CarouselOptions(
+                    enlargeFactor: 1,
+                    enlargeCenterPage: true,
+                    enlargeStrategy: CenterPageEnlargeStrategy.scale,
+                    disableCenter: true,
+                    aspectRatio: 1,
+                    initialPage: model.currentImageIndex,
+                    enableInfiniteScroll: false,
+                    onPageChanged: (final index, _) => model.swipedTo(newIndex: index),
+                  ),
+                  itemBuilder: (context, _, __) => Stack(
                     fit: StackFit.expand,
                     children: [
-                    Hero(
+                      ValueListenableBuilder<ImageModel>(
-                      tag: model.currentImageKey,
+                        valueListenable: model.currentImageModelListenable,
-                      child: CachedNetworkImage(
+                        builder: (context, _, __) => CachedNetworkImage(
                           imageUrl: model.currentImageUrl,
                           cacheKey: model.currentImageKey,
                           fit: BoxFit.fill,
@@ -52,14 +68,18 @@ class ImageCarouselView extends StatelessWidget {
                         ),
                       ),
                       Center(
-                      child: Row(
+                        child: ValueListenableBuilder<ImageModel>(
+                          valueListenable: model.currentImageModelListenable,
+                          builder: (context, _, __) => Row(
                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
                               Icon(
                                 Icons.chevron_left,
-                            color: model.hasPreviousImage ? ConstColours.white : ConstColours.black,
+                                color: model.hasPreviousImage
+                                    ? ConstColours.white
+                                    : ConstColours.black,
                               ),
-                          Text(
+                              AutoSizeText(
                                 model.currentImageName,
                                 style: ConstText.imageOverlayTextStyle(context),
                               ),
@@ -70,10 +90,12 @@ class ImageCarouselView extends StatelessWidget {
                             ],
                           ),
                         ),
+                      ),
                     ],
                   ),
                 ),
               ),
+            ),
             const Gap(24),
             Padding(
               padding: const EdgeInsets.symmetric(horizontal: 24),

lib/features/home/views/image_carousel/image_carousel_view_model.dart

@@ -22,13 +22,14 @@ class ImageCarouselViewModel extends BaseViewModel {
   final NavigationService _navigationService;
   final LoggingService _loggingService;
 
-  late final ValueNotifier<ImageModel> _currentImageModel;
+  late final ValueNotifier<ImageModel> _currentImageModelNotifier;
-  ValueListenable<ImageModel> get currentImageModel => _currentImageModel;
+  ValueListenable<ImageModel> get currentImageModelListenable => _currentImageModelNotifier;
 
   @override
   Future<void> initialise(bool Function() mounted, [arguments]) async {
-    _currentImageModel = ValueNotifier(_imagesService.imageModels
+    _currentImageModelNotifier = ValueNotifier(_imagesService.imageModels
         .elementAt((arguments! as ImageCarouselViewArguments).imageIndexKey));
+    _loggingService.info('Initialized with image: ${_currentImageModelNotifier.value.imageIndex}');
 
     super.initialise(mounted, arguments);
   }
@@ -38,17 +39,25 @@ class ImageCarouselViewModel extends BaseViewModel {
     super.dispose();
   }
 
-  String get currentImageUrl => currentImageModel.value.uri.toString();
+  void swipedTo({required int newIndex}) {
-  String get currentImageKey => currentImageModel.value.imageIndex.toString();
+    _currentImageModelNotifier.value = _imagesService.imageModelAt(index: newIndex);
-  String get currentImageName => currentImageModel.value.imageName;
+    _loggingService.info('Swiped to image: ${_currentImageModelNotifier.value.imageIndex}');
+  }
+
+  String get currentImageUrl => currentImageModelListenable.value.uri.toString();
+  String get currentImageKey => currentImageModelListenable.value.imageIndex.toString();
+  String get currentImageName => currentImageModelListenable.value.imageName;
+  int get currentImageIndex => currentImageModelListenable.value.imageIndex;
+
+  int get numberOfImages => _imagesService.numberOfImages;
 
   double? downloadProgressValue({required DownloadProgress progress}) =>
       progress.totalSize != null ? progress.downloaded / progress.totalSize! : null;
 
   bool get hasPreviousImage =>
-      currentImageModel.value.imageIndex > _imagesService.firstAvailableImageIndex;
+      currentImageModelListenable.value.imageIndex > _imagesService.firstAvailableImageIndex;
   bool get hasNextImage =>
-      currentImageModel.value.imageIndex < _imagesService.lastAvailableImageIndex;
+      currentImageModelListenable.value.imageIndex < _imagesService.lastAvailableImageIndex;
 
   static ImageCarouselViewModel get locate => Locator.locate();
 }

pubspec.lock

@@ -43,6 +43,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.9.0"
+  auto_size_text:
+    dependency: "direct main"
+    description:
+      name: auto_size_text
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -71,6 +78,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.1"
   characters:
     dependency: transitive
     description:
@@ -545,7 +559,7 @@ packages:
       name: talker
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0+1"
+    version: "2.2.0"
   talker_dio_logger:
     dependency: "direct main"
     description:
@@ -559,7 +573,7 @@ packages:
       name: talker_logger
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.2.0"
   term_glyph:
     dependency: transitive
     description:

pubspec.yaml

@@ -32,9 +32,11 @@ dependencies:
 
   # Util frontend
   flutter_markdown: ^0.6.13
+  auto_size_text: ^3.0.0
+  carousel_slider: ^4.2.1
 
   # Logging
-  talker: ^2.1.0+1
+  talker: ^2.2.0
   talker_dio_logger: ^1.0.0
 
   # Assets