Flutter Basics: Container Part 2

Im ersten Teil dieses Postest haben wir schon eine Annäherung an das Container Widget versucht.
Das Container Widget stellt ein Gefäß dar, das uns erlaubt ein Kind, natürlich ein Widget, zu positionieren. Solch ein Vorhaben ist natürlich Einschränkungen und Vorgaben unterworfen. Die Vorgaben sind unsere Werte für Höhe und Breite. Mit Einschränkungen sind die Grenzen gemeint, die uns das Eltern - Widget auferlegt und diejenigen, die wir selbst mit BoxConstraints festlegen. Schauen wir uns aber zuerst noch einmal das Container Widget an, so wie es Flutter definiert:

Vieles an den Werten dürfte von der Bedeutung her selbsterklärend sein. Auf den Eintrag BoxConstraints werden wir noch weiter eingehen ! Nun zur Praxis. Fürs schnelle Testen habe ich den Boilercode von Flutter, von den Counter Elementen befreit.

Hinzugefügt wurde ein Container, dem eine grüne Farbe zugewiesen wurde. In der Dokumentation zu Flutter steht unter anderem:

If the widget has no child, no height, no width, no constraints, and no alignment, but the parent provides bounded constraints, then Container expands to fit the constraints provided by the parent

Kurz: Wenn dem Widget keine Größenwerte, keine Positionswerte mitgegeben werden, das Eltern Widget aber Einschränkungen bereit stellt, versucht das Widget so groß als möglich zu sein. Immer unter Berücksichtigung der Einschränkungen, die das Eltern Widget vorgibt.
Wenn wir den Code ausführen nimmt der Container auch tatsächlich den ganzen verfügbaren Raum ein, begrenzt durch die App Bar und die Höhe und Breite des Bildschirms.
Bauen wir den Test aber ein wenig aus. Wir  werden zwei Container mit unterschiedlichen Farben implementieren, die sich in einem Column Widget befinden.
Wenn wir das umsetzen werden wir genau...nichts sehen, außer einem weißen Bildschirm. Wie erklärt sich dieses Verhalten nun ? Column richtet sein Layoutverhalten unter anderem an der Größe der Kinder aus. Da unsere zwei Kinder, die Container, keine Größe haben.... Selbst wenn wir entweder Höhe oder Breite angeben, wir werden nichts angezeigt bekommen. Erst wenn wir Höhe und Breite bereitstellen gibt es eine verwertbare Ausgabe auf dem Bildschirm. Kommen wir aber jetzt zu BoxConstraints.

Oben sehen wir die Definition von BoxConstraints, ein Mix aus Minimum und Maximum Werten. Interessant ist dabei der Wert / Begriff double.infinity. Was man am besten mit so groß als möglich übersetzt. Das ist an sich die Basisvariante. Eine weitere ist .

Am Wörtchen expand sehen wir schon das diese Variante so groß als möglich wird, wenn entweder Höhe oder Breite, aber nicht beides implementiert wird. Sehen wir uns den Testcode an:

Hier setzen wir die Höhe, die Breite bleibt auf "unendlich". BoxConstraints und die Varianten geben uns also verschiedene Möglichkeiten, das Layoutverhalten "unseres" Containers zu beeinflussen.

Fazit: Wenn wir wissen möchten wie sich das Container Widget verhält, müssen wir uns Gedanken über die Umgebung machen, in der es eingesetzt wird (Eltern Widget). Entscheiden wir uns dann für Werte bzw ein Design, muss uns bewusst sein, das es Auswirkungen auf das Kinder Widget des Containers hat. Man sollte sich davon aber nicht abschrecken lassen. Wie bei anderen Dingen auch, lernt man immer wieder dazu.

Hier geht es weiter mit Container..