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/views/app_log_detail_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/logger_message.model.dart';
 import 'package:flutter/services.dart';
 
@@ -10,7 +11,7 @@ class AppLogDetailPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var isDarkMode = Theme.of(context).brightness == Brightness.dark;
+    var isDarkTheme = context.isDarkTheme;
 
     buildStackMessage(String stackTrace) {
       return Padding(
@@ -28,7 +29,7 @@ class AppLogDetailPage extends HookConsumerWidget {
                     "STACK TRACES",
                     style: TextStyle(
                       fontSize: 12.0,
-                      color: Theme.of(context).primaryColor,
+                      color: context.primaryColor,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
@@ -45,14 +46,14 @@ class AppLogDetailPage extends HookConsumerWidget {
                   icon: Icon(
                     Icons.copy,
                     size: 16.0,
-                    color: Theme.of(context).primaryColor,
+                    color: context.primaryColor,
                   ),
                 ),
               ],
             ),
             Container(
               decoration: BoxDecoration(
-                color: isDarkMode ? Colors.grey[900] : Colors.grey[200],
+                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
                 borderRadius: BorderRadius.circular(15.0),
               ),
               child: Padding(
@@ -88,7 +89,7 @@ class AppLogDetailPage extends HookConsumerWidget {
                     "MESSAGE",
                     style: TextStyle(
                       fontSize: 12.0,
-                      color: Theme.of(context).primaryColor,
+                      color: context.primaryColor,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
@@ -104,14 +105,14 @@ class AppLogDetailPage extends HookConsumerWidget {
                   icon: Icon(
                     Icons.copy,
                     size: 16.0,
-                    color: Theme.of(context).primaryColor,
+                    color: context.primaryColor,
                   ),
                 ),
               ],
             ),
             Container(
               decoration: BoxDecoration(
-                color: isDarkMode ? Colors.grey[900] : Colors.grey[200],
+                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
                 borderRadius: BorderRadius.circular(15.0),
               ),
               child: Padding(
@@ -143,14 +144,14 @@ class AppLogDetailPage extends HookConsumerWidget {
                 "FROM",
                 style: TextStyle(
                   fontSize: 12.0,
-                  color: Theme.of(context).primaryColor,
+                  color: context.primaryColor,
                   fontWeight: FontWeight.bold,
                 ),
               ),
             ),
             Container(
               decoration: BoxDecoration(
-                color: isDarkMode ? Colors.grey[900] : Colors.grey[200],
+                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
                 borderRadius: BorderRadius.circular(15.0),
               ),
               child: Padding(

mobile/lib/shared/views/app_log_page.dart

@@ -1,7 +1,7 @@
-import 'package:auto_route/auto_route.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/routing/router.dart';
 import 'package:immich_mobile/shared/models/logger_message.model.dart';
 import 'package:immich_mobile/shared/services/immich_logger.service.dart';
@@ -16,6 +16,7 @@ class AppLogPage extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final immichLogger = ImmichLogger();
     final logMessages = useState(immichLogger.messages);
+    final isDarkTheme = context.isDarkTheme;
 
     Widget colorStatusIndicator(Color color) {
       return Column(
@@ -36,7 +37,7 @@ class AppLogPage extends HookConsumerWidget {
     Widget buildLeadingIcon(LogLevel level) {
       switch (level) {
         case LogLevel.INFO:
-          return colorStatusIndicator(Theme.of(context).primaryColor);
+          return colorStatusIndicator(context.primaryColor);
         case LogLevel.SEVERE:
           return colorStatusIndicator(Colors.redAccent);
 
@@ -52,15 +53,15 @@ class AppLogPage extends HookConsumerWidget {
         case LogLevel.INFO:
           return Colors.transparent;
         case LogLevel.SEVERE:
-          return Theme.of(context).brightness == Brightness.dark
+          return isDarkTheme
               ? Colors.redAccent.withOpacity(0.25)
               : Colors.redAccent.withOpacity(0.075);
         case LogLevel.WARNING:
-          return Theme.of(context).brightness == Brightness.dark
+          return isDarkTheme
               ? Colors.orangeAccent.withOpacity(0.25)
               : Colors.orangeAccent.withOpacity(0.075);
         default:
-          return Theme.of(context).primaryColor.withOpacity(0.1);
+          return context.primaryColor.withOpacity(0.1);
       }
     }
 
@@ -79,7 +80,7 @@ class AppLogPage extends HookConsumerWidget {
           IconButton(
             icon: Icon(
               Icons.delete_outline_rounded,
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
               semanticLabel: "Clear logs",
               size: 20.0,
             ),
@@ -91,7 +92,7 @@ class AppLogPage extends HookConsumerWidget {
           IconButton(
             icon: Icon(
               Icons.share_rounded,
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
               semanticLabel: "Share logs",
               size: 20.0,
             ),
@@ -102,7 +103,7 @@ class AppLogPage extends HookConsumerWidget {
         ],
         leading: IconButton(
           onPressed: () {
-            AutoRouter.of(context).pop();
+            context.autoPop();
           },
           icon: const Icon(
             Icons.arrow_back_ios_new_rounded,
@@ -115,16 +116,14 @@ class AppLogPage extends HookConsumerWidget {
         separatorBuilder: (context, index) {
           return Divider(
             height: 0,
-            color: Theme.of(context).brightness == Brightness.dark
-                ? Colors.white70
-                : Colors.grey[600],
+            color: isDarkTheme ? Colors.white70 : Colors.grey[600],
           );
         },
         itemCount: logMessages.value.length,
         itemBuilder: (context, index) {
           var logMessage = logMessages.value[index];
           return ListTile(
-            onTap: () => AutoRouter.of(context).push(
+            onTap: () => context.autoPush(
               AppLogDetailRoute(
                 logMessage: logMessage,
               ),
@@ -140,9 +139,7 @@ class AppLogPage extends HookConsumerWidget {
                   TextSpan(
                     text: "#$index ",
                     style: TextStyle(
-                      color: Theme.of(context).brightness == Brightness.dark
-                          ? Colors.white70
-                          : Colors.grey[600],
+                      color: isDarkTheme ? Colors.white70 : Colors.grey[600],
                       fontSize: 14.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -170,7 +167,7 @@ class AppLogPage extends HookConsumerWidget {
       ),
     );
   }
-  
+
   /// Truncate the log message to a certain number of lines
   /// @param int maxLines - Max number of lines to truncate
   String truncateLogMessage(String message, int maxLines) {

mobile/lib/shared/views/splash_screen.dart

@@ -1,7 +1,7 @@
-import 'package:auto_route/auto_route.dart';
 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/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/modules/onboarding/providers/gallery_permission.provider.dart';
@@ -51,7 +51,7 @@ class SplashScreenPage extends HookConsumerWidget {
       // If the device is offline and there is a currentUser stored locallly
       // Proceed into the app
       if (deviceIsOffline && Store.tryGet(StoreKey.currentUser) != null) {
-        AutoRouter.of(context).replace(const TabControllerRoute());
+        context.autoReplace(const TabControllerRoute());
       } else if (isSuccess) {
         // If device was able to login through the internet successfully
         final hasPermission =
@@ -60,10 +60,10 @@ class SplashScreenPage extends HookConsumerWidget {
           // Resume backup (if enable) then navigate
           ref.watch(backupProvider.notifier).resumeBackup();
         }
-        AutoRouter.of(context).replace(const TabControllerRoute());
+        context.autoReplace(const TabControllerRoute());
       } else {
         // User was unable to login through either offline or online methods
-        AutoRouter.of(context).replace(const LoginRoute());
+        context.autoReplace(const LoginRoute());
       }
     }
 
@@ -72,7 +72,7 @@ class SplashScreenPage extends HookConsumerWidget {
         if (serverUrl != null && accessToken != null) {
           performLoggingIn();
         } else {
-          AutoRouter.of(context).replace(const LoginRoute());
+          context.autoReplace(const LoginRoute());
         }
         return null;
       },

mobile/lib/shared/views/tab_controller_page.dart

@@ -3,6 +3,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/scroll_notifier.provider.dart';
 import 'package:immich_mobile/modules/home/providers/multiselect.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -31,7 +32,7 @@ class TabControllerPage extends HookConsumerWidget {
               child: CircularProgressIndicator(
                 strokeWidth: 2,
                 valueColor: AlwaysStoppedAnimation<Color>(
-                  Theme.of(context).primaryColor,
+                  context.primaryColor,
                 ),
               ),
             ),
@@ -55,10 +56,10 @@ class TabControllerPage extends HookConsumerWidget {
           ref.read(tabProvider.notifier).state = TabEnum.values[index];
         },
         selectedIconTheme: IconThemeData(
-          color: Theme.of(context).primaryColor,
+          color: context.primaryColor,
         ),
         selectedLabelTextStyle: TextStyle(
-          color: Theme.of(context).primaryColor,
+          color: context.primaryColor,
         ),
         useIndicator: false,
         destinations: [
@@ -116,7 +117,7 @@ class TabControllerPage extends HookConsumerWidget {
             selectedIcon: buildIcon(
               Icon(
                 Icons.photo_library,
-                color: Theme.of(context).primaryColor,
+                color: context.primaryColor,
               ),
             ),
           ),
@@ -127,7 +128,7 @@ class TabControllerPage extends HookConsumerWidget {
             ),
             selectedIcon: Icon(
               Icons.search,
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
             ),
           ),
           NavigationDestination(
@@ -137,7 +138,7 @@ class TabControllerPage extends HookConsumerWidget {
             ),
             selectedIcon: Icon(
               Icons.group,
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
             ),
           ),
           NavigationDestination(
@@ -148,7 +149,7 @@ class TabControllerPage extends HookConsumerWidget {
             selectedIcon: buildIcon(
               Icon(
                 Icons.photo_album_rounded,
-                color: Theme.of(context).primaryColor,
+                color: context.primaryColor,
               ),
             ),
           ),