Rezeptbuch: Die Rezeptliste

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

Es ist an der Zeit, mit dem, was du in diesem Abschnitt gelernt hast, eine ganze App zu bauen: ein Rezeptbuch. Es enthält eine Liste mit Rezepten, einen Bildschirm für jedes Rezept mit seinen Zutaten und einen Tab mit deinen Favoriten.

Beginne mit den Daten. Die App hat bereits eine Recipe-Klasse mit einem Namen, der Zubereitungszeit in Minuten und einer Zutatenliste sowie vier Rezepten am Anfang von build. Die ingredients jedes Rezepts ist ein List<String>: Auch ein Feld kann eine Liste sein.

Der erste Bildschirm ist die Liste. Sie kann auf Hunderte von Rezepten anwachsen, also erstelle sie mit ListView.builder, mit einem ListTile pro Rezept.

Aufgabe

Einfach

Ersetze den Text No recipes yet durch die Rezeptliste:

eine ListView.builder mit einem ListTile pro Rezept
jede Kachel hat Icons.restaurant_menu als leading:, den Namen des Rezepts als Titel und 20 min (mit der Minutenzahl des Rezepts) als Untertitel

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