レシピブック：レシピ一覧

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 28/33。

このセクションで学んだことを使って、アプリ全体を作る時間です。レシピブックを作りましょう。レシピの一覧、材料を表示する各レシピの画面、お気に入りのタブがあります。

まずはデータから始めましょう。アプリにはすでに、名前、調理にかかる分数、材料の一覧を持つRecipeクラスと、buildの先頭に4つのレシピがあります。各レシピのingredientsはList<String>です。フィールドもリストにできます。

最初の画面は一覧です。レシピは数百件に増える可能性があるので、レシピごとに1つのListTileを使い、ListView.builderで作りましょう。

チャレンジ

簡単

No recipes yetのテキストを、レシピのリストに置き換えます。

レシピごとに1つの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});
}