refactor(mobile): build context extensions (#4923)

* refactor: move all extensions to separate package

* refactor(mobile): add BuildContext extension

* refactor(mobile): use theme getters from context

* refactor(mobile): use media query size from context

* refactor(mobile): use auto router methods from context

* refactor(mobile): use navigator methods from context

---------

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

mobile/lib/shared/ui/app_bar_dialog/app_bar_dialog.dart

@@ -1,8 +1,8 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/backup/providers/manual_upload.provider.dart';
@@ -22,9 +22,8 @@ class ImmichAppBarDialog extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     BackUpState backupState = ref.watch(backupProvider);
-    final theme = Theme.of(context);
-    bool isDarkTheme = theme.brightness == Brightness.dark;
-    bool isHorizontal = MediaQuery.of(context).size.width > 600;
+    final theme = context.themeData;
+    bool isHorizontal = !context.isMobile;
     final horizontalPadding = isHorizontal ? 100.0 : 20.0;
     final user = ref.watch(currentUserProvider);
 
@@ -40,7 +39,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
       return Row(
         children: [
           InkWell(
-            onTap: () => Navigator.of(context).pop(),
+            onTap: () => context.pop(),
             child: const Icon(
               Icons.close,
               size: 20,
@@ -54,7 +53,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                 style: TextStyle(
                   fontFamily: 'SnowburstOne',
                   fontWeight: FontWeight.bold,
-                  color: Theme.of(context).primaryColor,
+                  color: context.primaryColor,
                   fontSize: 15,
                 ),
               ),
@@ -90,7 +89,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
       return buildActionButton(
         Icons.settings_rounded,
         "profile_drawer_settings",
-        () => AutoRouter.of(context).push(const SettingsRoute()),
+        () => context.autoPush(const SettingsRoute()),
       );
     }
 
@@ -98,7 +97,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
       return buildActionButton(
         Icons.assignment_outlined,
         "profile_drawer_app_logs",
-        () => AutoRouter.of(context).push(const AppLogRoute()),
+        () => context.autoPush(const AppLogRoute()),
       );
     }
 
@@ -121,7 +120,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                   ref.watch(backupProvider.notifier).cancelBackup();
                   ref.watch(assetProvider.notifier).clearAllAsset();
                   ref.watch(websocketProvider.notifier).disconnect();
-                  AutoRouter.of(context).replace(const LoginRoute());
+                  context.autoReplace(const LoginRoute());
                 },
               );
             },
