Sổ tay công thức nấu ăn: Nguyên liệu

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 30 trên 33.

Màn hình công thức nấu ăn cần có thứ bạn đang tìm: nguyên liệu. Mỗi công thức đã có sẵn chúng trong danh sách ingredients.

Màn hình cũng trở thành một danh sách: thời gian, tiêu đề, rồi mỗi nguyên liệu có một hàng riêng. ListView có padding: chứa tất cả và vẫn cuộn được khi công thức có hai mươi nguyên liệu. Vòng lặp for trên recipe.ingredients tạo các hàng.

Chữ đậm và cỡ lớn hơn giúp Ingredients trông như tiêu đề, để mắt bạn nhận ra danh sách ngay lập tức.

Thử thách

Dễ

Hiển thị các nguyên liệu trên màn hình công thức. Tạo phần thân thành một ListView có phần đệm 16 pixel, chứa:

văn bản Ready in như trước
một SizedBox có chiều cao 24, rồi đến tiêu đề Ingredients, cỡ chữ 20 và in đậm
một ListTile cho mỗi nguyên liệu, với Icons.check_circle_outline làm leading:

Tự làm thử

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});
}