Flutter: Größen und Abstände mit SizedBox

Flutter SizedBox-Widget – Größen und Abstände

SizedBox ist ein einfaches, aber sehr praktisches Widget in Flutter, um Widgets eine feste Größe zu geben oder Abstand zwischen ihnen zu schaffen.

Was ist SizedBox?

SizedBox erzeugt eine Box, für die Sie eine feste Breite und/oder Höhe angeben können. Sie erfüllt zwei Hauptzwecke:

Widgets eine feste Größe geben
Abstand zwischen Widgets schaffen

Grundlegende Verwendung

Feste Größe vergeben

SizedBox(
  width: 200,
  height: 100,
  child: Container(
    color: Colors.blue,
    child: Center(child: Text('200x100 box')),
  ),
)

Indem wir den Container in eine SizedBox setzen, haben wir seine Größe begrenzt.

Nur die Breite angeben

SizedBox(
  width: 150,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Fixed width button'),
  ),
)

Nur die Höhe angeben

SizedBox(
  height: 80,
  child: Image.network('https://example.com/logo.png'),
)

Abstände erzeugen

Eine der häufigsten Anwendungen von SizedBox ist das Erzeugen unsichtbarer Abstände zwischen Widgets.

Vertikaler Abstand (innerhalb einer Column)

Column(
  children: [
    Text('First text'),
    SizedBox(height: 16), // 16 pixels vertical space
    Text('Second text'),
    SizedBox(height: 24), // 24 pixels vertical space
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
)

Horizontaler Abstand (innerhalb einer Row)

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 8), // 8 pixels horizontal space
    Text('Starred'),
    SizedBox(width: 16), // 16 pixels horizontal space
    Icon(Icons.favorite),
  ],
)

SizedBox.shrink()

Erzeugt ein Widget ohne Inhalt und mit Größe null. Praktisch, wenn in bestimmten Fällen nichts angezeigt werden soll:

Column(
  children: [
    Text('Always visible'),
    condition ? Text('Conditionally visible') : SizedBox.shrink(),
    Text('Always visible'),
  ],
)

SizedBox im Vergleich zu Container

Auch ein Container kann eine Größe festlegen – worin liegt also der Unterschied?

Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(8),
  child: Text('Container'),
)

Bietet Eigenschaften wie padding, margin, color und decoration
Mehr Funktionen bedeuten mehr Rechenaufwand

SizedBox

SizedBox(
  width: 100,
  height: 100,
  child: Text('SizedBox'),
)

Legt ausschließlich die Größe fest
Ist leichtgewichtiger und performanter
Sollte bevorzugt werden, wenn nur die Größe zählt

Faustregel: Nutzen Sie SizedBox, wenn Sie nur die Größe festlegen, und Container, wenn Sie Farbe, Padding oder Decoration brauchen.

Standardwerte für Abstände

Empfohlene Abstandswerte nach Material Design:

SizedBox(height: 4)   // Very small space
SizedBox(height: 8)   // Small space
SizedBox(height: 12)  // Medium-small space
SizedBox(height: 16)  // Medium space
SizedBox(height: 24)  // Large space
SizedBox(height: 32)  // Very large space
SizedBox(height: 48)  // Section spacing

Zusammenfassung

SizedBox:

Dient zum Festlegen fester Größen
Erzeugt unsichtbare Abstände zwischen Widgets
Ist leichtgewichtiger und performanter als Container
Bietet die Factory-Konstruktoren shrink(), expand() und square()
Ist das meistgenutzte Widget für Abstände

SizedBox gehört zu den Widgets, die Sie beim Layouten in Flutter am häufigsten einsetzen werden.