Expanded: Was es ist und wie es in Flutter funktioniert

Was ist Expanded

Expanded ist ein Wrapper-Widget, das ein Kind nimmt und es zwingt, sich auszudehnen, um den verfügbaren Platz in einem Flex-Container (Row, Column, Flex) zu füllen. Expanded hat keine eigene visuelle Darstellung — es verwaltet nur die Einschränkungen (constraints), die an das Kind-Element weitergegeben werden.

Im Kern von Expanded liegt der Flex-Mechanismus, der vom Flutter-Framework bereitgestellt wird. Wenn Row oder Column die Größen ihrer Kinder berechnen, weisen sie zunächst nicht-flexiblen Elementen (regulären Widgets mit festen Größen) Platz zu und verteilen dann den verbleibenden Platz zwischen Expanded- und Flexible-Kindern proportional zu ihren Flex-Faktoren.

Expanded verwendet Flexible.fit = FlexFit.tight. Das bedeutet, dass das Kind von Expanded den gesamten zugewiesenen Platz belegen muss, auch wenn seine eigene Größe kleiner ist. Im Gegensatz zu Flexible mit Fit.loose, wo das Kind kleiner als der zugewiesene Bereich sein kann, dehnt Expanded den Inhalt zwangsweise.

Zusammenfassung: Expanded ist das primäre Werkzeug zum Erstellen proportionaler Layouts in Flutter. Verwenden Sie es, wenn ein Element garantiert die gesamte verfügbare Breite oder Höhe ausfüllen soll.

Expanded vs Flexible: Hauptunterschiede

Expanded und Flexible verteilen beide Platz in Flex-Containern, verhalten sich aber grundlegend unterschiedlich. Der Unterschied liegt in der fit-Eigenschaft, die bestimmt, ob das Kind kleiner als der verfügbare Platz sein kann.

Expanded hat ein strenges Verhaltensmodell: sein fit ist gleich FlexFit.tight. Das bedeutet, dass das Kind-Widget Einschränkungen erhält, die dem verfügbaren Platz entsprechen — nicht mehr, nicht weniger. Wenn das Kind kleiner ist, dehnt es sich. Wenn es größer ist, schrumpft es. Flexible verwendet FlexFit.loose, wodurch das Kind-Element jede beliebige Größe innerhalb des zugewiesenen Platzes haben kann.

In der Praxis: Wenn eine Row zwei Expanded mit flex=1 enthält, nimmt jedes genau die Hälfte der Breite ein. Wenn Sie sie durch Flexible mit fit.loose ersetzen, kann jedes Kind kleiner als die Hälfte sein, wenn seine eigene Größe kleiner ist — der verbleibende Platz bleibt leer.

Zusammenfassung: Verwenden Sie Expanded für strenge proportionale Layouts, Flexible wenn das Kind kleiner als der verfügbare Platz sein kann. Wenn Sie unsicher sind — beginnen Sie mit Expanded, es bietet ein vorhersagbareres Verhalten.

Flex-Faktor: Wie der Platz verteilt wird

Flex-Faktor (Parameter flex) ist ein numerischer Wert, der den Anteil des verfügbaren Platzes bestimmt, den ein Expanded erhält. Standardmäßig ist flex=1, was eine gleichmäßige Verteilung unter allen Expanded-Kindern bedeutet.

Der Verteilungsalgorithmus arbeitet in drei Schritten. Erstens: Flutter berechnet die intrinsische Größe aller nicht-flexiblen Kinder. Zweitens: Der verbleibende Platz wird durch die Summe aller Flex-Faktoren geteilt. Drittens: Jedes Expanded erhält einen Anteil, der seinem Flex-Faktor multipliziert mit der Größe einer Flex-Einheit entspricht.

Beispiel: Eine Row mit 300px Breite enthält zwei Expanded: das erste mit flex=2, das zweite mit flex=1. Der freie Platz (300px minus nicht-flexible Kinder) wird in 3 Teile geteilt. Das erste erhält 2/3, das zweite erhält 1/3. Wenn es keine nicht-flexiblen Kinder gibt, erhält das erste 200px, das zweite 100px.

