Adds ticks to the progress indicator

mobile/lib/modules/memories/ui/memory_epilogue.dart

@@ -16,7 +16,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
   late final _animationController = AnimationController(
     vsync: this,
     duration: const Duration(
-      seconds: 3,
+      seconds: 2,
     ),
   )..repeat(
       reverse: true,
@@ -29,7 +29,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
     super.initState();
     _animation = CurvedAnimation(
       parent: _animationController,
-      curve: Curves.easeInOut,
+      curve: Curves.easeIn,
     );
   }
 
@@ -41,11 +41,10 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return SafeArea(
-      crossAxisAlignment: CrossAxisAlignment.center,
+      child: Stack(
-      mainAxisAlignment: MainAxisAlignment.center,
         children: [
-        Expanded(
+          Positioned.fill(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
@@ -81,7 +80,13 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
               ],
             ),
           ),
-        Column(
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 16.0),
+              child: Column(
                 children: [
                   SizedBox(
                     height: 48,
@@ -89,7 +94,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
                       animation: _animation,
                       builder: (context, child) {
                         return Transform.translate(
-                    offset: Offset(0, 5 * _animationController.value),
+                          offset: Offset(0, 8 * _animationController.value),
                           child: child,
                         );
                       },
@@ -108,7 +113,10 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
                   ),
                 ],
               ),
+            ),
+          ),
         ],
+      ),
     );
   }
 }

mobile/lib/modules/memories/ui/memory_progress_indicator.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class MemoryProgressIndicator extends StatelessWidget {
+  /// The number of ticks in the progress indicator
+  final int ticks;
+
+  /// The current value of the indicator
+  final double value;
+
+  const MemoryProgressIndicator(
+      {super.key, required this.ticks, required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final tickWidth = constraints.maxWidth / ticks;
+        return Stack(
+          children: [
+            LinearProgressIndicator(
+              value: value,
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: List.generate(
+                ticks,
+                (i) => Container(
+                  width: tickWidth,
+                  height: 4,
+                  decoration: BoxDecoration(
+                    border: i == 0
+                        ? null
+                        : Border(
+                            left: BorderSide(
+                              color: Theme.of(context).scaffoldBackgroundColor,
+                              width: 1,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

mobile/lib/modules/memories/views/memory_page.dart

@@ -7,6 +7,7 @@ import 'package:immich_mobile/modules/memories/models/memory.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_bottom_info.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_card.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_epilogue.dart';
+import 'package:immich_mobile/modules/memories/ui/memory_progress_indicator.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:openapi/api.dart' as api;
@@ -208,7 +209,14 @@ class MemoryPage extends HookConsumerWidget {
                 // Build horizontal page
                 return Column(
                   children: [
-                    AnimatedBuilder(
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        left: 24.0,
+                        right: 24.0,
+                        top: 8.0,
+                        bottom: 2.0,
+                      ),
+                      child: AnimatedBuilder(
                         animation: currentMemoryAssetPageController,
                         builder: (context, child) {
                           double value = 0.0;
@@ -216,11 +224,13 @@ class MemoryPage extends HookConsumerWidget {
                             // We can only access [page] if this has clients
                             value = currentMemoryAssetPageController.page ?? 0;
                           }
-                        return LinearProgressIndicator(
+                          return MemoryProgressIndicator(
+                            ticks: memories[mIndex].assets.length,
                             value: (value + 1) / memories[mIndex].assets.length,
                           );
                         },
                       ),
+                    ),
                     Expanded(
                       child: Stack(
                         children: [