Flutter Basics: Container Part 1

In Flutter ist der Container eine Allround Waffe. Vielfältig einsetzbar, dank seiner nützlichen Eigenschaften. Wenn man die original Dokumentation liest, kann man aber schon ein wenig verwirrt sein.
Das Schaubild links macht uns schon ein wenig vertraut mit Begriffen, die nicht nur beim Container eine Rolle spielen. Ihr Verständnis erspart viel Fehlersuche.
Wenn man sich eine Flutter App als Baumstruktur vorstellt, dann kann ein Container Widget irgendwo in diesem Baum vorkommen. Das heißt unser Container hat ein "Eltern" Widget und ein "Kinder" Widget. Von diesem Eltern Widget kann unser Container Einschränkungen (englisch: Constraints) erben. Diese haben Auswirkungen darauf, wie unser Container von Flutter auf den Bildschirm gezeichnet wird.

Ein einfaches Beispiel: Wenn das "Eltern" Widget 70% des Bildschirms belegt, kann unser Container nicht 50% beanspruchen.

Hier eine Variante des Container Layouts:

• Wenn das Widget kein Kind hat, keine Höhe und Breite angegeben ist, das Eltern Widget unbegrenzte Einschränkungen hat, versucht Flutter den Container so klein als möglich zu zeichnen

Was ist aber genau mit unbegrenzte Einschränkungen gemeint ?

Neben konkreten  Werten für Höhe und Breite, kann man diese zwei Werte auch auf Infinity setzen, also auf unendlich. Natürlich macht das im ersten Moment keinen Sinn, denn kein Widget kann eine unendliche Höhe oder Breite haben. Im Kontext aber mit anderen Flutter Elementen ist dieser Wert doch nützlich, z.b. ScrollView, ListView.

Wenn bei einem Layout Widget die Höhe oder die Breite auf unendlich, Infinity, gesetzt wird, spricht man von einem Widget mit unbounded Constraints.

Die Variante oben wird selten zu treffen, hat der Container doch meistens ein child Widget. Das Beispiel macht aber deutlich, das sowohl das Eltern Widget, als auch die Werte die wir dem Container mit auf den Weg geben, Einfluss darauf hat, wie  Flutter den Container auf den Bildschirm zeichnet.

Jetzt kann man sich denken. Okay, ich schlage mich nicht mit dem Thema herum und greife immer zu festen Werten für Höhe und Breite. 

Das kann man tun, handelt sich aber damit einen gravierenden Nachteil ein. Das Layout wird unflexibel und auf verschiedenen Endgeräten, sehen fixe Dimensionen unterschiedlich aus. Im Gegenteil: ein flexibles Layout unserer App wahrt auf unterschiedlichen Geräten die Proportionen und hilft unsere Anwendung über Geräte Grenzen hinaus, möglichst einheitlich darzustellen. 

Kommen wir aber nun zum Kern der Sache, dem Container Widget. Hier der original Code aus der Flutter Definition:

Wenn wir uns diese Klasse anschauen, ist da wenig überraschendes, außer vielleicht wieder dieser Begriff constraints. Einiges ist fast selbsterklärend, anderes nicht eindeutig. Mit width und height legen wir Höhe  und Breite fest. Der Dokumentation ist zu entnehmen, das diese zwei Werte das Padding mit einschließen.   Das heisst, wenn wir den Wert von height auf 100 setzten und das Padding auf 20, haben wir 80 dp Platz für den Content / Child.

So für den ersten Teil war dies jetzt genug...to be continued..