레시피 북: 레시피 화면

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

이름 목록은 시작에 불과하지만, 요리책은 요리를 위한 것입니다. 레시피를 누르면 전용 화면이 열려야 합니다.

이 화면은 새 위젯 클래스인 RecipeScreen이며, 생성자를 통해 레시피를 전달받습니다. 하나의 클래스가 어떤 레시피든 표시합니다. 어떤 레시피를 표시할지는 누른 타일이 결정하며, 화면을 전환할 때 recipe를 전달합니다.

앱 바에는 레시피 이름이 표시되고, 목록이 스택에서 그 아래에 있으므로 뒤로 가기 화살표가 자동으로 나타납니다.

챌린지

중급

각 레시피를 별도의 화면으로 열리게 만드세요:

RecipeScreen 위젯을 작성하고 final Recipe recipe; 필드와 required this.recipe 매개변수를 추가하세요
앱 바에는 레시피 이름을 표시하고, 본문에는 레시피 조리 시간에 따라 Ready in 20 minutes를 글자 크기 18로 표시하며, 패딩은 16픽셀로 설정하세요
타일을 탭하면 RecipeScreen(recipe: recipe)를 푸시하세요

직접 해보기

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 StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    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']),
    ];
    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'),
          );
        },
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;

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