helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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>
This commit is contained in:
shenlong 2023-11-09 16:19:53 +00:00 • committed by GitHub
parent a147dee4b6
commit bffc2cdf60
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
106 changed files with 660 additions and 628 deletions
Download patch file Download diff file Expand all files Collapse all files

3
mobile/lib/modules/search/ui/curated_people_row.dart
View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
import 'package:immich_mobile/shared/models/store.dart';
@ -85,7 +86,7 @@ class CuratedPeopleRow extends StatelessWidget {
"Add name",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
color: context.primaryColor,
),
),
),

6
mobile/lib/modules/search/ui/curated_places_row.dart
View file

@ -1,5 +1,5 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/modules/map/ui/map_thumbnail.dart';
import 'package:immich_mobile/modules/search/ui/curated_row.dart';
import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
@ -25,7 +25,7 @@ class CuratedPlacesRow extends CuratedRow {
final int actualContentIndex = isMapEnabled ? 1 : 0;
Widget buildMapThumbnail() {
return GestureDetector(
onTap: () => AutoRouter.of(context).push(
onTap: () => context.autoPush(
const MapRoute(),
),
child: SizedBox(
@ -43,7 +43,7 @@ class CuratedPlacesRow extends CuratedRow {
),
height: imageSize,
showAttribution: false,
isDarkTheme: Theme.of(context).brightness == Brightness.dark,
isDarkTheme: context.isDarkTheme,
),
),
Padding(

6
mobile/lib/modules/search/ui/explore_grid.dart
View file

@ -1,5 +1,5 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
import 'package:immich_mobile/routing/router.dart';
@ -50,13 +50,13 @@ class ExploreGrid extends StatelessWidget {
borderRadius: 0,
onTap: () {
isPeople
? AutoRouter.of(context).push(
? context.autoPush(
PersonResultRoute(
personId: content.id,
personName: content.label,
),
)
: AutoRouter.of(context).push(
: context.autoPush(
SearchResultRoute(searchTerm: 'm:${content.label}'),
);
},

11
mobile/lib/modules/search/ui/immich_search_bar.dart
View file

@ -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/search/providers/search_page_state.provider.dart';
class ImmichSearchBar extends HookConsumerWidget
@ -57,11 +58,11 @@ class ImmichSearchBar extends HookConsumerWidget
},
decoration: InputDecoration(
hintText: 'search_bar_hint'.tr(),
hintStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
fontWeight: FontWeight.w500,
fontSize: 14,
),
hintStyle: context.textTheme.titleSmall?.copyWith(
color: context.themeData.colorScheme.onSurface.withOpacity(0.5),
fontWeight: FontWeight.w500,
fontSize: 14,
),
enabledBorder: const UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),

3
mobile/lib/modules/search/ui/person_name_edit_form.dart
View file

@ -1,6 +1,7 @@
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/search/providers/people.provider.dart';
class PersonNameEditFormResult {
@ -71,7 +72,7 @@ class PersonNameEditForm extends HookConsumerWidget {
child: Text(
"Save",
style: TextStyle(
color: Theme.of(context).primaryColor,
color: context.primaryColor,
fontWeight: FontWeight.bold,
),
),

5
mobile/lib/modules/search/ui/search_row_title.dart
View file

@ -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';
class SearchRowTitle extends StatelessWidget {
final Function() onViewAllPressed;
@ -26,14 +27,14 @@ class SearchRowTitle extends StatelessWidget {
children: [
Text(
title,
style: Theme.of(context).textTheme.titleSmall,
style: context.textTheme.titleSmall,
),
TextButton(
onPressed: onViewAllPressed,
child: Text(
'search_page_view_all_button',
style: TextStyle(
color: Theme.of(context).primaryColor,
color: context.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 14.0,
),

16
mobile/lib/modules/search/ui/search_suggestion_list.dart
View file

@ -1,6 +1,7 @@
import 'package:easy_localization/easy_localization.dart';
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/modules/search/providers/search_page_state.provider.dart';
class SearchSuggestionList extends ConsumerWidget {
@ -13,17 +14,16 @@ class SearchSuggestionList extends ConsumerWidget {
final searchTerm = ref.watch(searchPageStateProvider).searchTerm;
final searchSuggestion =
ref.watch(searchPageStateProvider).searchSuggestion;
var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
return Container(
color: searchTerm.isEmpty
? Colors.black.withOpacity(0.5)
: Theme.of(context).scaffoldBackgroundColor,
: context.scaffoldBackgroundColor,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
color: isDarkTheme ? Colors.grey[800] : Colors.grey[100],
color: context.isDarkTheme ? Colors.grey[800] : Colors.grey[100],
child: Padding(
padding: const EdgeInsets.all(16.0),
child: RichText(
@ -31,14 +31,14 @@ class SearchSuggestionList extends ConsumerWidget {
children: [
TextSpan(
text: 'search_suggestion_list_smart_search_hint_1'.tr(),
style: Theme.of(context).textTheme.bodyMedium,
style: context.textTheme.bodyMedium,
),
TextSpan(
text: 'search_suggestion_list_smart_search_hint_2'.tr(),
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
style: context.textTheme.bodyMedium?.copyWith(
color: context.primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),

9
mobile/lib/modules/search/ui/thumbnail_with_info.dart
View file

@ -1,7 +1,8 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/shared/models/store.dart';
import 'package:immich_mobile/utils/capitalize.dart';
import 'package:immich_mobile/extensions/string_extensions.dart';
// ignore: must_be_immutable
class ThumbnailWithInfo extends StatelessWidget {
@ -22,8 +23,8 @@ class ThumbnailWithInfo extends StatelessWidget {
@override
Widget build(BuildContext context) {
var isDarkMode = Theme.of(context).brightness == Brightness.dark;
var textAndIconColor = isDarkMode ? Colors.grey[100] : Colors.grey[700];
var textAndIconColor =
context.isDarkTheme ? Colors.grey[100] : Colors.grey[700];
return GestureDetector(
onTap: () {
onTap();
@ -34,7 +35,7 @@ class ThumbnailWithInfo extends StatelessWidget {
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
),
child: imageUrl != null
? ClipRRect(

4
mobile/lib/modules/search/views/all_motion_videos_page.dart
View file

@ -1,7 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
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/modules/home/ui/asset_grid/immich_asset_grid.dart';
import 'package:immich_mobile/modules/search/providers/all_motion_photos.provider.dart';
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@ -17,7 +17,7 @@ class AllMotionPhotosPage extends HookConsumerWidget {
appBar: AppBar(
title: const Text('motion_photos_page_title').tr(),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
),

6
mobile/lib/modules/search/views/all_people_page.dart
View file

@ -1,7 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
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/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/providers/people.provider.dart';
import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
@ -19,13 +19,13 @@ class AllPeoplePage extends HookConsumerWidget {
title: Text(
'all_people_page_title',
style: TextStyle(
color: Theme.of(context).primaryColor,
color: context.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
).tr(),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
),

4
mobile/lib/modules/search/views/all_videos_page.dart
View file

@ -1,7 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
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/modules/home/ui/asset_grid/immich_asset_grid.dart';
import 'package:immich_mobile/modules/search/providers/all_video_assets.provider.dart';
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@ -17,7 +17,7 @@ class AllVideosPage extends HookConsumerWidget {
appBar: AppBar(
title: const Text('all_videos_page_title').tr(),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
),

6
mobile/lib/modules/search/views/curated_location_page.dart
View file

@ -1,7 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
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/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
@ -21,13 +21,13 @@ class CuratedLocationPage extends HookConsumerWidget {
title: Text(
'curated_location_page_title',
style: TextStyle(
color: Theme.of(context).primaryColor,
color: context.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
).tr(),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
),

16
mobile/lib/modules/search/views/person_result_page.dart
View file

@ -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/modules/home/ui/asset_grid/immich_asset_grid.dart';
import 'package:immich_mobile/modules/search/providers/people.provider.dart';
import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
@ -40,7 +40,7 @@ class PersonResultPage extends HookConsumerWidget {
void buildBottomSheet() {
showModalBottomSheet(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: context.scaffoldBackgroundColor,
isScrollControlled: false,
context: context,
useSafeArea: true,
@ -73,13 +73,13 @@ class PersonResultPage extends HookConsumerWidget {
children: [
Text(
'Add a name',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).colorScheme.secondary,
),
style: context.textTheme.titleSmall?.copyWith(
color: context.themeData.colorScheme.secondary,
),
),
Text(
'Find them fast by name with search',
style: Theme.of(context).textTheme.labelSmall,
style: context.textTheme.labelSmall,
),
],
),
@ -91,7 +91,7 @@ class PersonResultPage extends HookConsumerWidget {
children: [
Text(
name.value,
style: Theme.of(context).textTheme.titleLarge,
style: context.textTheme.titleLarge,
),
],
);
@ -101,7 +101,7 @@ class PersonResultPage extends HookConsumerWidget {
appBar: AppBar(
title: Text(name.value),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
actions: [

4
mobile/lib/modules/search/views/recently_added_page.dart
View file

@ -1,7 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
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/modules/home/ui/asset_grid/immich_asset_grid.dart';
import 'package:immich_mobile/modules/search/providers/recently_added.provider.dart';
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@ -17,7 +17,7 @@ class RecentlyAddedPage extends HookConsumerWidget {
appBar: AppBar(
title: const Text('recently_added_page_title').tr(),
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
onPressed: () => context.autoPop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
),

47
mobile/lib/modules/search/views/search_page.dart
View file

@ -1,9 +1,9 @@
import 'dart:math' as math;
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' hide Store;
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/providers/people.provider.dart';
import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
@ -30,15 +30,14 @@ class SearchPage extends HookConsumerWidget {
final curatedPeople = ref.watch(getCuratedPeopleProvider);
final isMapEnabled =
ref.watch(serverInfoProvider.select((v) => v.serverFeatures.map));
var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
double imageSize = math.min(MediaQuery.of(context).size.width / 3, 150);
double imageSize = math.min(context.width / 3, 150);
TextStyle categoryTitleStyle = const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14.0,
);
Color categoryIconColor = isDarkTheme ? Colors.white : Colors.black;
Color categoryIconColor = context.isDarkTheme ? Colors.white : Colors.black;
useEffect(
() {
@ -52,7 +51,7 @@ class SearchPage extends HookConsumerWidget {
searchFocusNode.unfocus();
ref.watch(searchPageStateProvider.notifier).disableSearch();
AutoRouter.of(context).push(
context.autoPush(
SearchResultRoute(
searchTerm: searchTerm,
),
@ -88,7 +87,7 @@ class SearchPage extends HookConsumerWidget {
.take(12)
.toList(),
onTap: (content, index) {
AutoRouter.of(context).push(
context.autoPush(
PersonResultRoute(
personId: content.id,
personName: content.label,
@ -121,7 +120,7 @@ class SearchPage extends HookConsumerWidget {
.toList(),
imageSize: imageSize,
onTap: (content, index) {
AutoRouter.of(context).push(
context.autoPush(
SearchResultRoute(
searchTerm: 'm:${content.label}',
),
@ -148,16 +147,14 @@ class SearchPage extends HookConsumerWidget {
children: [
SearchRowTitle(
title: "search_page_people".tr(),
onViewAllPressed: () => AutoRouter.of(context).push(
const AllPeopleRoute(),
),
onViewAllPressed: () =>
context.autoPush(const AllPeopleRoute()),
),
buildPeople(),
SearchRowTitle(
title: "search_page_places".tr(),
onViewAllPressed: () => AutoRouter.of(context).push(
const CuratedLocationRoute(),
),
onViewAllPressed: () =>
context.autoPush(const CuratedLocationRoute()),
top: 0,
),
const SizedBox(height: 10.0),
@ -167,7 +164,7 @@ class SearchPage extends HookConsumerWidget {
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
'search_page_your_activity',
style: Theme.of(context).textTheme.titleSmall,
style: context.textTheme.titleSmall,
).tr(),
),
ListTile(
@ -178,9 +175,7 @@ class SearchPage extends HookConsumerWidget {
title:
Text('search_page_favorites', style: categoryTitleStyle)
.tr(),
onTap: () => AutoRouter.of(context).push(
const FavoritesRoute(),
),
onTap: () => context.autoPush(const FavoritesRoute()),
),
const CategoryDivider(),
ListTile(
@ -192,16 +187,14 @@ class SearchPage extends HookConsumerWidget {
'search_page_recently_added',
style: categoryTitleStyle,
).tr(),
onTap: () => AutoRouter.of(context).push(
const RecentlyAddedRoute(),
),
onTap: () => context.autoPush(const RecentlyAddedRoute()),
),
const SizedBox(height: 24.0),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
'search_page_categories',
style: Theme.of(context).textTheme.titleSmall,
style: context.textTheme.titleSmall,
).tr(),
),
ListTile(
@ -210,7 +203,7 @@ class SearchPage extends HookConsumerWidget {
Icons.screenshot,
color: categoryIconColor,
),
onTap: () => AutoRouter.of(context).push(
onTap: () => context.autoPush(
SearchResultRoute(
searchTerm: 'screenshots',
),
@ -224,7 +217,7 @@ class SearchPage extends HookConsumerWidget {
Icons.photo_camera_front_outlined,
color: categoryIconColor,
),
onTap: () => AutoRouter.of(context).push(
onTap: () => context.autoPush(
SearchResultRoute(
searchTerm: 'selfies',
),
@ -238,9 +231,7 @@ class SearchPage extends HookConsumerWidget {
Icons.play_circle_outline,
color: categoryIconColor,
),
onTap: () => AutoRouter.of(context).push(
const AllVideosRoute(),
),
onTap: () => context.autoPush(const AllVideosRoute()),
),
const CategoryDivider(),
ListTile(
@ -252,9 +243,7 @@ class SearchPage extends HookConsumerWidget {
Icons.motion_photos_on_outlined,
color: categoryIconColor,
),
onTap: () => AutoRouter.of(context).push(
const AllMotionPhotosRoute(),
),
onTap: () => context.autoPush(const AllMotionPhotosRoute()),
),
],
),

16
mobile/lib/modules/search/views/search_result_page.dart
View file

@ -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/home/ui/asset_grid/immich_asset_grid.dart';
import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
import 'package:immich_mobile/modules/search/providers/search_result_page.provider.dart';
@ -38,7 +38,6 @@ class SearchResultPage extends HookConsumerWidget {
final searchTermController = useTextEditingController(text: "");
final isNewSearch = useState(false);
final currentSearchTerm = useState(searchTerm);
final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
final isDisplayDateGroup = useState(true);
FocusNode? searchFocusNode;
@ -112,8 +111,9 @@ class SearchResultPage extends HookConsumerWidget {
hintStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color:
isDarkTheme ? Colors.grey[500] : Colors.black.withOpacity(0.5),
color: context.isDarkTheme
? Colors.grey[500]
: Colors.black.withOpacity(0.5),
),
),
);
@ -130,7 +130,7 @@ class SearchResultPage extends HookConsumerWidget {
Text(
currentSearchTerm.value,
style: TextStyle(
color: Theme.of(context).primaryColor,
color: context.primaryColor,
fontSize: 13,
fontWeight: FontWeight.bold,
),
@ -138,12 +138,12 @@ class SearchResultPage extends HookConsumerWidget {
),
Icon(
Icons.close_rounded,
color: Theme.of(context).primaryColor,
color: context.primaryColor,
size: 20,
),
],
),
backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
backgroundColor: context.primaryColor.withAlpha(50),
);
}
@ -185,7 +185,7 @@ class SearchResultPage extends HookConsumerWidget {
if (isNewSearch.value) {
isNewSearch.value = false;
} else {
AutoRouter.of(context).pop(true);
context.autoPop(true);
}
},
icon: const Icon(Icons.arrow_back_ios_rounded),