Flutter Beispiel 7 -- GridView OrientationBuilder
Das gute bei Flutter ist, das es inzwischen reichlich Material im Netz hat um sich weiter zu bilden. Ich habe in einem Post den YouTube Channel whatsupcoders erwähnt, mache es hier aber gerne noch einmal. Dieser Post basiert auf einem Video aus diesem Channel. Wer Lust hat sich die ganze Serie anzusehen..hier der Link zu der Playlist. Wer ohne Umschweife zum Source Code dieses Beispiels gehen möchte, findet ihn hier.
Grid kann man mit Gitter übersetzen, und naja View, sollte klar sein. Wir können bei diesem Gitter oder Netz wenn man möchte, festlegen wie viele Spalten es hat. In diesem Beispiel generieren wir dann den Inhalt als Liste aus Bildern. Hier zuerst, damit wir Bilder in unserem Flutter Projekt verwenden können, müssen wir sie zuerst in unsere Directory Struktur einfügen. Dazu legen wir ein neues Verzeichnis an, in welches wir unsere Bilder kopieren, gerne auch mittels Drag und Drop. Das ist aber nur die halbe Miete. Wie wir schon wissen besteht unser Projekt unter anderem aus einem pubspec.yaml File. Es enthält Verweise auf Abhängigkeiten, die wir für unser Projekt benötigen. Hier müssen wir nun auch festlegen, wo unser Projekt die Bilder findet, die wir verwenden möchten.
Unser Hand hat zwei mögliche Dartstellungsarten: Portrait Format und Landscape Format. Flutter bietet eingebaute Möglichkeiten um dem Rechnung zu tragen. Der Code in diesem Abschnitt beginnt mit:
body: OrientationBuilder (builder:context,orientation) {.....}
return GridView.count (...)
Der OrientationBuilder bekommt als Argumente einen context und eine orientation Variable mit auf den Weg. Im Gegenzug lassen wir uns einen GridView.count zurückgeben.Man beachte das die orientation Variable eine Umgebungsvariable ist, also abhängig vom aktuellen Zustand (Portrait / Landscape) des Handys.
mit folgendem Code legen wir fest, das im Portraitmodus 2 Kolumnen und im Landscape Modus 3 Kolumnen gerendert werden:
Diese Zeil kann man so lesen: Wenn die Orientierung Portrait ist, dann zwei Kolumnen, wenn die Orientierung Landscape ist, dann 3 Kolumnen. Zu guter Letzt, werden mit einer List.generate Methode die Bilder eingelesen.
GridView
Mit images/ fügen wir den gesamten Ordner unserem Projekt hinzu. D.h. wir können auf den Inhalt innerhalb unseres Programmes zugreifen. Wichtig dabei ist, das die Pfadangaben immer relativ zum yaml File zu setzen sind. Was den Code angeht, ist dieser ziemlich simpel. Wie meistens verwenden wir eine MaterialApp mit einem Scaffold. Die AppBar, als Teil von Scaffold wird genutzt und Möglichkeiten zum Titel / Text setzen inkl. Farben.
OrientationBuilder
Unser Hand hat zwei mögliche Dartstellungsarten: Portrait Format und Landscape Format. Flutter bietet eingebaute Möglichkeiten um dem Rechnung zu tragen. Der Code in diesem Abschnitt beginnt mit:
body: OrientationBuilder (builder:context,orientation) {.....}
return GridView.count (...)
Der OrientationBuilder bekommt als Argumente einen context und eine orientation Variable mit auf den Weg. Im Gegenzug lassen wir uns einen GridView.count zurückgeben.Man beachte das die orientation Variable eine Umgebungsvariable ist, also abhängig vom aktuellen Zustand (Portrait / Landscape) des Handys.
mit folgendem Code legen wir fest, das im Portraitmodus 2 Kolumnen und im Landscape Modus 3 Kolumnen gerendert werden:
crossAxisCount:orientation==Orientation.portrait?2:3,
Diese Zeil kann man so lesen: Wenn die Orientierung Portrait ist, dann zwei Kolumnen, wenn die Orientierung Landscape ist, dann 3 Kolumnen. Zu guter Letzt, werden mit einer List.generate Methode die Bilder eingelesen.
Kommentare
Kommentar veröffentlichen