feat: refactor recipe detail screen to use CustomScrollView and SliverAppBar for improved layout
This commit is contained in:
@@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user