Rezeptbuch: Zutaten

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

Auf dem Rezeptbildschirm brauchst du das, weswegen du gekommen bist: die Zutaten. Jedes Rezept enthält sie bereits in seiner ingredients-Liste.

Auch der Bildschirm wird zu einer Liste: die Zeit, eine Überschrift und dann eine Zeile pro Zutat. Ein ListView mit padding: enthält sie alle und lässt sich weiterhin scrollen, wenn ein Rezept zwanzig Zutaten hat. Eine Collection-for-Schleife über recipe.ingredients erzeugt die Zeilen.

Fettdruck und eine größere Schriftgröße lassen Ingredients wie eine Überschrift wirken, sodass der Blick die Liste sofort findet.

Aufgabe

Einfach

Zeige die Zutaten auf dem Rezeptbildschirm an. Gestalte den Body als ListView mit 16 Pixeln Innenabstand, der Folgendes enthält:

den Text Ready in wie zuvor
eine SizedBox mit einer Höhe von 24, danach die Überschrift Ingredients in Schriftgröße 20 und fett
ein ListTile pro Zutat, mit Icons.check_circle_outline als leading:

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