Sổ tay công thức nấu ăn: Danh sách công thức

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 28 trên 33.

Đã đến lúc dùng những gì bạn học được trong phần này để xây dựng cả một ứng dụng: một cuốn sổ công thức nấu ăn. Ứng dụng có danh sách công thức, màn hình riêng cho từng công thức với các nguyên liệu và một thẻ dành cho món yêu thích.

Hãy bắt đầu với dữ liệu. Ứng dụng đã có lớp Recipe với tên, thời gian nấu và danh sách nguyên liệu, cùng bốn công thức ở đầu build. ingredients của mỗi công thức có kiểu List<String>: một trường cũng có thể là danh sách.

Màn hình đầu tiên là danh sách. Danh sách có thể lên đến hàng trăm công thức, vì vậy hãy tạo màn hình bằng ListView.builder, với một ListTile cho mỗi công thức.

Thử thách

Dễ

Thay dòng chữ No recipes yet bằng danh sách công thức nấu ăn:

một ListView.builder với một ListTile cho mỗi công thức nấu ăn
mỗi ô có Icons.restaurant_menu làm leading:, tên công thức nấu ăn làm tiêu đề và 20 min (kèm số phút nấu của công thức) làm phụ đề

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