@@ -136,8 +135,8 @@ class ImmichAppBarDialog extends HookConsumerWidget {
         child: Container(
           padding: const EdgeInsets.symmetric(vertical: 4),
           decoration: BoxDecoration(
-            color: isDarkTheme
-                ? Theme.of(context).scaffoldBackgroundColor
+            color: context.isDarkTheme
+                ? context.scaffoldBackgroundColor
                 : const Color.fromARGB(255, 225, 229, 240),
           ),
           child: ListTile(
@@ -191,7 +190,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
           children: [
             InkWell(
               onTap: () {
-                Navigator.of(context).pop();
+                context.pop();
                 launchUrl(
                   Uri.parse('https://immich.app'),
                   mode: LaunchMode.externalApplication,
@@ -199,7 +198,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
               },
               child: Text(
                 "profile_drawer_documentation",
-                style: Theme.of(context).textTheme.bodySmall,
+                style: context.textTheme.bodySmall,
               ).tr(),
             ),
             const SizedBox(
@@ -211,7 +210,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
             ),
             InkWell(
               onTap: () {
-                Navigator.of(context).pop();
+                context.pop();
                 launchUrl(
                   Uri.parse('https://github.com/immich-app/immich'),
                   mode: LaunchMode.externalApplication,
@@ -219,7 +218,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
               },
               child: Text(
                 "profile_drawer_github",
-                style: Theme.of(context).textTheme.bodySmall,
+                style: context.textTheme.bodySmall,
               ).tr(),
             ),
           ],

mobile/lib/shared/ui/app_bar_dialog/app_bar_profile_info.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/providers/upload_profile_image.provider.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';
@@ -18,7 +19,6 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
     AuthenticationState authState = ref.watch(authenticationProvider);
     final uploadProfileImageStatus =
         ref.watch(uploadProfileImageProvider).status;
-    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
     final user = Store.tryGet(StoreKey.currentUser);
 
     buildUserProfileImage() {
@@ -91,8 +91,8 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
       child: Container(
         width: double.infinity,
         decoration: BoxDecoration(
-          color: Theme.of(context).brightness == Brightness.dark
-              ? Theme.of(context).scaffoldBackgroundColor
+          color: context.isDarkTheme
+              ? context.scaffoldBackgroundColor
               : const Color.fromARGB(255, 225, 229, 240),
           borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(10),
@@ -111,7 +111,9 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
                   bottom: -5,
                   right: -8,
                   child: Material(
-                    color: isDarkMode ? Colors.blueGrey[800] : Colors.white,
+                    color: context.isDarkTheme
+                        ? Colors.blueGrey[800]
+                        : Colors.white,
                     elevation: 3,
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(50.0),
@@ -120,7 +122,7 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
                       padding: const EdgeInsets.all(5.0),
                       child: Icon(
                         Icons.camera_alt_outlined,
-                        color: Theme.of(context).primaryColor,
+                        color: context.primaryColor,
                         size: 14,
                       ),
                     ),
@@ -132,16 +134,16 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
           title: Text(
             "${authState.firstName} ${authState.lastName}",
             style: TextStyle(
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
               fontWeight: FontWeight.bold,
               fontSize: 16,
             ),
           ),
           subtitle: Text(
             authState.userEmail,
-            style: Theme.of(context).textTheme.labelMedium?.copyWith(
-                  fontSize: 12,
-                ),
+            style: context.textTheme.labelMedium?.copyWith(
+              fontSize: 12,
+            ),
           ),
         ),
       ),

mobile/lib/shared/ui/app_bar_dialog/app_bar_server_info.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/server_info/server_info.model.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
@@ -39,8 +40,8 @@ class AppBarServerInfo extends HookConsumerWidget {
       padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
       child: Container(
         decoration: BoxDecoration(
-          color: Theme.of(context).brightness == Brightness.dark
-              ? Theme.of(context).scaffoldBackgroundColor
+          color: context.isDarkTheme
+              ? context.scaffoldBackgroundColor
               : const Color.fromARGB(255, 225, 229, 240),
           borderRadius: const BorderRadius.only(
             bottomLeft: Radius.circular(10),
@@ -61,7 +62,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                   textAlign: TextAlign.center,
                   style: TextStyle(
                     fontSize: 11,
-                    color: Theme.of(context).primaryColor,
+                    color: context.primaryColor,
                     fontWeight: FontWeight.w600,
                   ),
                 ),
@@ -83,7 +84,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                         "server_info_box_app_version".tr(),
                         style: TextStyle(
                           fontSize: 11,
-                          color: Theme.of(context).textTheme.labelSmall?.color,
+                          color: context.textTheme.labelSmall?.color,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -97,10 +98,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                         "${appInfo.value["version"]} build.${appInfo.value["buildNumber"]}",
                         style: TextStyle(
                           fontSize: 11,
-                          color: Theme.of(context)
-                              .textTheme
-                              .labelSmall
-                              ?.color
+                          color: context.textTheme.labelSmall?.color
                               ?.withOpacity(0.5),
                           fontWeight: FontWeight.bold,
                         ),
@@ -126,7 +124,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                         "server_info_box_server_version".tr(),
                         style: TextStyle(
                           fontSize: 11,
-                          color: Theme.of(context).textTheme.labelSmall?.color,
+                          color: context.textTheme.labelSmall?.color,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -142,10 +140,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                             : "?",
                         style: TextStyle(
                           fontSize: 11,
-                          color: Theme.of(context)
-                              .textTheme
-                              .labelSmall
-                              ?.color
+                          color: context.textTheme.labelSmall?.color
                               ?.withOpacity(0.5),
                           fontWeight: FontWeight.bold,
                         ),
@@ -171,7 +166,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                         "server_info_box_server_url".tr(),
                         style: TextStyle(
                           fontSize: 11,
-                          color: Theme.of(context).textTheme.labelSmall?.color,
+                          color: context.textTheme.labelSmall?.color,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -185,14 +180,12 @@ class AppBarServerInfo extends HookConsumerWidget {
                       child: Tooltip(
                         verticalOffset: 0,
                         decoration: BoxDecoration(
-                          color:
-                              Theme.of(context).primaryColor.withOpacity(0.9),
+                          color: context.primaryColor.withOpacity(0.9),
                           borderRadius: BorderRadius.circular(10),
                         ),
                         textStyle: TextStyle(
-                          color: Theme.of(context).brightness == Brightness.dark
-                              ? Colors.black
-                              : Colors.white,
+                          color:
+                              context.isDarkTheme ? Colors.black : Colors.white,
                           fontWeight: FontWeight.bold,
                         ),
                         message: getServerUrl() ?? '--',
@@ -202,10 +195,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                           getServerUrl() ?? '--',
                           style: TextStyle(
                             fontSize: 11,
-                            color: Theme.of(context)
-                                .textTheme
-                                .labelSmall
-                                ?.color
+                            color: context.textTheme.labelSmall?.color
                                 ?.withOpacity(0.5),
                             fontWeight: FontWeight.bold,
                             overflow: TextOverflow.ellipsis,