Wechseln Sie zurück in ihre main.dart Datei und fügen Sie nach import 'package:flutter/material.dart'; diese Zeile Code ein:

                    
import 'recipe.dart';

                

Dieser Code ist nötig, damit Sie auch von Ihrer main.dart Datei auf die Klasse Recipe zugreifen können.

Scrollen Sie anschliessend in der main.dart Datei bis zur Klasse class _MyHomePageState extends State<MyHomePage>
und ersetzen Sie dort unter SafeArea den Kommentar // TODO: child: Container() ersetzen und die zwei weiteren Zeilen mit // 4 und child: Container(), mit diesem Code:

                    
      // 1
        child: ListView.builder(
          // 2
          itemCount: Recipe.samples.length,
          // 3
          itemBuilder: (BuildContext context, int index) {
            // 4
            // TODO: aktualisieren, damit Recipe card ausgegeben wird
            return Text(Recipe.samples[index].label);
          },
        ),

                

Dieser Code macht das folgende:

1. Mit einem ListView-Widget wird eine Liste erstellt.
2. Der Parameter itemCount bestimmt die Anzahl an Zeilen, welche die Liste besitzt. In unserem Fall entspricht das der Anzahl an Objekten in der Liste Recipe.samples.
3. itemBuilder erstellt den Widget-Baum für jede Zeile aus der Liste.
4. Das Text-Widget zeigt den Namen des Rezepts an.

Nach einem Hot-Reload sollten Sie die folgende Liste sehen:

Liste in ein Card-Widget integrieren

Ihre App kann jetzt schon Rezepttitel darstellen, aber man kann dieses Zwischenprodukt kaum als eine App bezeichnen. Damit Ihre Benutzer:innen später auch Lust darauf haben, Ihre Rezepte zu kochen, müssen Sie Rezeptbilder hinzufügen.

Dafür verwenden Sie ein Card-Widget. In Material Design definieren Card-Widgets einen Bereich der Benutzeroberfläche, wo man verschiedene Informationen unterbringen kann. In einer Musik-App kann ein Card-Widget z.B. Beschriftungen für den Titel, den Interpreten und das Veröffentlichungsdatum eines Albums sowie das Albumcover enthalten.

Ihr Card-Widget wird den Rezepttitel und das Bild des Rezepts darstellen. Der Widget-Baum Ihres Card-Widgets wird die folgende Struktur haben:

Scrollen Sie in der main.dart Datei bis zur Zeile wo der Kommentar // TODO: Methode buildRecipeCard() hier hinzufügen steht und ersetzen Sie diesen Kommentar mit diesem Code:

                    
  Widget buildRecipeCard(Recipe recipe) {
    // 1
    return Card(
      // 2
      child: Column(
        // 3
        children: [
          // 4
          Image(image: AssetImage(recipe.imageUrl)),
          // 5
          Text(recipe.label),
        ],
      ),
    );
  }

                

Mit diesem Code erstellen Sie ihr Card-Widget.

1. 1. Über die Methode buildRecipeCard() geben Sie ein Card-Widget zurück.
   2. Als Kind besitzt das Card-Widget ein Column-Widget. Column-Widgets werden für vertikale Layouts verwendet. In Abschnitt 3 werden Sie noch mehr über Layout-Widgets erfahren.
   3. Das Column-Widget besitzt zwei Kinder als Widgets.
   4. Das erste Kind ist ein Image-Widget. AssetImage gibt an, dass das Bild aus dem in pubspec.yaml definierten assets Ordner geladen werden soll.
   5. Das zweite Kind ist ein Text-Widget. Es erhält den Text aus der Variable recipe.label

Jetzt müssen Sie in der Klasse _MyHomePageState nur noch den Kommentar // TODO: aktualisieren, damit Recipe card ausgegeben wird inklusive der Zeile return Text(Recipe.samples[index].label); durch folgenden Code ersetzen und einen Hot-Reload ausführen.

                    
// TODO: GestureDetector hinzufügen
return buildRecipeCard(Recipe.samples[index]);

                

Damit wird für jedes Rezept aus der Rezeptliste ein benutzerdefiniertes Card-Widget erstellt. Et voilà, Ihre App sieht schon nach etwas mehr aus: