코딩강의/meals_app(플러터-유데미)
190. Swapping The "Favorite Button" Based On Provider State (State부분 마지막 강의)
김마드
2023. 11. 5. 12:57
1. 즐겨찾기 버튼 (별 모양)에 상태값에 따라 바꿔보자.
- meal_detail.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:meals/models/meal.dart';
import 'package:meals/providers/favorites_provider.dart';
class MealDetailsScreen extends ConsumerWidget {
const MealDetailsScreen({
super.key,
required this.meal,
});
final Meal meal;
@override
Widget build(BuildContext context, WidgetRef ref) {
final favoriteMeals = ref.watch(favoriteMealsProvider);
final isFavorite = 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 added as a favorite.' : 'Meal removed.'),
),
);
},
icon: Icon(isFavorite ? Icons.star : Icons.star_border),
)
]),
body: SingleChildScrollView(
child: Column(
children: [
Image.network(
meal.imageUrl,
height: 300,
width: double.infinity,
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: 24),
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,
),
),
),
],
),
));
}
}
1) final favoriteMeals = ref.watch(favoriteMealsProvider);
final isFavorite = favoriteMeals.contains(meal);
를 통해 현재 FavoriteMeals의 리스트값에 어떤게 들어가 있는지 값을 받아오고, 해당화면의 meal이 포함되어있다면 true, 없다면 false를 isFavorite에 담는다.
그리고 icon: Icon(isFavorite ? Icons.star : Icons.star_border) 을 통해 아이콘에 구현한다.