Im letzten Abschnitt haben Sie Ihre App schon etwas umgestylt, aber Sie zeigt aktuell immer noch die Demo mit der anklickbaren Schaltfläche und dem Zähler an. Das Löschen dieses Demo-Zählers ist der nächste Schritt. Ersetzen Sie die Codezeilen ab der Zeile mit class _MyHomePageState extends State<MyHomePage> {  bis zum Schluss des Flutter-Projekts durch diesen Code:

                    
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 1
    return Scaffold(
      // 2
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // 3
      body: SafeArea(
        // TODO: child: Container() ersetzen
        // 4
        child: Container(),
      ),
    );
  }

  // TODO: Methode buildRecipeCard() hinzufügen
}

                

Diese Codezeilen könnte man folgendermassen übersetzen:

1. 1. 1. Das Scaffold-Widget kann man als Grundgerüst für Apps ansehen. Es wird verwendet, um die grundlegende Layoutstruktur einer App zu implementieren.
      2. Die AppBar (entspricht dem grauen Balken) erhält den Titel von dem MyHomePage-Widget  aus dem letzten Abschnitt.
      3. Im body legt man eine SafeArea fest, die sicherstellt, dass der Inhalt der App nicht zu nahe am Bildschirmrand ist.
      4. SafeArea hat als untergeordnetes Widget ein leeres Container-Widget.

Wenn Sie jetzt nochmals einen Hot-Reload ausführen, sollte Ihre App so aussehen:

Klasse für Rezepte erstellen

Die fertige App sollte eine Liste mit Rezepten besitzen, durch die Benutzer:innen scrollen können. Bevor Sie die Rezepte anzeigen können, benötigen Sie jedoch eine zusätzliche Klasse. Erstellen Sie dazu in Ihrem lib Ordner eine neue Datei mit dem Namen recipe.dart.

1. Kicken Sie in Ihrem Projekt auf den lib Ordner (1).
2. Wählen Sie das Symbol zum Erstellen einer neuen Datei aus (2).
3. Benennen Sie die neue Datei recipe.dart (3).
   
4. Fügen Sie diesen Code in recipe.dart ein:
   
   Code kopieren Kopiert Use a different Browser

                       
   class Recipe {
     String label;
     String imageUrl;
     // TODO: Portionen und Zutaten einfügen
   
     Recipe(
       this.label,
       this.imageUrl,
     );
     // TODO; List<Recipe> einfügen
   }
   
   // TODO: Klasse Ingredient() einfügen
   
                   

Die Klasse Recipe besitzt zu diesem Zeitpunkt die Attribute label und imageURL, welche wir in Kürze gleich für die Rezeptliste verwenden werden. Beim Programmcode Recipe(this.label, this.imageUrl,); handelt es sich um eine spezielle Methode, die man als Konstruktor bezeichnet.

                    
simba = Cat("Simba", "orange-white", 10);
oscar = Cat("Oscar", "black", 2);

                

                    
class Cat {
  String name;
  String color;
  int age;

  Cat(
    this.name,
    this.color,
    this.age,
  );

  meow() {
    // hier wäre der Code, damit das Katzen-Objekt miaut
  }

  eat() {
    // hier wäre der Code, damit das Katzen-Objekt frisst
  }
}

                

Rezeptliste hartkodieren

In einer vollwertigen Rezepte-App würden wir die Rezepte entweder aus einer lokalen Datenbank oder einer JSON-basierten API laden. Der Einfachheit halber werden Sie bei Ihrer App jedoch hartkodierte Daten verwenden. Hartkodiert bedeutet, dass Sie die Daten als Programmierer:in manuell in den Quelltext einfügen. Fügen Sie die folgende Liste zur Klasse Recipe hinzu, indem Sie den Kommentar // TODO; List<Recipe> einfügen durch diesen Code ersetzen:

                    
  static List<Recipe> samples = [
    Recipe(
      'Green Power-Suppe',
      'assets/green-power.jpg',
    ),
    Recipe(
      'Club Sandwich',
      'assets/club-sandwich.jpg',
    ),
    Recipe(
      'Parmigiana',
      'assets/parmigiana.jpg',
    ),
    Recipe(
      'Taboule',
      'assets/taboule.jpg',
    ),
    Recipe(
      'Tagliatelle Alfredo',
      'assets/tagliatelle-alfredo.jpg',
    ),
    Recipe(
      'Vegi Stroganoff',
      'assets/vegi-stroganoff.jpg',
    ),
  ];

                

Rezeptbilder hinzufügen

Sie haben eine Liste mit Bildern erstellt, aber noch keine Bilder in Ihrem Projektordner.

Laden Sie die Bilder hier als Zip-Archiv herunter.

Um die Bilder zu Ihrem Flutter-Projekt hinzuzufügen, entpacken Sie das Zip-Archiv und kopieren Sie den entpackten assets Ordner (über Drag-and-Drop) auf die oberste Ebene Ihres Projekts. (Hinweis: Windows-User:innen kopieren nur den inneren assets Ordner, welcher nur die Bilder enthält.)

Wenn Sie fertig sind, sollte sich der assets Ordner auf derselben Ebene wie der lib Ordner befinden (1). Damit Ihre Flutter-App die Bilder finden kann, müssen Sie noch eine Anpassung in der pubspec.yaml Datei vornehmen (2).

Scrollen Sie in der pubspec.yaml Datei bis zum Teil wo # To add assets to your application, add an assets section, like this: steht und fügen sie dort diesen Code ein:

                    
  assets:
    - assets/

                

Bitte geben Sie darauf acht, dass die Einrückungen korrekt sind. Der Code für assets muss die gleiche Einrückungstiefe wie uses-material-design: true besitzen. Die rote Linie in der Abbildung dient zur Veranschaulichung der Einrückungstiefe.