Flutter: Flexible Abstände mit dem Spacer-Widget

Flutter Spacer-Widget – flexible Abstände

Spacer ist ein spezielles Widget, um innerhalb von Row oder Column flexible Abstände zwischen Widgets zu erzeugen. Es schafft „unbegrenzten“ Raum zwischen mindestens zwei Widgets.

Was ist Spacer?

Spacer dehnt sich im umgebenden Flex-Container (Row, Column) auf den verfügbaren freien Platz aus. Es eignet sich ideal, um Raum zwischen mehreren Widgets zu verteilen.

Grundlegende Verwendung

Spacer in einer Row

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

In diesem Beispiel füllt Spacer den gesamten freien Raum zwischen den Texten „Links“ und „Rechts“, sodass die Texte an beiden Enden sitzen.

Spacer in einer Column

Column(
  children: [
    Text('Top'),
    Spacer(),
    Text('Bottom'),
  ],
)

Zwischen den Texten „Oben“ und „Unten“ entsteht der maximale vertikale Abstand.

Mehrere Spacer

Mit mehreren Spacern verteilen Sie die Abstände gleichmäßig:

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

Zwei Spacer teilen sich den Platz zu gleichen Teilen, die drei Texte werden in gleichmäßigen Abständen verteilt.

Der Parameter flex

Mit dem Parameter flex des Spacer stellen Sie das Verhältnis der Abstände ein:

Row(
  children: [
    Text('Left'),
    Spacer(flex: 1), // 1 unit space
    Text('Center'),
    Spacer(flex: 2), // 2 units space
    Text('Right'),
  ],
)

Der zweite Spacer nimmt doppelt so viel Platz ein wie der erste. Der Abstand zwischen „Mitte“ und „Rechts“ ist damit doppelt so groß wie der zwischen „Links“ und „Mitte“.

⚠️ Wichtige Hinweise

1. Niemals in unbegrenzten Größen verwenden

Spacer darf in Bereichen mit unbegrenzter Größe niemals eingesetzt werden:

// ❌ WRONG - Gives error
ListView(
  children: [
    Text('Top'),
    Spacer(), // ERROR! ListView has infinite height
    Text('Bottom'),
  ],
)

Warum? Scrollbare Widgets wie ListView haben eine unbegrenzte Größe. Spacer kann in diesem Fall nicht wissen, wie weit es sich ausdehnen soll.

2. Innerhalb eines begrenzten Bereichs verwenden

// ✅ CORRECT
Container(
  height: 300, // Limited height
  child: Column(
    children: [
      Text('Top'),
      Spacer(),
      Text('Bottom'),
    ],
  ),
)

Spacer im Vergleich zu SizedBox

SizedBox – fester Abstand

Row(
  children: [
    Text('Left'),
    SizedBox(width: 20), // Always 20 pixels
    Text('Right'),
  ],
)

• Abstand mit fester Größe
• Bleibt gleich, auch wenn sich die Bildschirmgröße ändert

Spacer – flexibler Abstand

Row(
  children: [
    Text('Left'),
    Spacer(), // Fills all available space
    Text('Right'),
  ],
)

• Dehnt sich entsprechend dem verfügbaren Platz aus
• Nützlich in responsiven Layouts

Wann verwendet man es?

Spacer verwenden:

• Wenn Sie flexiblen Abstand zwischen zwei oder mehr Widgets brauchen
• Wenn Sie die Verhältnisse der Abstände steuern möchten
• Wenn Sie Widgets an beiden Enden platzieren wollen
• Wenn Sie in einem Container mit begrenzter Größe arbeiten

Spacer nicht verwenden:

• In scrollbaren Widgets wie ListView oder GridView
• Innerhalb einer SingleChildScrollView
• In Bereichen mit unbegrenzter Größe
• Wenn ein fester Abstand genügt (dann SizedBox)

Zusammenfassung

Spacer:

• Erzeugt flexiblen Abstand in Row und Column
• Verteilt den Platz anteilig über den Parameter flex
• Muss zwischen mindestens zwei Widgets stehen
• Darf nicht in scrollbaren Widgets mit unbegrenzter Größe stehen
• Entspricht Expanded(child: SizedBox())
• Ist für Abstände gedacht; für Inhalte nehmen Sie Expanded

Goldene Regel: Verwenden Sie Spacer nur in Flex-Containern (Row, Column) mit begrenzter Größe. Niemals in scrollbaren Widgets!