Um die Seite mit den Rezeptdetails zu vervollständigen, ergänzen wir die Rezeptklasse mit einer Liste für die Zutaten. Öffnen sie Ihre recipe.dart Datei und ersetzen Sie den Kommentar // TODO: Klasse Ingredient() einfügen mit dieser Klasse:

                    
class Ingredient {
  double quantity;
  String measure;
  String name;

  Ingredient(
    this.quantity,
    this.measure,
    this.name,
  );
}

                

Diese Klasse verwenden wir als Bauplan für unsere Zutaten. Die Klasse besitzt als Eigenschaften eine Mengenangabe quantity, eine Masseinheit measure und den Namen der Zutat name. Ersetzen Sie oben in der Klasse Recipe den Kommentar // TODO: Hier Portionen und Zutaten einfügen durch folgendes:

                    
int servings;
List<Ingredient> ingredients;

                

Durch diesen Code wird die Klasse Recipe um zwei weitere Eigenschaften ergänzt. Mit servings kann man festhalten, wieviele Portionen das Rezept ergibt und ingredients ist eine Liste, welche Ingredient-Objekte aufnehmen kann. Damit Sie von diesen neuen Eigenschaften Gebrauch machen können, müssen Sie noch den Recipe Konstruktor von:

                    
Recipe(
  this.label,
  this.imageUrl,
);

                

zu:

                    
Recipe(
  this.label,
  this.imageUrl,
  this.servings,
  this.ingredients,
);


                

anpassen.

Anschliessend sehen Sie in Ihrem Code bei der samples Liste viele rot unterstrichene Zeilen, da dort die Werte für die Variablen servings und ingredients noch fehlen. Das können Sie beheben, indem Sie den ganzen samples Teil durch diesen Code ersetzen:

                    
  static List<Recipe> samples = [
    Recipe('Green Power-Suppe', 'assets/green-power.jpg', 4, [
      Ingredient(1, 'EL', 'Kokosöl'),
      Ingredient(1, '', 'Zwiebel'),
      Ingredient(1, 'cm', 'Ingwer'),
      Ingredient(300, 'g', 'Jungspinat'),
      Ingredient(6, 'dl', 'Gemüsebouillon'),
      Ingredient(2, 'dl', 'Kokosmilch'),
    ]),
    Recipe('Club Sandwich', 'assets/club-sandwich.jpg', 4, [
      Ingredient(8, 'Tranchen', 'Bratspeck'),
      Ingredient(2, '', 'Pouletbrüstli'),
      Ingredient(0.5, 'TL', 'Paprika'),
      Ingredient(0.5, 'TL', 'Salz'),
      Ingredient(4, '', 'Eier'),
      Ingredient(12, 'Scheiben', 'Toastbrot'),
      Ingredient(125, 'g', 'Frischkäse'),
      Ingredient(2, 'EL', 'grobkörniger Senf'),
      Ingredient(2, '', 'Tomaten'),
      Ingredient(0.5, '', 'Eisbergsalat'),
    ]),
    Recipe('Parmigiana', 'assets/parmigiana.jpg', 4, [
      Ingredient(1, 'Flasche', 'Tomatensugo'),
      Ingredient(1, 'kg', 'Auberginen'),
      Ingredient(5, 'EL', 'Olivenöl'),
      Ingredient(1, 'TL', 'Salz'),
      Ingredient(250, 'g', 'Mozzarella'),
      Ingredient(1, 'Bund', 'Basilikum'),
    ]),
    Recipe('Taboule', 'assets/taboule.jpg', 4, [
      Ingredient(1, 'TL', 'Olivenöl'),
      Ingredient(50, 'g', 'Bulgur'),
      Ingredient(1.5, 'dl', 'Wasser'),
      Ingredient(50, 'g', 'Granatapfelkerne'),
      Ingredient(100, 'g', 'Stangensellerie'),
      Ingredient(0.5, '', 'Gurke'),
      Ingredient(1, 'Bund', 'Petersilie'),
      Ingredient(1, 'Bund', 'Pfefferminze'),
      Ingredient(1, '', 'Bio-Zitrone'),
    ]),
    Recipe('Tagliatelle Alfredo', 'assets/tagliatelle-alfredo.jpg', 2, [
      Ingredient(300, 'g', 'Tagliatelle'),
      Ingredient(60, 'g', 'Butter'),
      Ingredient(60, 'g', 'Parmesan'),
    ]),
    Recipe('Vegi Stroganoff', 'assets/vegi-stroganoff.jpg', 4, [
      Ingredient(400, 'g', 'Cornatur Geschnetzeltes'),
      Ingredient(1, 'EL', 'Olivenöl'),
      Ingredient(1, 'EL', 'Paprikapulver'),
      Ingredient(1, '', 'Peperoni'),
      Ingredient(100, 'g', 'Cornichons'),
      Ingredient(100, 'g', 'Champignons'),
      Ingredient(0.5, 'Bund', 'Thymian'),
      Ingredient(2, 'dl', 'Halbrahm'),
      Ingredient(1, 'dl', 'Milch'),
      Ingredient(0.25, 'TL', 'Salz'),
    ]),
  ];

                

