레시피 북: 재료

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

레시피 화면에는 여러분이 찾으러 온 재료가 필요합니다. 각 레시피에는 이미 ingredients 목록에 재료가 들어 있습니다.

화면도 목록으로 구성됩니다. 시간, 제목, 그리고 재료마다 한 줄씩 표시됩니다. padding:이 있는 ListView는 모든 항목을 담으면서도 레시피에 재료가 스무 개 있더라도 스크롤할 수 있습니다. recipe.ingredients에 대한 컬렉션 for를 사용해 각 행을 만듭니다.

굵은 글꼴과 더 큰 글자 크기로 Ingredients를 제목처럼 표시하면 목록을 한눈에 찾을 수 있습니다.

챌린지

쉬움

레시피 화면에 재료를 표시하세요. 본문을 16픽셀의 패딩이 있는 ListView로 만들고, 다음 항목을 담으세요:

이전과 같은 Ready in 텍스트
높이가 24인 SizedBox 다음에 크기가 20이고 굵게 표시된 제목 Ingredients
재료마다 하나씩 ListTile을 표시하고, leading:에 Icons.check_circle_outline을 지정하세요

직접 해보기

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'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => RecipeScreen(recipe: recipe)),
              );
            },
          );
        },
      ),
    );
  }
}

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: Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
      ),
    );
  }
}

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

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