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/modules/map/ui/map_page_app_bar.dart

@@ -1,8 +1,8 @@
 import 'dart:io';
 
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/disable_multi_select_button.dart';
 import 'package:immich_mobile/modules/map/ui/map_settings_dialog.dart';
 
@@ -30,7 +30,7 @@ class MapAppBar extends HookWidget implements PreferredSizeWidget {
       Padding(
         padding: const EdgeInsets.only(left: 15, top: 15),
         child: ElevatedButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           style: ElevatedButton.styleFrom(
             shape: const CircleBorder(),
             padding: const EdgeInsets.all(12),

mobile/lib/modules/map/ui/map_page_bottom_sheet.dart

@@ -5,6 +5,7 @@ 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/asset_viewer/providers/render_list.provider.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/asset_grid_data_structure.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
@@ -56,10 +57,10 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
 
   @override
   Widget build(BuildContext context) {
-    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+    final isDarkTheme = context.isDarkTheme;
     final bottomPadding =
         Platform.isAndroid ? MediaQuery.of(context).padding.bottom - 10 : 0.0;
-    final maxHeight = MediaQuery.of(context).size.height - bottomPadding;
+    final maxHeight = context.height - bottomPadding;
     final isSheetScrolled = useState(false);
     final isSheetExpanded = useState(false);
     final assetsInBound = useState(<Asset>[]);
@@ -136,7 +137,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                 SizedBox(
                   height: 150,
                   width: 150,
-                  child: isDarkMode
+                  child: isDarkTheme
                       ? const InvertionFilter(
                           child: SaturationFilter(
                             saturation: -1,
@@ -155,7 +156,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                   "map_zoom_to_see_photos".tr(),
                   style: TextStyle(
                     fontSize: 20,
-                    color: Theme.of(context).textTheme.displayLarge?.color,
+                    color: context.textTheme.displayLarge?.color,
                   ),
                 ),
               ],
@@ -181,7 +182,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
         height: 60,
         width: double.infinity,
         decoration: BoxDecoration(
-          color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
+          color: isDarkTheme ? Colors.grey[900] : Colors.grey[100],
         ),
         child: Stack(
           children: [
@@ -196,17 +197,14 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                   textToDisplay,
                   style: TextStyle(
                     fontSize: 16,
-                    color: Theme.of(context).textTheme.displayLarge?.color,
+                    color: context.textTheme.displayLarge?.color,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
                 Divider(
                   height: 10,
-                  color: Theme.of(context)
-                      .textTheme
-                      .displayLarge
-                      ?.color
-                      ?.withOpacity(0.5),
+                  color:
+                      context.textTheme.displayLarge?.color?.withOpacity(0.5),
                 ),
               ],
             ),
@@ -217,7 +215,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                 child: IconButton(
                   icon: Icon(
                     Icons.map_outlined,
-                    color: Theme.of(context).textTheme.displayLarge?.color,
+                    color: context.textTheme.displayLarge?.color,
                   ),
                   iconSize: 20,
                   tooltip: 'Zoom to bounds',
@@ -265,7 +263,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                 ScrollController scrollController,
               ) {
                 return Card(
-                  color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
+                  color: isDarkTheme ? Colors.grey[900] : Colors.grey[100],
                   surfaceTintColor: Colors.transparent,
                   elevation: 18.0,
                   margin: const EdgeInsets.all(0),

mobile/lib/modules/map/ui/map_settings_dialog.dart

@@ -2,6 +2,7 @@ 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/map/providers/map_state.provider.dart';
 
 class MapSettingsDialog extends HookConsumerWidget {
@@ -15,7 +16,7 @@ class MapSettingsDialog extends HookConsumerWidget {
     final showFavoriteOnly = useState(mapSettings.showFavoriteOnly);
     final showIncludeArchived = useState(mapSettings.includeArchived);
     final showRelativeDate = useState(mapSettings.relativeTime);
-    final ThemeData theme = Theme.of(context);
+    final ThemeData theme = context.themeData;
 
     Widget buildMapThemeSetting() {
       return SwitchListTile.adaptive(
@@ -125,7 +126,7 @@ class MapSettingsDialog extends HookConsumerWidget {
     List<Widget> getDialogActions() {
       return <Widget>[
         TextButton(
-          onPressed: () => Navigator.of(context).pop(),
+          onPressed: () => context.pop(),
           style: TextButton.styleFrom(
             backgroundColor:
                 mapSettings.isDarkTheme ? Colors.grey[100] : Colors.grey[700],
@@ -146,7 +147,7 @@ class MapSettingsDialog extends HookConsumerWidget {
             mapSettingsNotifier.setRelativeTime(showRelativeDate.value);
             mapSettingsNotifier
                 .switchIncludeArchived(showIncludeArchived.value);
-            Navigator.of(context).pop();
+            context.pop();
           },
           style: TextButton.styleFrom(
             backgroundColor: theme.primaryColor,
@@ -178,7 +179,7 @@ class MapSettingsDialog extends HookConsumerWidget {
         width: double.maxFinite,
         child: ConstrainedBox(
           constraints: BoxConstraints(
-            maxHeight: MediaQuery.of(context).size.height * 0.6,
+            maxHeight: context.height * 0.6,
           ),
           child: ListView(
             shrinkWrap: true,

mobile/lib/modules/map/views/map_page.dart

@@ -1,7 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
 
-import 'package:auto_route/auto_route.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -12,6 +11,7 @@ import 'package:flutter_map_heatmap/flutter_map_heatmap.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/map/models/map_page_event.model.dart';
 import 'package:immich_mobile/modules/map/providers/map_marker.provider.dart';
 import 'package:immich_mobile/modules/map/providers/map_state.provider.dart';
@@ -24,7 +24,7 @@ import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:immich_mobile/utils/debounce.dart';
-import 'package:immich_mobile/utils/flutter_map_extensions.dart';
+import 'package:immich_mobile/extensions/flutter_map_extensions.dart';
 import 'package:immich_mobile/utils/immich_app_theme.dart';
 import 'package:immich_mobile/utils/selection_handlers.dart';
 import 'package:latlong2/latlong.dart';
@@ -101,7 +101,7 @@ class MapPageState extends ConsumerState<MapPage> {
   }
 
   void openAssetInViewer(Asset asset) {
-    AutoRouter.of(context).push(
+    context.autoPush(
       GalleryViewerRoute(
         initialIndex: 0,
         loadAsset: (index) => asset,
@@ -474,8 +474,8 @@ class MapPageState extends ConsumerState<MapPage> {
                 ),
               if (showLoadingIndicator.value || isLoading)
                 Positioned(
-                  top: MediaQuery.of(context).size.height * 0.35,
-                  left: MediaQuery.of(context).size.width * 0.425,
+                  top: context.height * 0.35,
+                  left: context.width * 0.425,
                   child: const ImmichLoadingIndicator(),
                 ),
             ],