Flutter 2021 - Row Widget und Text (Android Studio)

In den letzten beiden Post's habe ich mich mit Text Widgets befasst. Es ist jetzt nicht so, das es dazu nichts mehr zu schreiben gäbe, aber Abwechslung tut gut !

Ein Text alleine, ist der Anfang, aber wohin damit auf dem Bildschirm ? 

Natürlich denken wir jetzt an die sogenannten Layout Widgets von Flutter. Row(...), Column(...), Center(...) und andere mehr. Am kann verwirrend sein, das sich die Widgets unterschiedlich verhalten. Man muss sie erst richtig kennen lernen, um das richtige Widget für die eigene Problemstellung zu wählen !

Row(...) Widget

Wie auch in anderen Post's, werde ich nicht auf alle Parameter eingehen. Das würde diesen Artikel sprengen. Stattdessen konzentriere ich mich auf das Grundsätzliche.

Eine row (Reihe) platziert Kinder Widgets auf der horizontalen Achse. Wenn Du einen Blick auf die Parameter wirfst:

Das wichtige zuerst: Du kannst Row(...) eine Liste von Widgets übergeben. Diese Kinder Widgets werden in der Row(...) platziert. Das geschieht über children: .

Da wir ja das Text(...) Widget schon als Thema hatten, erstelle ich einen neuen Code, der zwei Texte in einer Row(...) unterbringt:

Wenn Du diese kleine Serie mitverfolgt hast, dürfte dir einiges bekannt vorkommen. Neu setze ich die Farbe in ThemeData(...). Das ist möglich, da ich eine MaterialApp(...) benutze. Dazu aber in einem anderen Post mehr.

Das eigentliche Thema dieses Post's ist ja die Row(...) und Du siehst den einzigen Parameter den ich in diesem Beispiel verwende ist children: .

Wenn Du den Code oben im AVD (Emulator) laufen lässt, erhälst Du folgenden Bildschirm:

Wie vorauszusehen war, versucht Flutter beide Texte horizontal darzustellen. Nun sind aber beide Texte zusammengenommen länger, als der verfügbare Platz auf dem Bildschirm.

Als Laie hätte man jetzt annehmen können, Flutter würde einfach auf der nächsten Zeile fortfahren. Aber so einfach ist es nicht 😀. Dementsprechend erhalten wir einen Fehler:

Natürlich gibt es dafür eine Lösung, schliesslich hast Du auf dem Bildschirm noch mehr als genug freie Fläche !

Eine mögliche Lösung ist der Einsatz des Expanded(...) Widgets. Dieses Widget nutzt den verfügbaren Raum, um das child: Widget darzustellen ! Ich ändere den Code dementsprechend:

Wenn Du den Code in Android Studio ausführst, solltest Du folgenden Bildschirm erhalten:

Die Fehlermeldung ist verschwunden ! Wie aber erklärt sich die Darstellung jetzt ? Flutter zeichnet immer zuerst die unflexiblen Widgets auf den Bildschirm ! Anschliessend wird das Expanded(...) Widget mit möglichst wenig Platzverbrauch eingefügt. Das führt dazu dass, das Widget in die vertikale Achse anwächst, um den gesamten Text unterzubringen.

Im Code oben werde ich nun auch das zweite Text(...) Widget in ein Expanded(...) Widget integrieren:

Hier das Ergebnis auf dem AVD (Emulator) :

Da nun beide Text(...) Widgets in einem Expanded(...) Widget integriert sind, wird der Raum auf der horizontalen Achse gleichmäßig aufgeteilt.

Das war es für diesen Post .Bis bald !😀