Merge pull request #55 from simonoppowa/add-image-fullscreen

feat(meal-detail): add meal full screen image view
simonoppowa · Mar 2, 2024 · 7fc4fd1 · 7fc4fd1
2 parents a702521 + c729fea
commit 7fc4fd1
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 10 deletions.
diff --git a/lib/core/presentation/widgets/image_full_screen.dart b/lib/core/presentation/widgets/image_full_screen.dart
@@ -0,0 +1,58 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:opennutritracker/core/utils/locator.dart';
+import 'package:opennutritracker/features/meal_detail/presentation/widgets/meal_placeholder.dart';
+
+class ImageFullScreen extends StatefulWidget {
+
+  static const fullScreenHeroTag = 'fullScreenTag';
+
+  const ImageFullScreen({super.key});
+
+  @override
+  State<ImageFullScreen> createState() => _ImageFullScreenState();
+}
+
+class _ImageFullScreenState extends State<ImageFullScreen> {
+  late String imageUrl;
+
+  @override
+  void didChangeDependencies() {
+    final args =
+        ModalRoute.of(context)?.settings.arguments as ImageFullScreenArguments;
+    imageUrl = args.imageUrl;
+    super.didChangeDependencies();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        elevation: 0,
+        backgroundColor: Colors.transparent,
+      ),
+      body: InteractiveViewer(
+        child: Hero(
+          tag: ImageFullScreen.fullScreenHeroTag,
+          child: CachedNetworkImage(
+            width: double.infinity,
+            height: double.infinity,
+            cacheManager: locator<CacheManager>(),
+            imageUrl: imageUrl,
+            fit: BoxFit.cover,
+            placeholder: (context, string) => const MealPlaceholder(),
+            errorWidget: (context, url, error) => const MealPlaceholder(),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ImageFullScreenArguments {
+  final String imageUrl;
+
+  ImageFullScreenArguments(this.imageUrl);
+}
diff --git a/lib/core/utils/navigation_options.dart b/lib/core/utils/navigation_options.dart
@@ -8,4 +8,5 @@ class NavigationOptions {
   static const editMealRoute = "editMeal";
   static const addActivityRoute = "addActivity";
   static const activityDetailRoute = "activityDetail";
+  static const imageFullScreenRoute = "imageFullScreen";
 }
diff --git a/lib/features/meal_detail/meal_detail_screen.dart b/lib/features/meal_detail/meal_detail_screen.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:logging/logging.dart';
 import 'package:opennutritracker/core/domain/entity/intake_type_entity.dart';
+import 'package:opennutritracker/core/presentation/widgets/image_full_screen.dart';
 import 'package:opennutritracker/core/utils/locator.dart';
 import 'package:opennutritracker/core/utils/navigation_options.dart';
 import 'package:opennutritracker/features/add_meal/domain/entity/meal_entity.dart';
@@ -114,15 +115,26 @@ class _MealDetailScreenState extends State<MealDetailScreen> {
             Center(
               child: ClipRRect(
                 borderRadius: BorderRadius.circular(80),
-                child: CachedNetworkImage(
-                  width: 250,
-                  height: 250,
-                  cacheManager: locator<CacheManager>(),
-                  imageUrl: meal.mainImageUrl ?? "",
-                  fit: BoxFit.cover,
-                  placeholder: (context, string) => const MealPlaceholder(),
-                  errorWidget: (context, url, error) => const MealPlaceholder(),
-                ),
+                child: GestureDetector(
+                    child: Hero(
+                      tag: ImageFullScreen.fullScreenHeroTag,
+                      child: CachedNetworkImage(
+                        width: 250,
+                        height: 250,
+                        cacheManager: locator<CacheManager>(),
+                        imageUrl: meal.mainImageUrl ?? "",
+                        fit: BoxFit.cover,
+                        placeholder: (context, string) => const MealPlaceholder(),
+                        errorWidget: (context, url, error) =>
+                            const MealPlaceholder(),
+                      ),
+                    ),
+                    onTap: () {
+                      Navigator.of(context).pushNamed(
+                          NavigationOptions.imageFullScreenRoute,
+                          arguments: ImageFullScreenArguments(
+                              meal.mainImageUrl ?? ""));
+                    }),
               ),
             ),
             Padding(

diff --git a/lib/main.dart b/lib/main.dart
@@ -6,6 +6,7 @@ import 'package:opennutritracker/core/data/data_source/user_data_source.dart';
 import 'package:opennutritracker/core/data/repository/config_repository.dart';
 import 'package:opennutritracker/core/domain/entity/app_theme_entity.dart';
 import 'package:opennutritracker/core/presentation/main_screen.dart';
+import 'package:opennutritracker/core/presentation/widgets/image_full_screen.dart';
 import 'package:opennutritracker/core/styles/color_schemes.dart';
 import 'package:opennutritracker/core/styles/fonts.dart';
 import 'package:opennutritracker/core/utils/env.dart';
@@ -105,7 +106,9 @@ class OpenNutriTrackerApp extends StatelessWidget {
         NavigationOptions.addActivityRoute: (context) =>
             const AddActivityScreen(),
         NavigationOptions.activityDetailRoute: (context) =>
-            const ActivityDetailScreen()
+            const ActivityDetailScreen(),
+        NavigationOptions.imageFullScreenRoute: (context) =>
+            const ImageFullScreen(),
       },
     );
   }