Wenn Sie jetzt einen Hot-Reload durchführen, sind die Zutaten noch nicht sichtbar, aber die Flutter-App sollte erfolgreich kompiliert werden.

Zutaten anzeigen

Jetzt müssen Sie noch ein Widget integrieren, damit die Zutaten angezeigt werden. Wechseln Sie in die recipe_detail.dart Datei und ersetzen Sie den Kommentar // TODO: Expanded-Widget hinzufügen durch:

                    
// 1
Expanded(
  // 2
  child: ListView.builder(
    padding: const EdgeInsets.all(7.0),
    itemCount: widget.recipe.ingredients.length,
    itemBuilder: (BuildContext context, int index) {
      final ingredient = widget.recipe.ingredients[index];
      // 3
      // TODO: ingredient.quantity hinzufügen
      return Text(
          '${ingredient.quantity} ${ingredient.measure} ${ingredient.name}');
    },
  ),
),

                

Dieser Code fügt diese Dinge hinzu:

1. 1. Ein Expanded-Widget, welches den Platz in einem Column-Widget ausfüllt. So kann die Zutatenliste den Platz einnehmen, der nicht bereits von anderen Widgets ausgefüllt wird.
   2. Ein ListView-Widget mit einer Zeile pro Zutat.
   3. Ein Text-Widget, welches während der Laufzeit der App die Attribute aus der samples Liste einsetzt. Der ${Ausdruck} dient als Platzhalter.

Wenn Sie wieder einen Hot-Restart durchführen und auf ein Rezept klicken, sind jetzt auch die Zutaten ersichtlich.

Slider für Portionenmenge hinzufügen

Aktuell zeigt die App die Zutaten nur für die hartkodierte Portionenmenge an. Wäre es nicht toll, wenn Sie die gewünschte Menge ändern könnten und sich die Menge an Zutaten dann automatisch anpasst?

Dafür müssen Sie ein Slider-Widget hinzufügen, mit dem Benutzer:innen die Anzahl an Portionen anpassen können.

Wechseln Sie zur recipe_detail.dart Datei und ersetzen Sie den Kommentar // TODO: _sliderVal hinzufügen durch:

                    
int _sliderVal = 1;

                

Suchen Sie als nächstes den Kommentar // TODO: Slider() hinzufügen und ersetzen Sie diesen Kommentar mit:

                    
Slider(
  // 1
  min: 1,
  max: 10,
  divisions: 9,
  // 2
  label: '${_sliderVal * widget.recipe.servings} Portionen',
  // 3
  value: _sliderVal.toDouble(),
  // 4
  onChanged: (newValue) {
    setState(() {
      _sliderVal = newValue.round();
    });
  },
  // 5
  activeColor: Colors.green,
  inactiveColor: Colors.black,
),

                

Das Slider-Widget erzeugt einen Schieberegler, mit dem sich Werte verändern lassen. So funktioniert der Code im Detail:

1. Die Parameter min, max und divisions werden benötigt, um zu definieren, wie sich der Schieberegler bewegt. In diesem Fall kann der Schieberegler nur die Werte 1, 2, 3, 4, 5, 6, 7, 8, 9 oder 10 annehmen.
2. label wird aktualisiert, wenn sich die Variable _sliderVal ändert und zeigt eine neue Portionenmenge an.
3. Das Slider-Widget arbeitet mit dem Datentyp double, daher muss die int-Variable konvertiert werden.
4. Wenn der Schieberegler bewegt wird, wird die Methode round() verwendet, um den Wert des Schiebereglers als double zurück in einen int-Wert umzuwandeln. Dieser Wert wird in der Variable _sliderVal gespeichert.
5. Dadurch werden die Farben des Slider-Widgets etwas hübscher gemacht.

Führen Sie einen Hot-Reload durch und spielen Sie mit dem Schieberegler. Beobachten Sie, wie sich der Wert auf dem runden Knopf ändert.

Zutatenmenge aktualisieren

Es ist nett, den geänderten Wert auf dem runden Knopf zu sehen, aber im Moment wirkt sich dies noch nicht auf die Zutaten im Rezept aus. Dazu müssen Sie im Expanded-Widget lediglich die Rückgabeanweisung für Zutaten so ändern, dass sie den aktuellen Wert von _sliderVal als Faktor für jede Zutat zurückgibt.

Suchen Sie in der Datei recipe_detail.dart nach dem Kommentar // TODO: ingredient.quantity hinzufügen und ersetzen Sie diesen Kommentar inklusive return Text('${ingredient.quantity}${ingredient.measure}${ingredient.name}'); durch:

                    
return Text('${ingredient.quantity * _sliderVal} '
                      '${ingredient.measure} '
                      '${ingredient.name}');

                

Nach einem weiteren Hot-Reload sehen Sie, dass sich die Zutaten des Rezepts ändern, wenn Sie den Schieberegler bewegen.

Gratulation! Sie haben jetzt eine interaktive Rezepte-App erstellt, die sowohl auf iOS als auch Android läuft.