Flutter: Layout steuern mit Expanded, Flexible und Spacer

In Flex-basierten Layouts entscheidet die Art der Platzaufteilung oft darüber, wie ausgereift eine Oberfläche wirkt. Expanded, Flexible und Spacer sehen ähnlich aus, verhalten sich aber unterschiedlich.

Live-Demo

Sie können das Expanded-Widget im interaktiven Beispiel unten ausprobieren:

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

Welches sollten Sie verwenden?

• Expanded: Füllt den verbleibenden Platz.
• Flexible: Behandelt den Inhalt lockerer.
• Spacer: Fügt ausschließlich Leerraum hinzu.

Dieses Thema passt zu Suchanfragen wie „flutter expanded flexible spacer“, „Row-Layout steuern“ und „Overflow beheben“.

Platz ausfüllen mit Expanded

Row(
  children: [
    const Icon(Icons.person),
    const SizedBox(width: 12),
    Expanded(
      child: TextField(
        decoration: const InputDecoration(hintText: 'Name'),
      ),
    ),
  ],
)

Sanftere Steuerung mit Flexible

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('Flexible content'),
      ),
    ),
  ],
)

Leerraum verwalten mit Spacer

Row(
  children: [
    const Text('Start'),
    const Spacer(),
    const Text('End'),
  ],
)

Overflow-Probleme verringern

Richtig eingesetzt senken Flex-Widgets das Overflow-Risiko in Row- und Column-Layouts. Expanded ist besonders wichtig, wenn Text, Symbole und Buttons zusammen auftreten.

Praxisszenario: Produktkarte

Row(
  children: [
    const SizedBox(width: 64, height: 64, child: Placeholder()),
    const SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Product name'),
          Text('Product description'),
        ],
      ),
    ),
    const Icon(Icons.chevron_right),
  ],
)

Häufig gestellte Fragen

Trägt Spacer Inhalte?

Nein. Es erzeugt ausschließlich Leerraum.

Kann Flexible Expanded immer ersetzen?

Nein. Expanded gibt straffere Kontrolle, während Flexible entspannter bleibt.

Gelten diese Widgets nur für Row?

Nein. Sie funktionieren auch in einer Column.

Zusammenfassung

Richtig eingesetzt machen Expanded, Flexible und Spacer die Layout-Steuerung in Flutter deutlich sauberer. Wer den Unterschied versteht, hat weniger Fehler und eine professionellere Oberfläche.