refactor(mobile): refactor to use context helpers for consistency (#14235)

refactor to use context helpers for consistency

Co-authored-by: dvbthien <dvbthien@gmail.com>

mobile/lib/extensions/build_context_extensions.dart

@@ -4,6 +4,9 @@ extension ContextHelper on BuildContext {
   // Returns the current padding from MediaQuery
   EdgeInsets get padding => MediaQuery.paddingOf(this);
 
+  // Returns the current view insets from MediaQuery
+  EdgeInsets get viewInsets => MediaQuery.viewInsetsOf(this);
+
   // Returns the current width from MediaQuery
   double get width => MediaQuery.sizeOf(this).width;
 
@@ -13,6 +16,15 @@ extension ContextHelper on BuildContext {
   // Returns true if the app is running on a mobile device (!tablets)
   bool get isMobile => width < 550;
 
+  // Returns the current device pixel ratio from MediaQuery
+  double get devicePixelRatio => MediaQuery.devicePixelRatioOf(this);
+
+  // Returns the current orientation from MediaQuery
+  Orientation get orientation => MediaQuery.orientationOf(this);
+
+  // Returns the current platform brightness from MediaQuery
+  Brightness get platformBrightness => MediaQuery.platformBrightnessOf(this);
+
   // Returns the current ThemeData
   ThemeData get themeData => Theme.of(this);
 
@@ -31,6 +43,15 @@ extension ContextHelper on BuildContext {
   // Current ColorScheme used
   ColorScheme get colorScheme => themeData.colorScheme;
 
+  // Navigate by pushing or popping routes from the current context
+  NavigatorState get navigator => Navigator.of(this);
+
+  // Showing material banners from the current context
+  ScaffoldMessengerState get scaffoldMessenger => ScaffoldMessenger.of(this);
+
   // Pop-out from the current context with optional result
   void pop<T>([T? result]) => Navigator.of(this).pop(result);
+
+  // Managing focus within the widget tree from the current context
+  FocusScopeNode get focusScope => FocusScope.of(this);
 }

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

@@ -243,7 +243,7 @@ class AlbumViewerPage extends HookConsumerWidget {
           AnimatedPositioned(
             duration: const Duration(milliseconds: 300),
             top: ref.watch(multiselectProvider)
-                ? -(kToolbarHeight + MediaQuery.of(context).padding.top)
+                ? -(kToolbarHeight + context.padding.top)
                 : 0,
             left: 0,
             right: 0,

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

@@ -37,7 +37,7 @@ class AppLogDetailPage extends HookConsumerWidget {
                 IconButton(
                   onPressed: () {
                     Clipboard.setData(ClipboardData(text: text)).then((_) {
-                      ScaffoldMessenger.of(context).showSnackBar(
+                      context.scaffoldMessenger.showSnackBar(
                         SnackBar(
                           content: Text(
                             "Copied to clipboard",

mobile/lib/pages/common/download_panel.dart

@@ -97,7 +97,7 @@ class DownloadTaskTile extends StatelessWidget {
 
     return SizedBox(
       key: const ValueKey('download_progress'),
-      width: MediaQuery.of(context).size.width - 32,
+      width: context.width - 32,
       child: Card(
         clipBehavior: Clip.antiAlias,
         shape: RoundedRectangleBorder(

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

@@ -141,7 +141,7 @@ class GalleryViewerPage extends HookConsumerWidget {
             heightFactor: 0.75,
             child: Padding(
               padding: EdgeInsets.only(
-                bottom: MediaQuery.viewInsetsOf(context).bottom,
+                bottom: context.viewInsets.bottom,
               ),
               child: ref
                       .watch(appSettingsServiceProvider)

mobile/lib/pages/common/large_leading_tile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
 class LargeLeadingTile extends StatelessWidget {
   const LargeLeadingTile({
@@ -37,7 +38,7 @@ class LargeLeadingTile extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               SizedBox(
-                width: MediaQuery.of(context).size.width * 0.6,
+                width: context.width * 0.6,
                 child: title,
               ),
               subtitle ?? const SizedBox.shrink(),

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

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_controller_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
@@ -120,8 +121,6 @@ class VideoViewerPage extends HookConsumerWidget {
       [controller],
     );
 
-    final size = MediaQuery.sizeOf(context);
-
     return PopScope(
       onPopInvokedWithResult: (didPop, _) {
         ref.read(videoPlaybackValueProvider.notifier).value =
@@ -148,8 +147,8 @@ class VideoViewerPage extends HookConsumerWidget {
             ),
             if (controller != null)
               SizedBox(
-                height: size.height,
+                height: context.height,
-                width: size.width,
+                width: context.width,
                 child: VideoPlayerViewer(
                   controller: controller,
                   isMotionVideo: isMotionVideo,

mobile/lib/pages/editing/crop.page.dart

@@ -92,7 +92,7 @@ class CropImagePage extends HookWidget {
                                 IconButton(
                                   icon: Icon(
                                     Icons.rotate_left,
-                                    color: Theme.of(context).iconTheme.color,
+                                    color: context.themeData.iconTheme.color,
                                   ),
                                   onPressed: () {
                                     cropController.rotateLeft();
@@ -101,7 +101,7 @@ class CropImagePage extends HookWidget {
                                 IconButton(
                                   icon: Icon(
                                     Icons.rotate_right,
-                                    color: Theme.of(context).iconTheme.color,
+                                    color: context.themeData.iconTheme.color,
                                   ),
                                   onPressed: () {
                                     cropController.rotateRight();
@@ -203,7 +203,7 @@ class _AspectRatioButton extends StatelessWidget {
             iconData,
             color: aspectRatio.value == ratio
                 ? context.primaryColor
-                : Theme.of(context).iconTheme.color,
+                : context.themeData.iconTheme.color,
           ),
           onPressed: () {
             cropController.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);

mobile/lib/pages/editing/edit.page.dart

@@ -70,7 +70,7 @@ class EditImagePage extends ConsumerWidget {
             title: "${p.withoutExtension(asset.fileName)}_edited.jpg",
           );
       await ref.read(albumProvider.notifier).refreshDeviceAlbums();
-      Navigator.of(context).popUntil((route) => route.isFirst);
+      context.navigator.popUntil((route) => route.isFirst);
       ImmichToast.show(
         durationInSecond: 3,
         context: context,
@@ -99,8 +99,7 @@ class EditImagePage extends ConsumerWidget {
             color: context.primaryColor,
             size: 24,
           ),
-          onPressed: () =>
+          onPressed: () => context.navigator.popUntil((route) => route.isFirst),
-              Navigator.of(context).popUntil((route) => route.isFirst),
         ),
         actions: <Widget>[
           TextButton(
@@ -120,8 +119,8 @@ class EditImagePage extends ConsumerWidget {
       body: Center(
         child: ConstrainedBox(
           constraints: BoxConstraints(
-            maxHeight: MediaQuery.of(context).size.height * 0.7,
+            maxHeight: context.height * 0.7,
-            maxWidth: MediaQuery.of(context).size.width * 0.9,
+            maxWidth: context.width * 0.9,
           ),
           child: Container(
             decoration: BoxDecoration(
@@ -161,7 +160,7 @@ class EditImagePage extends ConsumerWidget {
                 IconButton(
                   icon: Icon(
                     Icons.crop_rotate_rounded,
-                    color: Theme.of(context).iconTheme.color,
+                    color: context.themeData.iconTheme.color,
                     size: 25,
                   ),
                   onPressed: () {
@@ -179,7 +178,7 @@ class EditImagePage extends ConsumerWidget {
                 IconButton(
                   icon: Icon(
                     Icons.filter,
-                    color: Theme.of(context).iconTheme.color,
+                    color: context.themeData.iconTheme.color,
                     size: 25,
                   ),
                   onPressed: () {

mobile/lib/pages/editing/filter.page.dart

@@ -104,7 +104,7 @@ class FilterImagePage extends HookWidget {
       body: Column(
         children: [
           SizedBox(
-            height: MediaQuery.of(context).size.height * 0.7,
+            height: context.height * 0.7,
             child: Center(
               child: ColorFiltered(
                 colorFilter: colorFilter.value,
@@ -180,7 +180,7 @@ class _FilterButton extends StatelessWidget {
           ),
         ),
         const SizedBox(height: 10),
-        Text(label, style: Theme.of(context).textTheme.bodyMedium),
+        Text(label, style: context.themeData.textTheme.bodyMedium),
       ],
     );
   }

mobile/lib/pages/library/library.page.dart

@@ -202,7 +202,7 @@ class PeopleCollectionCard extends ConsumerWidget {
       builder: (context, constraints) {
         final isTablet = constraints.maxWidth > 600;
         final widthFactor = isTablet ? 0.25 : 0.5;
-        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
+        final size = context.width * widthFactor - 20.0;
 
         return GestureDetector(
           onTap: () => context.pushRoute(const PeopleCollectionRoute()),
@@ -272,7 +272,7 @@ class LocalAlbumsCollectionCard extends HookConsumerWidget {
       builder: (context, constraints) {
         final isTablet = constraints.maxWidth > 600;
         final widthFactor = isTablet ? 0.25 : 0.5;
-        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
+        final size = context.width * widthFactor - 20.0;
 
         return GestureDetector(
           onTap: () => context.pushRoute(
@@ -335,7 +335,7 @@ class PlacesCollectionCard extends StatelessWidget {
       builder: (context, constraints) {
         final isTablet = constraints.maxWidth > 600;
         final widthFactor = isTablet ? 0.25 : 0.5;
-        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
+        final size = context.width * widthFactor - 20.0;
 
         return GestureDetector(
           onTap: () => context.pushRoute(const PlacesCollectionRoute()),

mobile/lib/pages/library/people/people_collection.page.dart

@@ -32,8 +32,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
     return LayoutBuilder(
       builder: (context, constraints) {
         final isTablet = constraints.maxWidth > 600;
-        final isPortrait =
+        final isPortrait = context.orientation == Orientation.portrait;
-            MediaQuery.of(context).orientation == Orientation.portrait;
 
         return Scaffold(
           appBar: AppBar(

mobile/lib/pages/library/shared_link/shared_link_edit.page.dart

@@ -279,7 +279,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
 
     void copyLinkToClipboard() {
       Clipboard.setData(ClipboardData(text: newShareLink.value)).then((_) {
-        ScaffoldMessenger.of(context).showSnackBar(
+        context.scaffoldMessenger.showSnackBar(
           SnackBar(
             content: Text(
               "shared_link_clipboard_copied_massage",

mobile/lib/pages/photos/photos.page.dart

@@ -110,12 +110,12 @@ class PhotosPage extends HookConsumerWidget {
         AnimatedPositioned(
           duration: const Duration(milliseconds: 300),
           top: ref.watch(multiselectProvider)
-              ? -(kToolbarHeight + MediaQuery.of(context).padding.top)
+              ? -(kToolbarHeight + context.padding.top)
               : 0,
           left: 0,
           right: 0,
           child: Container(
-            height: kToolbarHeight + MediaQuery.of(context).padding.top,
+            height: kToolbarHeight + context.padding.top,
             color: context.themeData.appBarTheme.backgroundColor,
             child: const ImmichAppBar(),
           ),

mobile/lib/pages/search/map/map.page.dart

@@ -305,7 +305,7 @@ class MapPage extends HookConsumerWidget {
                         ),
                         Positioned(
                           right: 0,
-                          bottom: MediaQuery.paddingOf(context).bottom + 16,
+                          bottom: context.padding.bottom + 16,
                           child: ElevatedButton(
                             onPressed: onZoomToLocation,
                             style: ElevatedButton.styleFrom(

mobile/lib/pages/search/search.page.dart

@@ -196,7 +196,7 @@ class SearchPage extends HookConsumerWidget {
             padding: const EdgeInsets.symmetric(vertical: 16.0),
             child: Container(
               padding: EdgeInsets.only(
-                bottom: MediaQuery.of(context).viewInsets.bottom,
+                bottom: context.viewInsets.bottom,
               ),
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),

mobile/lib/widgets/album/album_viewer_editable_title.dart

@@ -49,7 +49,7 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
         style: context.textTheme.headlineMedium,
         controller: titleTextEditController,
         onTap: () {
-          FocusScope.of(context).requestFocus(titleFocusNode);
+          context.focusScope.requestFocus(titleFocusNode);
 
           ref.watch(albumViewerProvider.notifier).setEditTitleText(album.name);
           ref.watch(albumViewerProvider.notifier).enableEditAlbum();

mobile/lib/widgets/asset_viewer/advanced_bottom_sheet.dart

@@ -54,7 +54,7 @@ class AdvancedBottomSheet extends HookConsumerWidget {
                                   text: assetDetail.toString(),
                                 ),
                               ).then((_) {
-                                ScaffoldMessenger.of(context).showSnackBar(
+                                context.scaffoldMessenger.showSnackBar(
                                   SnackBar(
                                     content: Text(
                                       "Copied to clipboard",

mobile/lib/widgets/asset_viewer/bottom_gallery_bar.dart

@@ -188,7 +188,7 @@ class BottomGalleryBar extends ConsumerWidget {
     void handleEdit() async {
       final image = Image(image: ImmichImage.imageProvider(asset: asset));
 
-      Navigator.of(context).push(
+      context.navigator.push(
         MaterialPageRoute(
           builder: (context) => EditImagePage(
             asset: asset,

mobile/lib/widgets/asset_viewer/video_controls.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/widgets/asset_viewer/video_position.dart';
 
 /// The video controls for the [videoPlayerControlsProvider]
@@ -8,8 +9,7 @@ class VideoControls extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final isPortrait =
+    final isPortrait = context.orientation == Orientation.portrait;
-        MediaQuery.orientationOf(context) == Orientation.portrait;
     return isPortrait
         ? const VideoPosition()
         : const Padding(

mobile/lib/widgets/common/app_bar_dialog/app_bar_dialog.dart

@@ -261,7 +261,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
     return Dismissible(
       behavior: HitTestBehavior.translucent,
       direction: DismissDirection.down,
-      onDismissed: (_) => Navigator.of(context).pop(),
+      onDismissed: (_) => context.pop(),
       key: const Key('app_bar_dialog'),
       child: Dialog(
         clipBehavior: Clip.hardEdge,

mobile/lib/widgets/common/user_circle_avatar.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/entities/user.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/widgets/common/transparent_image.dart';
 
@@ -23,7 +24,7 @@ class UserCircleAvatar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    bool isDarkTheme = Theme.of(context).brightness == Brightness.dark;
+    bool isDarkTheme = context.themeData.brightness == Brightness.dark;
     final profileImageUrl =
         '${Store.get(StoreKey.serverEndpoint)}/users/${user.id}/profile-image?d=${Random().nextInt(1024)}';
 

mobile/lib/widgets/map/map_app_bar.dart

@@ -19,7 +19,7 @@ class MapAppBar extends HookWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: EdgeInsets.only(top: MediaQuery.paddingOf(context).top + 25),
+      padding: EdgeInsets.only(top: context.padding.top + 25),
       child: ValueListenableBuilder(
         valueListenable: selectedAssets,
         builder: (ctx, value, child) => value.isNotEmpty

mobile/lib/widgets/map/positioned_asset_marker_icon.dart

@@ -26,7 +26,7 @@ class PositionedAssetMarkerIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final ratio = Platform.isIOS ? 1.0 : MediaQuery.devicePixelRatioOf(context);
+    final ratio = Platform.isIOS ? 1.0 : context.devicePixelRatio;
     return AnimatedPositioned(
       left: point.x / ratio - size / 2,
       top: point.y / ratio - size,

mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart

@@ -47,7 +47,7 @@ class FilterBottomSheetScaffold extends StatelessWidget {
                 OutlinedButton(
                   onPressed: () {
                     onClear();
-                    Navigator.of(context).pop();
+                    context.pop();
                   },
                   child: const Text('action_common_clear').tr(),
                 ),
@@ -55,7 +55,7 @@ class FilterBottomSheetScaffold extends StatelessWidget {
                 ElevatedButton(
                   onPressed: () {
                     onSearch();
-                    Navigator.of(context).pop();
+                    context.pop();
                   },
                   child: const Text('search_filter_apply').tr(),
                 ),

mobile/lib/widgets/settings/backup_settings/background_settings.dart

@@ -33,7 +33,7 @@ class BackgroundBackupSettings extends ConsumerWidget {
         ),
         backgroundColor: Colors.red,
       );
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      context.scaffoldMessenger.showSnackBar(snackBar);
     }
 
     void showBatteryOptimizationInfoToUser() {

mobile/lib/widgets/settings/preference_settings/theme_setting.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/services/app_settings.service.dart';
 import 'package:immich_mobile/widgets/settings/preference_settings/primary_color_setting.dart';
 import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
@@ -58,8 +59,7 @@ class ThemeSetting extends HookConsumerWidget {
         isSystemTheme.value = true;
         ref.watch(immichThemeModeProvider.notifier).state = ThemeMode.system;
       } else {
-        final currentSystemBrightness =
+        final currentSystemBrightness = context.platformBrightness;
-            MediaQuery.platformBrightnessOf(context);
         isSystemTheme.value = false;
         isDarkTheme.value = currentSystemBrightness == Brightness.dark;
         if (currentSystemBrightness == Brightness.light) {

mobile/lib/widgets/shared_link/shared_link_item.dart

@@ -94,7 +94,7 @@ class SharedLinkItem extends ConsumerWidget {
       Clipboard.setData(
         ClipboardData(text: "${serverUrl}share/${sharedLink.key}"),
       ).then((_) {
-        ScaffoldMessenger.of(context).showSnackBar(
+        context.scaffoldMessenger.showSnackBar(
           SnackBar(
             content: Text(
               "shared_link_clipboard_copied_massage",