feat: refactor recipe detail screen to use CustomScrollView and SliverAppBar for improved layout

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(
+        data: (recipe) => CustomScrollView(
-          children: [
+          slivers: [
-            if (recipe.imageUrl != null)
+            SliverAppBar(
-              SizedBox(
+              expandedHeight: MediaQuery.of(context).size.height * 2 / 3,
-                height: MediaQuery.of(context).size.height * 2 / 3,
+              flexibleSpace: FlexibleSpaceBar(
-                child: Image.network(
+                background: recipe.imageUrl != null
+                  ? Image.network(
                       recipe.imageUrl!,
                       fit: BoxFit.cover,
-                  width: double.infinity,
+                    )
-                  alignment: Alignment.topCenter,
+                  : Container(color: Colors.grey[200]),
+              ),
+              pinned: true,
+              floating: false,
+            ),
+            SliverToBoxAdapter(
+              child: Container(
+                decoration: const BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(20),
+                    topRight: Radius.circular(20),
                   ),
                 ),
-            SingleChildScrollView(
+                child: _RecipeBody(recipe: recipe),
-              child: Column(
-                children: [
-                  SizedBox(height: MediaQuery.of(context).size.height * 2 / 3),
-                  _RecipeBody(recipe: recipe),
-                ],
               ),
             ),
           ],