You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
meals/lib/screens/meal_details.dart

93 lines
3.1 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:meals/providers/favorites_provider.dart';
import '../models/Meal.dart';
class MealDetailScreen extends ConsumerWidget {
final Meal meal;
const MealDetailScreen({Key? key, required this.meal}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final favoriteMeals = ref.watch(favoriteMealsProvider);
final isIntoFavorite = favoriteMeals.contains(meal);
return Scaffold(
appBar: AppBar(
title: Text(meal.title),
actions: [
IconButton(
onPressed: () {
final wasAdded = ref
.read(favoriteMealsProvider.notifier)
.toggleMealFavoriteStatus(meal);
ScaffoldMessenger.of(context).clearSnackBars();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(wasAdded
? 'Meal has been added to your favorite.'
: 'Meal is no longer as a favorite.')));
},
icon: Icon(isIntoFavorite ? Icons.star : Icons.star_border))
],
),
body: SingleChildScrollView(
child: Column(
children: [
Image.network(
meal.imageUrl,
width: double.infinity,
height: 300,
fit: BoxFit.cover,
),
const SizedBox(
height: 14,
),
Text(
'Ingredients',
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 14,
),
for (final ingredient in meal.ingredients)
Text(
ingredient,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onBackground),
),
const SizedBox(
height: 14,
),
Text(
'Steps',
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 14,
),
for (final step in meal.steps)
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: Text(
step,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onBackground),
),
),
],
),
));
}
}