Flutter: Expanded, Flexible und Spacer im Vergleich

Expanded, Flexible und Spacer werden häufig verwechselt. Alle drei gehören zu Flex-basierten Layouts, lösen aber jeweils ein anderes Problem. Die richtige Wahl verhindert Overflow-Probleme und hält Ihre Oberfläche unter Kontrolle.

Live-Demo

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

💡 Falls sich das Beispiel nicht öffnet, klicken Sie auf den Link DartPad, um es in einem neuen Tab auszuführen.

Der wesentliche Unterschied

• Expanded: Füllt den verbleibenden Platz vollständig aus.
• Flexible: Nutzt den verbleibenden Platz lockerer.
• Spacer: Erzeugt Leerraum und nimmt keinen Inhalt auf.

Dieses Thema beantwortet direkt Suchanfragen wie „flutter expanded vs flexible“ und „flutter spacer“.

Was Expanded macht

Expanded gibt den verbleibenden Platz in einer Row oder Column an sein Kind weiter.

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

Was Flexible macht

Flexible erlaubt dem Kind, den verfügbaren Platz zu nutzen, ohne es zum vollständigen Ausfüllen zu zwingen.

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

Das ist nützlich, wenn der Inhalt eher seine natürliche Größe behalten soll.

Was Spacer macht

Spacer erzeugt ausschließlich Leerraum und trägt keinen sichtbaren Inhalt.

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

Wann verwenden Sie welches Widget?

• Nehmen Sie Expanded, wenn das Widget den verbleibenden Platz ausfüllen muss.
• Nehmen Sie Flexible, wenn das Widget flexibel bleiben, sich aber nicht zwingend voll ausdehnen soll.
• Nehmen Sie Spacer, wenn Sie nur Leerraum brauchen.

Praxisbeispiel: Formularzeile

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

Hier ist Expanded die richtige Wahl, weil das Eingabefeld die verbleibende Breite nutzen soll.

Praxisbeispiel: Button-Zeile

Row(
  children: [
    ElevatedButton(onPressed: () {}, child: const Text('Cancel')),
    const Spacer(),
    ElevatedButton(onPressed: () {}, child: const Text('Save')),
  ],
)

So schieben Sie Buttons sauber an die gegenüberliegenden Enden.

Häufige Fehler

• Expanded verwenden, wo Flexible passender wäre
• Flexible und Expanded als identisch behandeln
• Spacer einsetzen, als wäre es ein Inhalts-Widget
• Diese Widgets außerhalb eines Flex-Elternteils verwenden

Häufig gestellte Fragen

Was ist der größte Unterschied zwischen Expanded und Flexible?

Expanded erzwingt die vollständige Nutzung des verfügbaren Platzes, während Flexible entspannter bleibt.

Kann ich Expanded statt Spacer verwenden?

Manchmal ja, aber Spacer ist sauberer, wenn Sie nur Leerraum benötigen.

Welches hilft bei Overflow-Fehlern?

Im richtigen Kontext können Expanded und Flexible Overflow verringern, indem sie den Platz sinnvoll verteilen.

Zusammenfassung

Den Unterschied zwischen Expanded, Flexible und Spacer zu verstehen gehört zum Kern des Layout-Designs in Flutter. Richtig eingesetzt verringern sie Overflow-Probleme und helfen Ihnen, sauberere und professionellere Oberflächen zu bauen.