2.5 Seite für Rezeptdetails erstellen
Ihre RezepteApp kann jetzt schon eine Liste mit Rezepten darstellen, aber die App ist noch nicht interaktiv. Wir wollen die App jetzt so ausbauen, dass Benutzer:innen auf die Rezepte tippen können und dann die Rezeptdetails sehen.
Auf Tippen reagieren
Suchen Sie in der Klasse _MyHomePageState nach dem Kommentar // TODO: GestureDetector hinzufügen und ersetzen Sie diesen Kommentar inklusive dem Code return buildRecipeCard(Recipe.samples[index]); mit:
// 1
return GestureDetector(
// 2
onTap: () {
// 3
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
// 4
// TODO: return mit return RecipeDetail() ersetzen
return Text('Detail page');
},
),
);
},
// 5
child: buildRecipeCard(Recipe.samples[index]),
);
Hinweis: Falls der Code über Copy-Paste im Text-Editor nicht korrekt eingerückt wird, können Sie über CTRL-S (Windows) oder CMD-S (macOS) eine Korrektur der Einrückungen erzwingen.
Dieser Code führt einige neue Widgets und Konzepte ein.
- Hier wird ein GestureDetector-Widget erstellt, das, wie der Name schon sagt, Gesten erkennen kann.
- Das GestureDetector-Widget verfügt eine onTap-Funktion, die aufgerufen wird, wenn auf das Widget getippt wird.
- Das Navigator-Widget verwaltet einen Stapel von Seiten. Durch Aufrufen von push() wird eine neue Materialseite auf diesen Stapel verschoben.
- builder erstellt das Widget mit den Rezeptdetails.
- Das Kind-Widget von GestureDetector definiert den Bereich, in dem die Geste aktiv sein soll.
Nachdem Sie einen Hot-Reload durchführen kann jedes Card-Widget angetippt werden. Tippen Sie auf ein Rezept und Sie sollten eine schwarze Seite mit den Details sehen:
Erstellen einer Zielseite
Die Seite mit den Rezeptdetails ist natürlich nur ein Platzhalter. Erstellen Sie im Ordner lib eine neue Dart-Datei mit dem Titel recipe_detail.dart und fügen Sie den folgenden Code in diese Datei ein:
import 'package:flutter/material.dart';
import 'recipe.dart';
class RecipeDetail extends StatefulWidget {
final Recipe recipe;
const RecipeDetail({
Key? key,
required this.recipe,
}) : super(key: key);
@override
_RecipeDetailState createState() {
return _RecipeDetailState();
}
}
class _RecipeDetailState extends State<RecipeDetail> {
// TODO: _sliderVal hinzufügen
@override
Widget build(BuildContext context) {
// 1
return Scaffold(
appBar: AppBar(
title: Text(widget.recipe.label),
),
// 2
body: SafeArea(
// 3
child: Column(
children: [
// 4
SizedBox(
height: 300,
width: double.infinity,
child: Image(
image: AssetImage(widget.recipe.imageUrl),
),
),
// 5
const SizedBox(
height: 4,
),
// 6
Text(
widget.recipe.label,
style: const TextStyle(fontSize: 18),
),
// TODO: Expanded-Widget hinzufügen
// TODO: Slider() hinzufügen
],
),
),
);
}
}
Der Code in der Klasse RecipeDetail erstellt ein neues StatefulWidget, welches einen Konstruktor besitzt, der die anzuzeigenden Rezeptdetails entgegennehmen kann. Objekte der Klasse RecipeDetail sind StatefulWidgets, da Sie später interaktiv werden.
Die Klasse _RecipeDetailState wird für die Erstellung des eigentlichen Widgets benötigt. Der Hauptteil dieser Klasse besteht aus Elementen, die Sie schon kennengelernt haben.
- Das Scaffold-Widget wird wieder für das grundlegende Layout der App verwendet.
- Im body befindet sich ein SafeArea-Widget, welches ein Column-Widget mit SizedBox– und Text-Widgets als Kinder besitzt.
- SafeArea verhindert, dass die App dem Bildschirmrand zu nahe kommt, wie etwa der Notch oder dem interaktiven Bereich im unteren Teil des Bildschirms von modernen iPhones.
- Mithilfe eines SizedBox-Widget lassen sich Grenzen für das Image-Widget definieren.
- Dieses SizedBox-Widget dient lediglich als Abstandhalter.
- Der Text für die Rezeptdetails erhält einen etwas anderen Stil als der Text bei dem Card-Widget.
Wechseln Sie wieder zurück in Ihre main.dart Datei und fügen Sie die dritte import Anweisung hinzu, damit auf die neue Klasse zugegriffen werden kann.
import 'recipe_detail.dart';
Gehen Sie anschliessend zur Zeile mit dem Kommentar // TODO: return mit return RecipeDetail() ersetzen und ersetzen diesen Kommentar zusammen mit dem Code return Text('Rezeptdetails'); durch:
return RecipeDetail(recipe: Recipe.samples[index]);
Damit die Änderungen in der App ersichtlich sind, müssen Sie dieses Mal einen Hot-Restart statt Hot-Reload durchführen. Ein Hot-Restart ist immer dann nötig, wenn im Code der Zustand der App verändert wurde.
Wenn Sie jetzt auf ein Rezept tippen, wird die Seite mit den Rezeptdetails angezeigt. Da Sie jetzt ein Scaffold-Widget mit einer AppBar haben, fügt Flutter automatisch eine Zurück-Schaltfläche ein, mit der Benutzer:innen wieder zum Startbildschirm gelangen.