190. Swapping The "Favorite Button" Based On Provider State (State부분 마지막 강의)

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) 을 통해 아이콘에 구현한다.