In Teil 1 und Teil 2 dieser kleinen Serie haben wir uns schon mit Aspekten des Container Widgets von Flutter befasst. Wir haben gesehen, das was das Layout betrifft, unser Container Einschränkungen unterworfen ist.
BoxConstraints, oder Constraints, sind hier die Begriffe auf die man stößt, wenn man sich mit dem Thema Layout unter Flutter befasst. Es ist nicht verkehrt sich noch einmal vor Augen zu führen, was das Flutterteam mehr allgemein dazu ausführt:
Generell gesprochen kann man von drei Arten von Layout Widgets sprechen:
- Die, die versuchen so groß wie möglich zu sein. Beispiele: Center und ListView Widget
- Die, die versuchen so groß, wie ihr Kinder Widget zu sein.Beispiele: Das Transform und Opacity Widget
- Die, die versuchen eine bestimmte Größe einzunehmen. Beispiele: Image und Text Widget
- Das Container Widget gehört zu der Sorte, welche sich unterschiedlich Verhalten. Es versucht so groß wie möglich zu sein, gibt man ihm aber eine Breite hält er diese nach Möglichkeit ein.
Hier ein Beispiel, drei Quadrate, zwei mit BoxConstraints, eines mit "normal" gesetzten Höhe und Breite Werten:
 |
| Bild 1 |
Optisch kein Unterschied (
Bild1), was die Größe betrifft. Im Code zu BoxConstraints haben wir min und max Wert festgelegt. Im blauen Container Höhe und Breite. Ergänzen wir jetzt den Code um einen Container ohne jegliche Größenangaben und alle Container um einen sehr kurzen String
(Bild2).
 |
| Bild 2 |
In den zwei Containern hat sich die Box verkleinert, um genau zu sein, unsere min Werte kommen zum Einsatz. Im Container mit Höhe und Breite hat sich nichts getan, während beim "neuen" Container, dieser genau den Raum einnimmt, den er braucht um das Child aufnehmen zu können.
 |
| Bild 3 |
Vergrößern wir nun den String im grünen Quadrat, um zu sehen, ob die Box auch tatsächlich wie gewünscht reagiert und mehr Platz einräumt. Diese Flexibilität wäre ja auch das gewünschte Ziel des Ganzen. Und tatsächlich, der "grüne" Container ist "gewachsen" und räumt dem Text mehr Platz ein
(Bild 3). Was aber passiert, wenn wir beginnen einen Roman zu schreiben, der so in unserem Container mit min/max Werten nicht Platz hat ? Da reagiert Flutter ganz pragmatisch und schreibt einfach außerhalb des Containers weiter. Was sicher nicht unsere Absicht sein kann
(Bild 4).
 |
| Bild 4 |
Fazit: BoxConstraints können eine mächtiges Instrument sein um in manchen Situationen Flexibilität zu erreichen. Unten noch der gesamte Code zum selber ausprobieren.
Kommentare
Kommentar veröffentlichen