fix(mobile): appBar on album viewer screen animates out and doesnt alter asset grid position (#9741)

* Animated out top bar added, currenlty need to move up current app bar as it is too far down

* album viewer appBar animates out and does not cause screen shift

* Formatting

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/pages/common/album_viewer.page.dart

@@ -133,7 +133,7 @@ class AlbumViewerPage extends HookConsumerWidget {
 
     Widget buildTitle(Album album) {
       return Padding(
-        padding: const EdgeInsets.only(left: 8, right: 8, top: 24),
+        padding: const EdgeInsets.only(left: 8, right: 8),
         child: userId == album.ownerId && album.isRemote
             ? AlbumViewerEditableTitle(
                 album: album,
@@ -228,21 +228,9 @@ class AlbumViewerPage extends HookConsumerWidget {
     }
 
     return Scaffold(
-      appBar: ref.watch(multiselectProvider)
+      body: Stack(
-          ? null
+        children: [
-          : album.when(
+          album.widgetWhen(
-              data: (data) => AlbumViewerAppbar(
-                titleFocusNode: titleFocusNode,
-                album: data,
-                userId: userId,
-                onAddPhotos: onAddPhotosPressed,
-                onAddUsers: onAddUsersPressed,
-                onActivities: onActivitiesPressed,
-              ),
-              error: (error, stackTrace) => AppBar(title: const Text("Error")),
-              loading: () => AppBar(),
-            ),
-      body: album.widgetWhen(
             onData: (data) => MultiselectGrid(
               renderListProvider: albumRenderlistProvider(albumId),
               topWidget: Column(
@@ -256,6 +244,28 @@ class AlbumViewerPage extends HookConsumerWidget {
               editEnabled: data.ownerId == userId,
             ),
           ),
+          AnimatedPositioned(
+            duration: const Duration(milliseconds: 300),
+            top: ref.watch(multiselectProvider)
+                ? -(kToolbarHeight + MediaQuery.of(context).padding.top)
+                : 0,
+            left: 0,
+            right: 0,
+            child: album.when(
+              data: (data) => AlbumViewerAppbar(
+                titleFocusNode: titleFocusNode,
+                album: data,
+                userId: userId,
+                onAddPhotos: onAddPhotosPressed,
+                onAddUsers: onAddUsersPressed,
+                onActivities: onActivitiesPressed,
+              ),
+              error: (error, stackTrace) => AppBar(title: const Text("Error")),
+              loading: () => AppBar(),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

mobile/lib/widgets/album/album_viewer_editable_title.dart

@@ -36,7 +36,9 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
       [],
     );
 
-    return TextField(
+    return Material(
+      color: Colors.transparent,
+      child: TextField(
         onChanged: (value) {
           if (value.isEmpty) {
           } else {
@@ -57,7 +59,8 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
           }
         },
         decoration: InputDecoration(
-        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+          contentPadding:
+              const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
           suffixIcon: titleFocusNode.hasFocus
               ? IconButton(
                   onPressed: () {
@@ -90,6 +93,7 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
             fontWeight: FontWeight.bold,
           ),
         ),
+      ),
     );
   }
 }

mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart

@@ -238,8 +238,10 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
     }
 
     bool appBarOffset() {
-      return ref.watch(tabProvider).index == 0 &&
+      return (ref.watch(tabProvider).index == 0 &&
-          ModalRoute.of(context)?.settings.name == TabControllerRoute.name;
+              ModalRoute.of(context)?.settings.name ==
+                  TabControllerRoute.name) ||
+          (ModalRoute.of(context)?.settings.name == AlbumViewerRoute.name);
     }
 
     final listWidget = ScrollablePositionedList.builder(