Rezeptbuch: Der Rezeptbildschirm

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 29 von 33.

Eine Liste mit Namen ist ein Anfang, aber ein Kochbuch ist zum Kochen da. Wenn du auf ein Rezept tippst, sollte sich ein eigener Bildschirm dafür öffnen.

Dieser Bildschirm ist eine neue Widget-Klasse, RecipeScreen, die das Rezept über ihren Konstruktor erhält. Eine Klasse zeigt jedes beliebige Rezept an: Die angetippte Kachel bestimmt, welches, indem sie beim Öffnen des Bildschirms ihr recipe übergibt.

Die App-Leiste zeigt den Namen des Rezepts an und erhält den Zurück-Pfeil automatisch, weil die Liste im Navigationsstapel darunter liegt.

Aufgabe

Mittel

Öffne jedes Rezept auf einem eigenen Bildschirm:

Schreibe ein RecipeScreen-Widget mit einem Feld final Recipe recipe; und einem Parameter required this.recipe
Die App-Leiste zeigt den Namen des Rezepts an, und der Inhalt zeigt Ready in 20 minutes (mit der Minutenzahl des Rezepts) in Schriftgröße 18 und mit 16 Pixeln Innenabstand
Beim Antippen einer Kachel wird RecipeScreen(recipe: recipe) geöffnet

Probier es selbst

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