Flutter 2021 - Container (Android Studio)

 Im letzten Post haben wir einiges gelernt über Eltern - Kind Beziehungen von Widgets in Flutter. Das im Zusammenhang mit Dimensionsangaben für ein Widget, wie Höhe und Breite.

In diesem Post werde ich das Container(...) Widget genauer betrachten und auf zwei weitere, wichtig Begriffe für ein Flutter Layout eingehen: Margin und Padding. Aber eines nach dem Anderen 😀.

Begriffe

Ein Widget nimmt in der Regel auf dem Bildschirm Platz ein. Die Dimensionen legst Du entweder fest, oder Flutter berechnet die Grösse aus der Anordnung der bereits vorhandenen Widgets und der in deinem Widget enthaltenen Objekte. Ein Widget hat also eine Höhe und eine Breite.

Widget Dimensionen

Wenn Du das Bild oben betrachtest können wir folgendes feststellen:

content: Dein Widget, Dein Inhalt !

border: Du kannst deinem Widget einen Rand geben. 

padding: Der Raum zwischen dem Rand und deinem Widget. 

margin: Damit definierst Du leeren Raum zu benachbarten Widgets!

Beim erstellen eines Layouts wirst Du fast zwangsläufig mit diesen zwei Begriffen konfrontiert ! Aber werfen wir noch einmal einen Blick auf die Parameter, die wir dem Container(...) übergeben können:

Zwei der oben erwähnten Begriffe tauchen hier auch auf: padding, margin. border: verbirgt sich bei den Parametern hinter decoration !

Bekannt vorkommen dürfte Dir auch constraints, wir hatten den Begriff im letzten Post kurz aufgegriffen. 

Um das zu testen ändere ich den Code vom letzten Post etwas ab:

Testschirm(...) retourniert jetzt ein Row(...) Widget ! Row(...) generiert eine horizontale Reihe.

Von Row verwende ich den mainAxisAlignment Parameter, um zwei Container zu zentrieren. Das geschieht mit dem Wert MainAxisAlignment.center.

Anders als Container(...) hat Row(...) einen children: Parameter. Das Widget kann also mehrere Kinder Widgets besitzen. Wenn Du diesen Code im AVD (Emulator) ausführst, solltest Du folgenden Bildschirm erhalten:

Du siehts, die zwei Container(...) Widgets befinden sich ohne Abstand neben einander. Jetzt kann ich sehr gut das padding: demonstrieren:

Du kannst jetzt jedes der Container(...) Widgets entsprechend dem Code oben anpassen. Neu haben dann beide Widgets einen padding: Wert. Den Wert selbst übergebe ich nicht als Zahl. Ich muss EdgeInsets verwenden. Das Konstrukt verfügt noch über mehr Möglichkeiten, als die die ich oben gewählt habe. 

Mit .all setze ich einen Wert für alle vier Seiten des Widgets. Beachte bitte auch, das das Text(...) Widget neu einen style: bekommen hat. Von dem TextStyle(...) Widget verwende ich einzig die Möglichkeit mit fontSize: die Font Grösse zu definieren. Wie sieht das Ergebnis des Codes im AVD (Emulator) aus ?:

Das Container(...) Widget hat als Kind ein Text(...) Widget. Dieser Text ist der Inhalt von Container. Mit padding: haben wir einen Abstand zwischen dem Rand des Widgets und dem Inhalt definiert. Letztendlich haben wir so einen Zeilenumbruch erzwungen.

Nun kannst Du den Code der zwei Container(...) noch um margin: ergänzen. Also um den Abstand zu den benachbarten Widgets:

Das Ergebnis im AVD (Emulator) :

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