Buku Resep: Layar Resep

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 29 dari 33.

Daftar nama adalah awal yang baik, tetapi buku resep digunakan untuk memasak. Ketuk resep untuk membuka layarnya sendiri.

Layar itu adalah class widget baru, RecipeScreen, yang menerima resep melalui konstruktornya. Satu class dapat menampilkan resep apa pun: tile yang kamu ketuk menentukan resep yang ditampilkan dengan meneruskan recipe saat membuka layar.

App bar-nya menampilkan nama resep dan mendapatkan panah kembali secara otomatis karena daftar berada di bawahnya dalam stack.

Tantangan

Sedang

Buat setiap resep membuka layarnya sendiri:

tulis widget RecipeScreen dengan field final Recipe recipe; dan parameter required this.recipe
app bar-nya menampilkan nama resep, dan body-nya menampilkan Ready in 20 minutes (dengan jumlah menit resep) dalam ukuran 18, dengan padding 16 piksel
mengetuk tile akan membuka RecipeScreen(recipe: recipe)

Coba sendiri

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

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

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