added swiping

lib/features/core/data/constants/const_text.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/widgets.dart';
+
+import 'const_colors.dart';
+
+abstract class ConstText {
+  static const _imageOverlayTextStyle = TextStyle(
+    color: ConstColours.white,
+    fontSize: 28,
+  );
+  static TextStyle imageOverlayTextStyle(BuildContext context) => _imageOverlayTextStyle;
+}

lib/features/core/services/overlay_service.dart

@@ -11,16 +11,13 @@ class OverlayService {
 
   final LoggingService _loggingService;
 
-  final Map<int, AnimationController> _animationControllerMap = const {};
   final Map<int, OverlayEntry> _overlayEntryMap = const {};
 
   Future<void> playOverlayEntry({
     required BuildContext context,
-    required AnimationController animationController,
     required OverlayEntry overlayEntry,
   }) async {
     try {
-      _animationControllerMap[animationController.hashCode] = animationController;
       _overlayEntryMap[overlayEntry.hashCode] = overlayEntry;
       Overlay.of(
         context,
@@ -28,12 +25,9 @@ class OverlayService {
       )!
           .insert(overlayEntry);
 
-      await animationController.forward();
       if (overlayEntry.mounted) overlayEntry.remove();
 
       _overlayEntryMap.remove(overlayEntry.hashCode);
-      animationController.dispose();
-      _animationControllerMap.remove(animationController.hashCode);
     } catch (error, stackTrace) {
       _loggingService.handle(error, stackTrace);
     }
@@ -46,12 +40,6 @@ class OverlayService {
       }
     }
     _overlayEntryMap.clear();
-    for (final animationController in _animationControllerMap.values) {
-      if (animationController.isAnimating) {
-        animationController.dispose();
-      }
-    }
-    _animationControllerMap.clear();
   }
 
   static OverlayService get locate => Locator.locate();

lib/features/home/api/unsplash_images_api.dart

@@ -1,16 +1,20 @@
 import 'dart:async';
 import 'dart:math';
 
+import 'package:mc_gallery/features/core/services/logging_service.dart';
+import 'package:mc_gallery/locator.dart';
+
 import '/features/core/data/constants/const_values.dart';
 import '/l10n/generated/l10n.dart';
 import '../abstracts/images_api.dart';
 import '../data/models/image_model.dart';
 
-class UnsplashImagesApi implements ImagesApi {
+class UnsplashImagesApi with LoggingService implements ImagesApi {
   @override
   FutureOr<Iterable<ImageModel>> fetchImageUri({required String token}) {
     final random = Random();
 
+    try {
       return Iterable<int>.generate(ConstValues.numberOfImages).map((final imageIndex) {
         // Drawing from a normal distribution
         final imageSide = ConstValues.minImageSize +
@@ -21,9 +25,13 @@ class UnsplashImagesApi implements ImagesApi {
         return ImageModel(
           imageIndex: imageIndex,
           uri: imageUri,
-        imageName: Strings.current.image,
+          imageName: '${Strings.current.image} ${imageIndex + 1}: size=$imageSide',
         );
       });
+    } on Exception catch (ex, stackTrace) {
+      handleException(ex, stackTrace);
+      return const Iterable.empty();
+    }
   }
 
   Uri _imageUrlGenerator({required int imageSide}) => Uri(
@@ -31,4 +39,6 @@ class UnsplashImagesApi implements ImagesApi {
         host: ConstValues.backendHost,
         pathSegments: [...ConstValues.backendUrlPathSegments, '${imageSide}x$imageSide'],
       );
+
+  static UnsplashImagesApi get locate => Locator.locate();
 }

lib/features/home/services/image_cache_manager_service.dart

@@ -0,0 +1,37 @@
+import 'dart:ui';
+
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:mc_gallery/features/core/services/app_lifecycle_service.dart';
+import 'package:mc_gallery/features/core/services/logging_service.dart';
+import 'package:mc_gallery/locator.dart';
+
+class ImageCacheManagerService with LoggingService {
+  ImageCacheManagerService({
+    required AppLifecycleService appLifecycleService,
+  }) : _appLifecycleService = appLifecycleService {
+    _init();
+  }
+
+  final AppLifecycleService _appLifecycleService;
+
+  Future<void> emptyCache() async => await DefaultCacheManager().emptyCache();
+
+  Future<void> _init() async {
+    _appLifecycleService.addListener(
+      tag: runtimeType.toString(),
+      listener: (final appLifecycleState) async {
+        switch (appLifecycleState) {
+          case AppLifecycleState.resumed:
+            break;
+          case AppLifecycleState.inactive:
+          case AppLifecycleState.paused:
+          case AppLifecycleState.detached:
+            info('Discarding cached images');
+            await DefaultCacheManager().emptyCache();
+        }
+      },
+    );
+  }
+
+  static ImageCacheManagerService get locate => Locator.locate();
+}

lib/features/home/services/images_service.dart

@@ -1,3 +1,4 @@
+import 'package:mc_gallery/features/core/services/logging_service.dart';
 import 'package:mc_gallery/features/home/data/models/image_model.dart';
 import 'package:mc_gallery/locator.dart';
 
@@ -8,20 +9,36 @@ import '../abstracts/images_api.dart';
 /// Since this is very simple use-case, this is the only interface. For complex (actual CRUD-based) I/O,
 /// an additional Repository layer interface can be used between [ImagesService] and [ImagesApi].
 class ImagesService {
-  ImagesService({required ImagesApi imagesApi}) : _imagesApi = imagesApi {
+  ImagesService({
+    required ImagesApi imagesApi,
+    required LoggingService loggingService,
+  })  : _imagesApi = imagesApi,
+        _loggingService = loggingService {
     _init();
   }
 
   final ImagesApi _imagesApi;
+  final LoggingService _loggingService;
 
   late final Iterable<ImageModel> _imageModels;
   Iterable<ImageModel> get imageModels => _imageModels;
 
   Future<void> _init() async {
+    _loggingService.info('Fetching and creating image models...');
     _imageModels = await _imagesApi.fetchImageUri(token: '');
 
+    _imageModels.isNotEmpty
+        ? _loggingService.good("Created ${_imageModels.length} images' models")
+        : _loggingService.warning('No images found');
+
     Locator.instance().signalReady(this);
   }
 
+  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/gallery/gallery_view_model.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:mc_gallery/features/core/services/app_lifecycle_service.dart';
 
 import '/features/core/abstracts/base_view_model.dart';
 import '/features/core/services/logging_service.dart';
 import '/features/core/services/navigation_service.dart';
 import '/features/home/data/models/image_model.dart';
+import '/features/home/services/image_cache_manager_service.dart';
 import '/features/home/services/images_service.dart';
 import '/features/home/views/image_carousel/image_carousel_view.dart';
 import '/locator.dart';
@@ -15,16 +15,16 @@ class GalleryViewModel extends BaseViewModel {
   GalleryViewModel({
     required ImagesService imagesService,
     required NavigationService navigationService,
-    required AppLifecycleService appLifecycleService,
+    required ImageCacheManagerService imageCacheManagerService,
     required LoggingService loggingService,
   })  : _imagesService = imagesService,
         _navigationService = navigationService,
-        _appLifecycleService = appLifecycleService,
+        _imageCacheManagerService = imageCacheManagerService,
         _loggingService = loggingService;
 
   final ImagesService _imagesService;
   final NavigationService _navigationService;
-  final AppLifecycleService _appLifecycleService;
+  final ImageCacheManagerService _imageCacheManagerService;
   final LoggingService _loggingService;
 
   final ValueNotifier<bool> _isDisplayingPressingPrompt = ValueNotifier(true);
@@ -32,27 +32,11 @@ class GalleryViewModel extends BaseViewModel {
 
   @override
   Future<void> initialise(bool Function() mounted, [arguments]) async {
-    _appLifecycleService.addListener(
-      tag: runtimeType.toString(),
-      listener: (final appLifecycleState) async {
-        switch (appLifecycleState) {
-          case AppLifecycleState.resumed:
-            break;
-          case AppLifecycleState.inactive:
-          case AppLifecycleState.paused:
-          case AppLifecycleState.detached:
-            await DefaultCacheManager().emptyCache();
-        }
-      },
-    );
-
     super.initialise(mounted, arguments);
   }
 
   @override
   Future<void> dispose() async {
-    await _appLifecycleService.removeListener(tag: runtimeType.toString());
-
     super.dispose();
   }
 

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

@@ -1,6 +1,13 @@
+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/home/data/models/image_model.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';
 import '/features/home/views/image_carousel/image_carousel_view_model.dart';
@@ -24,19 +31,79 @@ class ImageCarouselView extends StatelessWidget {
       viewModelBuilder: () => ImageCarouselViewModel.locate,
       argumentBuilder: () => imageCarouselViewArguments,
       builder: (context, final model) => McgScaffold(
+        bodyBuilderWaiter: model.isInitialised,
         appBar: AppBar(
           title: Text(model.strings.imageCarousel),
         ),
-        body: Hero(
+        body: Column(
-          tag: model.currentImageKey,
+          children: [
-          child: CachedNetworkImage(
+            Expanded(
+              child: Card(
+                elevation: 8,
+                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: [
+                      ValueListenableBuilder<ImageModel>(
+                        valueListenable: model.currentImageModelListenable,
+                        builder: (context, _, __) => CachedNetworkImage(
                           imageUrl: model.currentImageUrl,
                           cacheKey: model.currentImageKey,
-            progressIndicatorBuilder: (_, __, final progress) => CircularProgressIndicator(
+                          fit: BoxFit.fill,
+                          progressIndicatorBuilder: (_, __, final progress) =>
+                              CircularProgressIndicator(
                             value: model.downloadProgressValue(progress: progress),
                           ),
                         ),
                       ),
+                      Center(
+                        child: ValueListenableBuilder<ImageModel>(
+                          valueListenable: model.currentImageModelListenable,
+                          builder: (context, _, __) => Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Icon(
+                                Icons.chevron_left,
+                                color: model.hasPreviousImage
+                                    ? ConstColours.white
+                                    : ConstColours.black,
+                              ),
+                              AutoSizeText(
+                                model.currentImageName,
+                                style: ConstText.imageOverlayTextStyle(context),
+                              ),
+                              Icon(
+                                Icons.chevron_right,
+                                color: model.hasNextImage ? ConstColours.white : ConstColours.black,
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            const Gap(24),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24),
+              child: MarkdownBody(data: model.strings.imageDetails),
+            ),
+            const Gap(16),
+          ],
+        ),
       ),
     );
   }

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

@@ -1,8 +1,5 @@
-import 'dart:ui';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:mc_gallery/features/core/services/app_lifecycle_service.dart';
 
 import '/features/core/abstracts/base_view_model.dart';
 import '/features/core/services/logging_service.dart';
@@ -16,53 +13,51 @@ class ImageCarouselViewModel extends BaseViewModel {
   ImageCarouselViewModel({
     required ImagesService imagesService,
     required NavigationService navigationService,
-    required AppLifecycleService appLifecycleService,
     required LoggingService loggingService,
   })  : _imagesService = imagesService,
         _navigationService = navigationService,
-        _appLifecycleService = appLifecycleService,
         _loggingService = loggingService;
 
   final ImagesService _imagesService;
   final NavigationService _navigationService;
-  final AppLifecycleService _appLifecycleService;
   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 {
-    _appLifecycleService.addListener(
+    _currentImageModelNotifier = ValueNotifier(_imagesService.imageModels
-        tag: runtimeType.toString(),
-        listener: (final appLifecycleState) async {
-          switch (appLifecycleState) {
-            case AppLifecycleState.resumed:
-              break;
-            case AppLifecycleState.inactive:
-            case AppLifecycleState.paused:
-            case AppLifecycleState.detached:
-              await DefaultCacheManager().emptyCache();
-          }
-        });
-
-    _currentImageModel = ValueNotifier(_imagesService.imageModels
         .elementAt((arguments! as ImageCarouselViewArguments).imageIndexKey));
+    _loggingService.info('Initialized with image: ${_currentImageModelNotifier.value.imageIndex}');
 
     super.initialise(mounted, arguments);
   }
 
   @override
   Future<void> dispose() async {
-    await _appLifecycleService.removeListener(tag: runtimeType.toString());
-
     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);
+    _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 =>
+      currentImageModelListenable.value.imageIndex > _imagesService.firstAvailableImageIndex;
+  bool get hasNextImage =>
+      currentImageModelListenable.value.imageIndex < _imagesService.lastAvailableImageIndex;
+
   static ImageCarouselViewModel get locate => Locator.locate();
 }

lib/l10n/generated/intl/messages_en.dart

@@ -25,6 +25,8 @@ class MessageLookup extends MessageLookupByLibrary {
         "gallery": MessageLookupByLibrary.simpleMessage("Gallery"),
         "image": MessageLookupByLibrary.simpleMessage("Image"),
         "imageCarousel": MessageLookupByLibrary.simpleMessage("Image carousel"),
+        "imageDetails": MessageLookupByLibrary.simpleMessage(
+            "Lorem ipsum dolor sit amet. A odio aliquam est sunt explicabo cum galisum asperiores qui voluptas tempora qui aliquid similique. Ut quam laborum ex nostrum recusandae ab sunt ratione quo tempore corporis 33 voluptas nulla aut obcaecati perspiciatis.\n\nAd eveniet exercitationem ad odit quidem aut omnis corporis ea nulla illum qui quisquam temporibus? Est obcaecati similique et quisquam unde ea impedit mollitia ea accusamus natus hic doloribus quis! Et dolorem rerum id doloribus sint ea porro quia ut reprehenderit ratione?"),
         "somethingWentWrong":
             MessageLookupByLibrary.simpleMessage("Something went wrong"),
         "startLoadingPrompt":

lib/l10n/generated/l10n.dart

@@ -99,6 +99,16 @@ class Strings {
       args: [],
     );
   }
+
+  /// `Lorem ipsum dolor sit amet. A odio aliquam est sunt explicabo cum galisum asperiores qui voluptas tempora qui aliquid similique. Ut quam laborum ex nostrum recusandae ab sunt ratione quo tempore corporis 33 voluptas nulla aut obcaecati perspiciatis.\n\nAd eveniet exercitationem ad odit quidem aut omnis corporis ea nulla illum qui quisquam temporibus? Est obcaecati similique et quisquam unde ea impedit mollitia ea accusamus natus hic doloribus quis! Et dolorem rerum id doloribus sint ea porro quia ut reprehenderit ratione?`
+  String get imageDetails {
+    return Intl.message(
+      'Lorem ipsum dolor sit amet. A odio aliquam est sunt explicabo cum galisum asperiores qui voluptas tempora qui aliquid similique. Ut quam laborum ex nostrum recusandae ab sunt ratione quo tempore corporis 33 voluptas nulla aut obcaecati perspiciatis.\n\nAd eveniet exercitationem ad odit quidem aut omnis corporis ea nulla illum qui quisquam temporibus? Est obcaecati similique et quisquam unde ea impedit mollitia ea accusamus natus hic doloribus quis! Et dolorem rerum id doloribus sint ea porro quia ut reprehenderit ratione?',
+      name: 'imageDetails',
+      desc: '',
+      args: [],
+    );
+  }
 }
 
 class AppLocalizationDelegate extends LocalizationsDelegate<Strings> {

lib/l10n/intl_en.arb

@@ -7,5 +7,6 @@
   "gallery": "Gallery",
   "startLoadingPrompt": "Press me to start loading",
 
-  "imageCarousel": "Image carousel"
+  "imageCarousel": "Image carousel",
+  "imageDetails": "Lorem ipsum dolor sit amet. A odio aliquam est sunt explicabo cum galisum asperiores qui voluptas tempora qui aliquid similique. Ut quam laborum ex nostrum recusandae ab sunt ratione quo tempore corporis 33 voluptas nulla aut obcaecati perspiciatis.\n\nAd eveniet exercitationem ad odit quidem aut omnis corporis ea nulla illum qui quisquam temporibus? Est obcaecati similique et quisquam unde ea impedit mollitia ea accusamus natus hic doloribus quis! Et dolorem rerum id doloribus sint ea porro quia ut reprehenderit ratione?"
 }

lib/locator.dart

@@ -7,6 +7,7 @@ import 'package:mc_gallery/features/core/abstracts/router/app_router.dart';
 import 'package:mc_gallery/features/core/services/logging_service.dart';
 import 'package:mc_gallery/features/core/services/navigation_service.dart';
 import 'package:mc_gallery/features/home/api/unsplash_images_api.dart';
+import 'package:mc_gallery/features/home/services/image_cache_manager_service.dart';
 import 'package:mc_gallery/features/home/services/images_service.dart';
 import 'package:mc_gallery/features/home/views/gallery/gallery_view_model.dart';
 import 'package:mc_gallery/features/home/views/image_carousel/image_carousel_view_model.dart';
@@ -44,7 +45,7 @@ class Locator {
       () => GalleryViewModel(
         imagesService: ImagesService.locate,
         navigationService: NavigationService.locate,
-        appLifecycleService: AppLifecycleService.locate,
+        imageCacheManagerService: ImageCacheManagerService.locate,
         loggingService: LoggingService.locate,
       ),
     );
@@ -52,7 +53,6 @@ class Locator {
       () => ImageCarouselViewModel(
         imagesService: ImagesService.locate,
         navigationService: NavigationService.locate,
-        appLifecycleService: AppLifecycleService.locate,
         loggingService: LoggingService.locate,
       ),
     );
@@ -86,11 +86,14 @@ class Locator {
       dispose: (param) async => await param.dispose(),
     );
     it.registerSingleton(
-      ImagesService(
+      ImagesService(imagesApi: UnsplashImagesApi.locate, loggingService: LoggingService.locate),
-        imagesApi: UnsplashImagesApi(),
-      ),
       signalsReady: true,
     );
+    it.registerSingleton(
+      ImageCacheManagerService(
+        appLifecycleService: AppLifecycleService.locate,
+      ),
+    );
   }
 
   static FutureOr<void> _registerRepos(GetIt locator) {}

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:
@@ -195,6 +209,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.1"
+  flutter_markdown:
+    dependency: "direct main"
+    description:
+      name: flutter_markdown
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.13"
   flutter_svg:
     dependency: "direct main"
     description:
@@ -289,6 +310,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  markdown:
+    dependency: transitive
+    description:
+      name: markdown
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.1"
   matcher:
     dependency: transitive
     description:
@@ -531,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:
@@ -545,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

@@ -30,8 +30,13 @@ dependencies:
   connectivity_plus: ^3.0.2
   internet_connection_checker: ^1.0.0+1
 
+  # 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