Der Flex-Faktor kann jede positive ganze Zahl sein. Der Wert 0 ist ein Sonderfall: Expanded mit flex=0 verhält sich wie ein reguläres nicht-flexibles Widget und nimmt minimalen Platz entsprechend der Größe des Kindes ein. Dieses Verhalten ist gleichbedeutend mit dem Fehlen von Expanded.

Zusammenfassung: Der Flex-Faktor ist der Schlüssel zum Erstellen flexibler Layouts. Verwenden Sie Verhältnisse 1:1 für gleiche Spalten, 2:1 für Panels mit Haupt- und Seitenbereich, 3:1 für Oberflächen mit schmaler Navigation.

Codebeispiele mit Expanded

Beispiel 1 demonstriert die grundlegende Verwendung von Expanded in Row zum Erstellen von drei gleichen Spalten.

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

In diesem Beispiel teilen drei Expanded mit flex=1 (Standard) die Breite der Row gleichmäßig auf. Die Container dehnen sich auf die volle Höhe, die von Row festgelegt wird, und nehmen gleiche Anteile ein. Dieser Ansatz ist praktisch für die Erstellung von Spaltenlayouts mit proportionaler Verteilung.

Beispiel 2 zeigt die Verwendung verschiedener Flex-Faktoren zum Erstellen eines Layouts mit Seitenleiste und Hauptinhalt.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Seitenleiste'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Inhaltsbereich'),
        ),
      ),
    ),
  ],
)

Das zweite Beispiel erstellt ein typisches Layout mit einer Seitenleiste (25%) und einem Hauptinhaltsbereich (75%). flex=1 und flex=3 ergeben ein Verhältnis von 1:3. Wenn sich die Bildschirmbreite ändert, bleiben die Proportionen automatisch erhalten — das ist die Grundlage responsiver Oberflächen.

Zusammenfassung: Expanded mit verschiedenen Flex-Faktoren ist ein Standardwerkzeug zum Erstellen responsiver Layouts. Die Kombination von Expanded in Column ermöglicht sowohl horizontale als auch vertikale proportionale Anordnungen.

Häufige Fehler bei der Verwendung von Expanded

Fehler 1: Verwendung von Expanded außerhalb von Row, Column oder Flex. Wenn Sie Expanded direkt in Stack, ListView oder einem anderen Nicht-Flex-Container platzieren, löst Flutter eine LayoutException mit der Meldung „Expanded widgets must be placed inside Flex widgets“ aus. Lösung: Überprüfen Sie das übergeordnete Widget — nur Row, Column oder Flex.

Fehler 2: Platzieren von Expanded innerhalb von ListView ohne Angabe von shrinkWrap. ListView hat standardmäßig eine unendliche Höhe in Scrollrichtung, und Expanded kann seinen Anteil nicht berechnen. Lösung: Verwenden Sie shrinkWrap: true oder umschließen Sie die ListView mit einem SizedBox mit fester Höhe.

Fehler 3: Mehrere Expanded mit einem Gesamt-flex, der den verfügbaren Platz überschreitet. Wenn eine Row mit begrenzter Breite Expanded sowie Widgets mit großer intrinsischer Größe enthält, kann ein Überlauf auftreten. Lösung: Überprüfen Sie die Mindestgrößen nicht-flexibler Kinder und verwenden Sie bei Bedarf FittedBox oder Flex fit.

Fehler 4: Verschachtelte Expanded in Column innerhalb von Row. Wenn ein Expanded innerhalb einer Column ein weiteres Expanded innerhalb einer Row enthält, kann ein Konflikt der Einschränkungen auftreten. Lösung: Begrenzen Sie die Verschachtelungstiefe oder verwenden Sie ConstrainedBox, um Abmessungen auf Zwischenebenen explizit festzulegen.

Zusammenfassung: Expanded erfordert den richtigen übergeordneten Kontext. Stellen Sie immer sicher, dass Expanded direkt in Row, Column oder Flex platziert ist, und vermeiden Sie Verschachtelungen ohne explizite Abmessungen.