fix(mobile): use zoomedpagetransition for galleryvieweroute (#5495)

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/modules/asset_viewer/views/gallery_viewer.dart

@@ -795,6 +795,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                       tag: isFromDto
                           ? '${a.remoteId}-$heroOffset'
                           : a.id + heroOffset,
+                      transitionOnUserGestures: true,
                     ),
                     filterQuality: FilterQuality.high,
                     tightMode: true,

mobile/lib/routing/custom_transition_builders.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class CustomTransitionsBuilders {
+  const CustomTransitionsBuilders._();
+
+  static const ZoomPageTransitionsBuilder zoomPageTransitionsBuilder =
+      ZoomPageTransitionsBuilder();
+
+  static const RouteTransitionsBuilder zoomedPage = _zoomedPage;
+
+  static Widget _zoomedPage(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+    Widget child,
+  ) {
+    return zoomPageTransitionsBuilder.buildTransitions(
+      // Empty PageRoute<> object, only used to pass allowSnapshotting to ZoomPageTransitionsBuilder
+      PageRouteBuilder(
+        allowSnapshotting: true,
+        fullscreenDialog: false,
+        pageBuilder: (context, animation, secondaryAnimation) =>
+            const SizedBox.shrink(),
+      ),
+      context,
+      animation,
+      secondaryAnimation,
+      child,
+    );
+  }
+}

mobile/lib/routing/router.dart

@@ -43,6 +43,7 @@ import 'package:immich_mobile/modules/search/views/search_page.dart';
 import 'package:immich_mobile/modules/search/views/search_result_page.dart';
 import 'package:immich_mobile/modules/settings/views/settings_page.dart';
 import 'package:immich_mobile/routing/auth_guard.dart';
+import 'package:immich_mobile/routing/custom_transition_builders.dart';
 import 'package:immich_mobile/routing/duplicate_guard.dart';
 import 'package:immich_mobile/routing/backup_permission_guard.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
@@ -86,9 +87,10 @@ part 'router.gr.dart';
       ],
       transitionsBuilder: TransitionsBuilders.fadeIn,
     ),
-    AutoRoute(
+    CustomRoute(
       page: GalleryViewerPage,
       guards: [AuthGuard, DuplicateGuard],
+      transitionsBuilder: CustomTransitionsBuilders.zoomedPage,
     ),
     AutoRoute(page: VideoViewerPage, guards: [AuthGuard, DuplicateGuard]),
     AutoRoute(

mobile/lib/routing/router.gr.dart

@@ -63,7 +63,7 @@ class _$AppRouter extends RootStackRouter {
     },
     GalleryViewerRoute.name: (routeData) {
       final args = routeData.argsAs<GalleryViewerRouteArgs>();
-      return MaterialPageX<dynamic>(
+      return CustomPage<dynamic>(
         routeData: routeData,
         child: GalleryViewerPage(
           key: args.key,
@@ -75,6 +75,9 @@ class _$AppRouter extends RootStackRouter {
           isOwner: args.isOwner,
           sharedAlbumId: args.sharedAlbumId,
         ),
+        transitionsBuilder: CustomTransitionsBuilders.zoomedPage,
+        opaque: true,
+        barrierDismissible: false,
       );
     },
     VideoViewerRoute.name: (routeData) {

mobile/lib/utils/immich_app_theme.dart

@@ -20,7 +20,7 @@ final immichThemeProvider = StateProvider<ThemeMode>((ref) {
   }
 });
 
-ThemeData base = ThemeData(
+final ThemeData base = ThemeData(
   chipTheme: const ChipThemeData(
     side: BorderSide.none,
   ),
@@ -30,7 +30,7 @@ ThemeData base = ThemeData(
   ),
 );
 
-ThemeData immichLightTheme = ThemeData(
+final ThemeData immichLightTheme = ThemeData(
   useMaterial3: true,
   brightness: Brightness.light,
   primarySwatch: Colors.indigo,
@@ -153,7 +153,7 @@ ThemeData immichLightTheme = ThemeData(
   ),
 );
 
-ThemeData immichDarkTheme = ThemeData(
+final ThemeData immichDarkTheme = ThemeData(
   useMaterial3: true,
   brightness: Brightness.dark,
   primarySwatch: Colors.indigo,