Flutter: Platz ausfüllen mit dem Expanded-Widget

Flutter Expanded-Widget – Platz ausfüllen

Expanded dehnt ein Widget innerhalb einer Row oder Column so aus, dass es den gesamten freien Platz einnimmt. Es ähnelt Spacer, kann aber – das ist der wichtige Unterschied – sichtbaren Inhalt enthalten.

Was ist Expanded?

Expanded dehnt sein Kind in Flex-Containern (Row, Column) auf den verfügbaren freien Platz aus. Während Spacer für leeren Raum gedacht ist, dient Expanded für Inhalte.

Live-Demo: Beispiele zum Expanded-Widget

Probieren Sie Expanded und den Einsatz von flex interaktiv aus:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Expanded in einer Row

Row(
  children: [
    Container(width: 50, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue, child: Text('I expanded')),
    ),
    Container(width: 50, color: Colors.green),
  ],
)

Der blaue Container füllt den gesamten Platz, der nach dem roten und dem grünen Container übrig bleibt.

Expanded in einer Column

Column(
  children: [
    Container(height: 50, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue, child: Text('I expanded')),
    ),
    Container(height: 50, color: Colors.green),
  ],
)

Der blaue Container füllt den gesamten verbleibenden Platz in der Vertikalen.

Der Parameter flex

Werden mehrere Expanded-Widgets verwendet, bestimmen Sie über den Parameter flex, wie der Platz aufgeteilt wird:

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red, child: Text('1 unit')),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue, child: Text('2 units')),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.green, child: Text('1 unit')),
    ),
  ],
)

Gesamter flex-Wert: 1+2+1 = 4

• Rot: 1/4 (25 %) des Platzes
• Blau: 2/4 (50 %) des Platzes
• Grün: 1/4 (25 %) des Platzes

Expanded im Vergleich zu Flexible

Expanded entspricht faktisch Flexible(fit: FlexFit.tight):

Expanded

Row(
  children: [
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Flexible (gleichwertig)

Row(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: Container(color: Colors.blue),
    ),
  ],
)

Unterschied:

• Expanded: Füllt immer den gesamten Platz (tight)
• Flexible: Kann sich optional ausdehnen (loose)

Wann verwendet man es?

Expanded verwenden:

• Wenn Sie flexiblen Platz innerhalb von Row/Column brauchen
• Um Overflow-Fehler zu vermeiden
• Beim Erstellen responsiver Layouts
• Wenn sich Größen an den Bildschirm anpassen sollen

Zusammenfassung

Expanded:

• Dehnt ein Widget innerhalb von Row oder Column aus
• Füllt den verfügbaren freien Platz
• Teilt den Platz über den Parameter flex anteilig auf
• Hat den Standardwert flex 1
• Ist für Inhalte gedacht (für leeren Raum: Spacer)
• Verhindert Overflow-Fehler
• Entspricht Flexible(fit: FlexFit.tight)

Expanded ist einer der Grundbausteine für responsive und flexible Layouts in Flutter.