레시피 북: 레시피 목록

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

이 섹션에서 배운 내용을 활용해 앱 전체를 만들어 볼 시간입니다. 바로 레시피 북입니다. 레시피 목록과 각 레시피의 재료를 보여 주는 화면, 그리고 즐겨찾기 탭이 있습니다.

데이터부터 시작하세요. 앱에는 이름, 조리 시간(분), 재료 목록을 가진 Recipe 클래스와 build 맨 위에 있는 네 가지 레시피가 이미 있습니다. 각 레시피의 ingredients는 List<String>입니다. 필드도 목록이 될 수 있습니다.

첫 번째 화면은 목록입니다. 레시피가 수백 개까지 늘어날 수 있으므로 레시피마다 ListTile 하나씩 표시하도록 ListView.builder를 사용해 만드세요.

챌린지

쉬움

No recipes yet 텍스트를 레시피 목록으로 바꾸세요:

레시피마다 하나의 ListTile을 표시하는 ListView.builder
각 타일의 leading:에는 Icons.restaurant_menu를 사용하고, 제목에는 레시피 이름을, 부제목에는 20 min(레시피의 조리 시간)을 표시하세요.

직접 해보기

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: const Center(
        child: Text('No recipes yet'),
      ),
    );
  }
}

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

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