레시피 북: 즐겨찾기 탭

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 32번째.

좋아하는 요리를 다시 찾을 수 있어야 하트가 유용합니다. 두 번째 탭인 Favorites에는 빨간 하트가 표시된 요리만 보입니다.

두 탭에는 모양이 같은 요리 목록이 표시되므로, 표시할 요리를 인수로 받는 메서드로 목록을 한 번만 작성하세요.

Widget recipeList(List<Recipe> shown) {
  return ListView.builder(...);
}

즐겨찾기는 where favorite가 true인 요리입니다. 탭이 모든 setState 이후 올바르게 표시되도록 build의 맨 위에서 즐겨찾기를 계산하세요. 그러면 탭에 따라 본문에 recipeList(recipes) 또는 recipeList(favorites)가 표시됩니다.

챌린지

어려움

레시피 북에 탭을 추가하세요:

ListView.builder를 shown을 나열하는 Widget recipeList(List<Recipe> shown) 메서드로 옮기세요
두 개의 탭이 있는 NavigationBar를 추가하세요: Recipes(선택되지 않았을 때 Icons.menu_book_outlined, 선택되었을 때 Icons.menu_book)와 Favorites(선택되지 않았을 때 Icons.star_border, 선택되었을 때 Icons.star). 탭의 index는 상태에 저장하세요
Recipes 탭에는 모든 레시피를 표시하고, Favorites 탭에는 즐겨찾기만 표시하세요

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<Recipe> recipes = [
    Recipe(name: 'Pancakes', minutes: 20, ingredients: ['Flour', 'Eggs', 'Milk', 'Butter']),
    Recipe(name: 'Tomato Soup', minutes: 35, ingredients: ['Tomatoes', 'Onion', 'Garlic', 'Olive oil']),
    Recipe(name: 'Guacamole', minutes: 10, ingredients: ['Avocados', 'Lime', 'Onion', 'Salt']),
    Recipe(name: 'Fried Rice', minutes: 25, ingredients: ['Rice', 'Eggs', 'Peas', 'Soy sauce']),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Recipe Book')),
      body: ListView.builder(
        itemCount: recipes.length,
        itemBuilder: (context, index) {
          final Recipe recipe = recipes[index];
          return ListTile(
            leading: const Icon(Icons.restaurant_menu),
            title: Text(recipe.name),
            subtitle: Text('${recipe.minutes} min'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => RecipeScreen(recipe: recipe)),
              );
            },
            trailing: IconButton(
              icon: Icon(
                recipe.favorite ? Icons.favorite : Icons.favorite_border,
                color: recipe.favorite ? Colors.red : null,
              ),
              onPressed: () {
                setState(() {
                  recipe.favorite = !recipe.favorite;
                });
              },
            ),
          );
        },
      ),
    );
  }
}

class RecipeScreen extends StatelessWidget {
  const RecipeScreen({super.key, required this.recipe});

  final Recipe recipe;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(recipe.name)),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 24),
          const Text('Ingredients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          for (String ingredient in recipe.ingredients)
            ListTile(
              leading: const Icon(Icons.check_circle_outline),
              title: Text(ingredient),
            ),
        ],
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;
  bool favorite = false;

  Recipe({required this.name, required this.minutes, required this.ingredients});
}