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>
2025-12-24 09:14:58 +03:00 · 2023-11-09 16:19:53 +00:00
parent a147dee4b6
commit bffc2cdf60
106 changed files with 660 additions and 628 deletions
--- a/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
+++ b/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
@@ -2,6 +2,7 @@ import 'dart:io';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' show useEffect, useState;
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
@@ -43,7 +44,7 @@ class AdvancedSettings extends HookConsumerWidget {
    final logLevel = Level.LEVELS[levelId.value].name;

    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        "advanced_settings_tile_title",
        style: TextStyle(
@@ -86,7 +87,7 @@ class AdvancedSettings extends HookConsumerWidget {
            min: 1.0,
            divisions: 7,
            label: logLevel,
-            activeColor: Theme.of(context).primaryColor,
+            activeColor: context.primaryColor,
          ),
        ),
        SettingsSwitchListTile(
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_layout_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_layout_settings.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/home/ui/asset_grid/asset_grid_data_structure.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
@@ -50,12 +51,10 @@ class LayoutSettings extends HookConsumerWidget {
    return Column(
      children: [
        SwitchListTile.adaptive(
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_dynamic_layout_title",
-            style: Theme.of(context)
-                .textTheme
-                .labelLarge
+            style: context.textTheme.labelLarge
                ?.copyWith(fontWeight: FontWeight.bold),
          ).tr(),
          onChanged: switchChanged,
@@ -75,10 +74,10 @@ class LayoutSettings extends HookConsumerWidget {
          ).tr(),
        ),
        RadioListTile(
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_by_month_day",
-            style: Theme.of(context).textTheme.labelLarge,
+            style: context.textTheme.labelLarge,
          ).tr(),
          value: GroupAssetsBy.day,
          groupValue: groupBy.value,
@@ -86,10 +85,10 @@ class LayoutSettings extends HookConsumerWidget {
          controlAffinity: ListTileControlAffinity.trailing,
        ),
        RadioListTile(
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_by_month",
-            style: Theme.of(context).textTheme.labelLarge,
+            style: context.textTheme.labelLarge,
          ).tr(),
          value: GroupAssetsBy.month,
          groupValue: groupBy.value,
@@ -97,10 +96,10 @@ class LayoutSettings extends HookConsumerWidget {
          controlAffinity: ListTileControlAffinity.trailing,
        ),
        RadioListTile(
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_automatically",
-            style: Theme.of(context).textTheme.labelLarge,
+            style: context.textTheme.labelLarge,
          ).tr(),
          value: GroupAssetsBy.auto,
          groupValue: groupBy.value,
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_settings.dart
@@ -1,5 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/settings/ui/asset_list_settings/asset_list_layout_settings.dart';
 import 'package:immich_mobile/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.dart';
 import 'asset_list_tiles_per_row.dart';
@@ -12,7 +13,7 @@ class AssetListSettings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        'asset_list_settings_title',
        style: TextStyle(
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.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/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';

@@ -33,13 +34,11 @@ class StorageIndicator extends HookConsumerWidget {
    );

    return SwitchListTile.adaptive(
-      activeColor: Theme.of(context).primaryColor,
+      activeColor: context.primaryColor,
      title: Text(
        "theme_setting_asset_list_storage_indicator_title",
-        style: Theme.of(context)
-            .textTheme
-            .labelLarge
-            ?.copyWith(fontWeight: FontWeight.bold),
+        style:
+            context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold),
      ).tr(),
      onChanged: switchChanged,
      value: showStorageIndicator.value,
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_tiles_per_row.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_tiles_per_row.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/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';

@@ -51,7 +52,7 @@ class TilesPerRow extends HookConsumerWidget {
          max: 6,
          divisions: 4,
          label: "${itemsValue.value.toInt()}",
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
        ),
      ],
    );
--- a/mobile/lib/modules/settings/ui/image_viewer_quality_setting/image_viewer_quality_setting.dart
+++ b/mobile/lib/modules/settings/ui/image_viewer_quality_setting/image_viewer_quality_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/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:immich_mobile/modules/settings/ui/settings_switch_list_tile.dart';
@@ -26,7 +27,7 @@ class ImageViewerQualitySetting extends HookConsumerWidget {
    );

    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        'theme_setting_image_viewer_quality_title',
        style: TextStyle(
--- a/mobile/lib/modules/settings/ui/local_storage_settings/local_storage_settings.dart
+++ b/mobile/lib/modules/settings/ui/local_storage_settings/local_storage_settings.dart
@@ -1,6 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' show useEffect, useState;
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/backup/models/duplicated_asset.model.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/providers/db.provider.dart';
@@ -25,7 +26,7 @@ class LocalStorageSettings extends HookConsumerWidget {
    }

    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        "cache_settings_tile_title",
        style: TextStyle(
@@ -42,9 +43,7 @@ class LocalStorageSettings extends HookConsumerWidget {
        ListTile(
          title: Text(
            "Duplicated Assets (${cacheItemCount.value})",
-            style: Theme.of(context)
-                .textTheme
-                .labelLarge
+            style: context.textTheme.labelLarge
                ?.copyWith(fontWeight: FontWeight.bold),
          ).tr(),
          subtitle: const Text(
--- a/mobile/lib/modules/settings/ui/notification_setting/notification_setting.dart
+++ b/mobile/lib/modules/settings/ui/notification_setting/notification_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/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/providers/notification_permission.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
@@ -49,12 +50,12 @@ class NotificationSetting extends HookConsumerWidget {
          actions: [
            TextButton(
              child: const Text('notification_permission_dialog_cancel').tr(),
-              onPressed: () => Navigator.of(context).pop(),
+              onPressed: () => context.pop(),
            ),
            TextButton(
              child: const Text('notification_permission_dialog_settings').tr(),
              onPressed: () {
-                Navigator.of(context).pop();
+                context.pop();
                openAppSettings();
              },
            ),
@@ -65,7 +66,7 @@ class NotificationSetting extends HookConsumerWidget {

    final String formattedValue = _formatSliderValue(sliderValue.value);
    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        'setting_notifications_title',
        style: TextStyle(
@@ -84,9 +85,7 @@ class NotificationSetting extends HookConsumerWidget {
            leading: const Icon(Icons.notifications_outlined),
            title: Text(
              'notification_permission_list_tile_title',
-              style: Theme.of(context)
-                  .textTheme
-                  .labelLarge
+              style: context.textTheme.labelLarge
                  ?.copyWith(fontWeight: FontWeight.bold),
            ).tr(),
            subtitle: Column(
@@ -94,7 +93,7 @@ class NotificationSetting extends HookConsumerWidget {
              children: [
                Text(
                  'notification_permission_list_tile_content',
-                  style: Theme.of(context).textTheme.labelMedium,
+                  style: context.textTheme.labelMedium,
                ).tr(),
                const SizedBox(height: 8),
                ElevatedButton(
@@ -149,7 +148,7 @@ class NotificationSetting extends HookConsumerWidget {
            max: 5.0,
            divisions: 5,
            label: formattedValue,
-            activeColor: Theme.of(context).primaryColor,
+            activeColor: context.primaryColor,
          ),
        ),
      ],
--- a/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
+++ b/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';

 class SettingsSwitchListTile extends StatelessWidget {
@@ -23,7 +24,7 @@ class SettingsSwitchListTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SwitchListTile.adaptive(
-      selectedTileColor: enabled ? null : Theme.of(context).disabledColor,
+      selectedTileColor: enabled ? null : context.themeData.disabledColor,
      value: valueNotifier.value,
      onChanged: (bool value) {
        if (enabled) {
@@ -34,16 +35,13 @@ class SettingsSwitchListTile extends StatelessWidget {
          onChanged!(value);
        }
      },
-      activeColor: enabled
-          ? Theme.of(context).primaryColor
-          : Theme.of(context).disabledColor,
+      activeColor:
+          enabled ? context.primaryColor : context.themeData.disabledColor,
      dense: true,
      title: Text(
        title,
-        style: Theme.of(context)
-            .textTheme
-            .labelLarge
-            ?.copyWith(fontWeight: FontWeight.bold),
+        style:
+            context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold),
      ),
      subtitle: subtitle != null ? Text(subtitle!) : null,
    );
--- a/mobile/lib/modules/settings/ui/theme_setting/theme_setting.dart
+++ b/mobile/lib/modules/settings/ui/theme_setting/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/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/immich_app_theme.dart';
@@ -24,7 +25,7 @@ class ThemeSetting extends HookConsumerWidget {
    );

    return ExpansionTile(
-      textColor: Theme.of(context).primaryColor,
+      textColor: context.primaryColor,
      title: const Text(
        'theme_setting_theme_title',
        style: TextStyle(
@@ -39,12 +40,10 @@ class ThemeSetting extends HookConsumerWidget {
      ).tr(),
      children: [
        SwitchListTile.adaptive(
-          activeColor: Theme.of(context).primaryColor,
+          activeColor: context.primaryColor,
          title: Text(
            'theme_setting_system_theme_switch',
-            style: Theme.of(context)
-                .textTheme
-                .labelLarge
+            style: context.textTheme.labelLarge
                ?.copyWith(fontWeight: FontWeight.bold),
          ).tr(),
          value: currentTheme.value == ThemeMode.system,
@@ -77,12 +76,10 @@ class ThemeSetting extends HookConsumerWidget {
        ),
        if (currentTheme.value != ThemeMode.system)
          SwitchListTile.adaptive(
-            activeColor: Theme.of(context).primaryColor,
+            activeColor: context.primaryColor,
            title: Text(
              'theme_setting_dark_mode_switch',
-              style: Theme.of(context)
-                  .textTheme
-                  .labelLarge
+              style: context.textTheme.labelLarge
                  ?.copyWith(fontWeight: FontWeight.bold),
            ).tr(),
            value: ref.watch(immichThemeProvider) == ThemeMode.dark,