From 0cc56d65b798712b049e6be336417dbd69a31942 Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Fri, 24 Apr 2026 10:45:19 +0200
Subject: [PATCH] feat: refactor recipe detail screen to use CustomScrollView
 and SliverAppBar for improved layout

---
 .../presentation/recipe_detail_screen.dart    | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/flutter/lib/features/recipes/presentation/recipe_detail_screen.dart b/flutter/lib/features/recipes/presentation/recipe_detail_screen.dart
index 85cfe805..617fc878 100644
--- a/flutter/lib/features/recipes/presentation/recipe_detail_screen.dart
+++ b/flutter/lib/features/recipes/presentation/recipe_detail_screen.dart
@@ -45,24 +45,31 @@ class RecipeDetailScreen extends ConsumerWidget {
           message: mapErrorToUserMessage(error, context),
           onRetry: () => ref.invalidate(recipeDetailProvider(recipeId)),
         ),
-        data: (recipe) => Stack(
-          children: [
-            if (recipe.imageUrl != null)
-              SizedBox(
-                height: MediaQuery.of(context).size.height * 2 / 3,
-                child: Image.network(
-                  recipe.imageUrl!,
-                  fit: BoxFit.cover,
-                  width: double.infinity,
-                  alignment: Alignment.topCenter,
-                ),
+        data: (recipe) => CustomScrollView(
+          slivers: [
+            SliverAppBar(
+              expandedHeight: MediaQuery.of(context).size.height * 2 / 3,
+              flexibleSpace: FlexibleSpaceBar(
+                background: recipe.imageUrl != null
+                  ? Image.network(
+                      recipe.imageUrl!,
+                      fit: BoxFit.cover,
+                    )
+                  : Container(color: Colors.grey[200]),
               ),
-            SingleChildScrollView(
-              child: Column(
-                children: [
-                  SizedBox(height: MediaQuery.of(context).size.height * 2 / 3),
-                  _RecipeBody(recipe: recipe),
-                ],
+              pinned: true,
+              floating: false,
+            ),
+            SliverToBoxAdapter(
+              child: Container(
+                decoration: const BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(20),
+                    topRight: Radius.circular(20),
+                  ),
+                ),
+                child: _RecipeBody(recipe: recipe),
               ),
             ),
           ],