2.2 Demo-App umstylen (inkl. Theorie zu Klassen)
Die Flutter Demo-App ist ein guter Ausgangspunkt für neue Projekte, da viele App-Bausteine schon vorhanden sind.
Durch den Code class MyApp extends StatelessWidget {...} wird eine neue Dart-Klasse namens MyApp definiert, welche die Klasse StatelessWidget erweitert – oder davon erbt. In Flutter entspricht fast alles auf der Benutzeroberfläche einem Widget. Stellen Sie sich MyApp vorerst einfach mal als Container für Ihre App vor.
Dart ist eine objektorientierte Programmiersprache und besitzt dadurch Dinge wie Klassen. Salopp können wir sagen, dass alle Wörter, die in der Demo-App mit einem Grossbuchstaben beginnen (z.B. MyApp, StatelessWidget, Widget, etc.) dem Namen einer Klasse entsprechen. Objektorientierte Programmierung ist nicht schwer und macht vieles einfacher. Aber um das sperrige Wort objektorientierte Programmierung zu vermeiden, verwenden wir ab jetzt die Abkürzung OOP.
Theorie
Klassen
Bevor wir uns dem Begriff Klasse widmen, sprechen wir besser mal von Katzen 🐈 (um die Materie etwas greifbar zu machen).
- Katzen besitzen Eigenschaften wie z.B. Namen, Fellfarbe und Alter
- Katzen können Aktionen ausführen wie z.B. miauen und essen
Bisher hatten wir beim Programmieren entweder mit Daten zu tun (was wir bei unseren Dingen mit Eigenschaften beschrieben haben) oder wir hatten irgendwelche Aufgaben erledigt mit Funktionen und Methoden (in die wir verschiedene Daten reingekippt haben).
Was aber passiert, wenn wir Daten und Methoden miteinander verknüpfen? Dann landen wir bei Datenstrukturen, die ein Objekt (in unserem Fall eine Katze) beschreiben. Wir spielen also Gott und schaffen einen allgemeinen Bauplan für Katzen. Und nun können wir beliebig viele virtuelle Katzen erschaffen – sprich ganz viele Objekte, die grundlegend nach dem gleichen Bauplan aufgebaut sind, aber sich in Ihren Eigenschaften (Namen, Fellfarbe und Alter) und in der Ausprägung der Methoden (miauen und essen) unterscheiden.
Eine Katzenklasse könnte in der Programmiersprache Dart ungefähr wie folgt aussehen:
class Cat {
// 1
String name;
String color;
int age;
// 2
meow() {
// hier wäre der Code, damit das Katzen-Objekt miaut
}
eat() {
// hier wäre der Code, damit das Katzen-Objekt frisst
}
}
Der Code dieser Klasse setzt sich wie folgt zusammen:
- Nach der Definition des Klassennamens kommt eine Auflistung der Attribute (Eigenschaften) name, color und age.
- Hier folgt eine Auflistung an Methoden (Aktionen), welche Katzen-Objekte ausführen können.
Übung
Klasse erstellen
Sehen Sie sich Ihre Umgebung an. Nehmen Sie zwei ähnliche Objekte (z. B. zwei Fahrräder und zwei Scooter), und überprüfen Sie, ob Sie die Eigenschaften und Aktionen finden können, die Sie am besten beschreiben und unterscheiden. Probieren Sie anschliessend für die beiden Objekte in der Programmiersprache Dart eine Klasse mit Eigenschaften und Methoden zu schreiben, die man als Bauplan verwenden kann.
Namen der Hauptklasse ändern
Zurück zu unser Rezepte-App. Zu diesem Zeitpunkt trägt die Hauptklasse noch den unspezifischen Namen MyApp, wie Sie in Ihrer main.dart Datei lesen können. Da Sie eine Rezepte-App am erstellen sind, macht es Sinn die Hauptklasse z.B. in RecipeApp umzubenennen. Um alle Vorkomnisse von MyApp in RecipeApp zu ändern empfiehlt sich die Umbenennungsaktion von VS Code zu verwenden.
-
-
- Markieren Sie in der main.dart Datei eine Codestelle mit MyApp und führen Sie einen Rechtsklick aus.
- Wählen Sie im Kontextmenü Change all Occurrences, um alle Textstellen mit dem Inhalt MyApp auszuwählen.
- Löschen Sie mit Backspace den Text MyApp und ersetzen sie ihn durch RecipeApp.
-
Die Umbenennung sollte dazu führen, dass alle Vorkomnisse von MyApp in RecipeApp umgewandelt werden, wie in dem unteren Codefragment dargestellt.
...
void main() {
runApp(const RecipeApp());
}
class RecipeApp extends StatelessWidget {
const RecipeApp({Key? key}) : super(key: key);
...
Die main() Methode ist der Einstiegspunkt für den Programmcode, wenn die App gestartet wird. Die Methode runApp() teilt Flutter mit, welches Widget sich auf der obersten Ebene (root) befindet.
App umgestalten
Passen Sie als Nächstes das Erscheinungsbild Ihres obersten Widgets an. Ersetzen Sie die build() Methode (blaumarkierter Code)
durch diesen Code:
// 1
@override
Widget build(BuildContext context) {
// 2
final ThemeData theme = ThemeData();
// 3
return MaterialApp(
// 4
title: 'Rezeptrechner',
// 5
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
// 6
home: const MyHomePage(title: 'Rezeptrechner'),
);
}
Dieser Code ändert das Erscheinungsbild Ihrer App. Ein paar Erklärungen zum Code:
-
- Die build()-Methode eines Widgets ist der Einstiegspunkt zum Zusammenfügen anderer Widgets. Die Annotation @override teilt Dart mit, dass diese build()-Methode die Standardmethode von StatelessWidget ersetzen soll.
- Über theme kann man visuelle Komponenten wie z.B. die Farbe ändern. Über ThemeData greifen wir auf das Standardlayout zurück.
- Eine MaterialApp verwendet Material Design als Designsprache und entspricht hier dem Widget, welches in RecipeApp enthalten sein wird.
- Der Parameter title ist eine Beschreibung, die das Gerät verwendet, um die App zu identifizieren. Die Benutzeroberfläche Ihrer App zeigt diesen Titel nicht an.
- Durch Kopieren des ursprünglichen Designs und Ersetzen des Farbschemas durch eine aktualisierte Kopie können Sie die Farben der App ändern. Hier ist die Primärfarbe Colors.grey und die Sekundärfarbe Colors.black.
- Die App verwendet immer noch dasselbe MyHomePage-Widget wie zuvor, aber jetzt haben Sie den Titel der App aktualisiert, welcher auf dem Gerät angezeigt wird.
Wenn Sie die App neu starten, sehen Sie dieselben Widgets, aber in einem anderen Farbschema.