Flexible: was es ist, Funktionsprinzip und Konfiguration in der mobilen Entwicklung

Was ist Flexible

Flexible ist ein Wrapper-Widget, das einem Kind-Element in einem Flex-Container flexiblen Platz bietet. Flexible nimmt wie Expanded an der Verteilung des freien Platzes teil, jedoch mit einem entscheidenden Unterschied: Das Kind von Flexible kann weniger Platz beanspruchen als zugewiesen, wenn seine eigene Größe kleiner als der verfügbare Platz ist.

Flexible verwendet den Flex-Algorithmus von Flutter, um den verfügbaren Platz zu berechnen. Zuerst fragt das Framework alle unflexiblen Kinder (Widgets ohne Flexible/Expanded) ab und berechnet deren intrinsische Größe. Der verbleibende Platz wird proportional zu ihren Flex-Faktoren unter den flexiblen Kindern aufgeteilt. Nach der Platzverteilung überprüft Flexible den Fit — wenn er loose ist, erhält das Kind die Einschränkung, nicht größer als zugewiesen zu sein, sodass es klein bleiben kann.

Eine Besonderheit von Flexible: Wenn das Kind-Widget eigene Mindestgrößen hat (z. B. Text mit einem langen String), weist Flexible den angeforderten Platz ohne erzwungenes Strecken zu. Dies macht Flexible unverzichtbar für Elemente, deren Größe vom Inhalt und nicht vom Container bestimmt werden soll.

Zusammenfassung: Verwenden Sie Flexible, wenn Sie Platz für ein Element reservieren möchten, es aber nicht zum Strecken zwingen wollen. Dies bewahrt die natürlichen Größen des Inhalts bei gleichzeitig flexibler Layoutverteilung.

FlexFit.tight vs FlexFit.loose

FlexFit ist eine Aufzählung mit zwei Werten: tight und loose. Die Wahl des Fit bestimmt, ob das Kind-Widget zwangsweise auf die Größe des zugewiesenen Platzes gestreckt wird.

FlexFit.tight: Das Kind-Element erhält tight constraints — die Mindest- und Höchstgrößen entsprechen dem zugewiesenen Platz. Das Kind muss genau so viel Platz einnehmen, wie der Flex-Algorithmus zugewiesen hat. Wenn das Kind kleiner ist, wird es gestreckt. Wenn es größer ist, wird es gestaucht. Das Verhalten ist identisch mit Expanded.

FlexFit.loose: Das Kind-Element erhält loose constraints — die Mindestgröße ist 0, die Höchstgröße entspricht dem zugewiesenen Platz. Das Kind kann jede Größe von 0 bis zum Maximum haben. Wenn das Kind klein ist (z. B. Text mit einem kurzen String), nimmt es seine natürliche Breite ein, und der verbleibende Platz bleibt leer.

Zusammenfassung: FlexFit.loose ist die Wahl für Textblöcke und Elemente mit natürlicher Größe. FlexFit.tight ist für strenge Spaltenlayouts, bei denen alle Elemente dieselbe Breite oder Höhe haben müssen.

Wann man Flexible anstelle von Expanded verwendet

Flexible und Expanded sehen ähnlich aus, lösen aber unterschiedliche Aufgaben. Expanded streckt das Kind immer, um den gesamten verfügbaren Platz auszufüllen. Flexible kann leeren Platz um das Kind herum lassen, wenn die Inhaltsgröße kleiner als der zugewiesene Anteil ist.

Szenario für Flexible: In einer Row befinden sich zwei Schaltflächen. Die erste — „Kaufen“ (kurzer Text), die zweite — „In den Warenkorb“ (langer Text). Mit Expanded werden beide Schaltflächen auf gleiche Breite gestreckt, und der kurze Text erhält große Innenabstände. Mit Flexible nimmt jede Schaltfläche die Breite ihres Textes ein, und der freie Platz bleibt zwischen ihnen oder an den Rändern.

Szenario für Expanded: In einer Column befinden sich drei Karten, die unabhängig vom Inhalt die gleiche Höhe einnehmen sollen. Expanded teilt die verfügbare Höhe gleichmäßig auf, und jede Karte wird auf die gleiche Größe gestreckt. Flexible mit loose würde hier nicht funktionieren — eine kleine Karte bliebe klein und würde das einheitliche Design brechen.

Zusammenfassung: Wählen Sie Flexible, wenn der Inhalt die Elementgröße bestimmt und leerer Platz darum akzeptabel ist. Wählen Sie Expanded, wenn alle Elemente unabhängig vom Inhalt die gleiche Größe haben müssen.

Codebeispiele mit Flexible

Beispiel 1 zeigt die grundlegende Verwendung von Flexible mit FlexFit.loose in einer Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('kurz'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('langer Text für Demo'),
      ),
    ),
  ],
)

Im Beispiel verwenden beide Flexible loose fit. Der erste Container mit kurzem Text nimmt seine natürliche Breite ein. Der zweite mit langem Text — seine eigene. Row weist jedem die Hälfte der verfügbaren Breite zu, aber loose fit erlaubt den Containern, kleiner zu sein, und der freie Platz bleibt zwischen ihnen leer.

Beispiel 2 — Vergleich von Flexible mit Tight und Loose fit in einer Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — gestreckte volle Höhe'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — natürliche Höhe'),
        ),
      ),
    ),
  ],
)

In der Column streckt das erste Flexible (tight) die Card auf die Hälfte der verfügbaren Höhe. Das zweite Flexible (loose) — die Card nimmt die Höhe entsprechend ihres Inhalts ein, und der verbleibende Platz bleibt leer. Visuell ist zu sehen, wie tight den Bereich zwangsweise füllt, während loose eine kompakte Größe bewahrt.

Zusammenfassung: Im Produktionscode wird Flexible mit loose für Formularfelder, Schaltflächen und Textblöcke verwendet. Flexible mit tight ist äquivalent zu Expanded und wird für gleichmäßige Verteilung verwendet.

Häufige Fehler bei der Verwendung von Flexible

Fehler 1: Verwendung von Flexible außerhalb eines Flex-Containers. Wie Expanded wirft Flexible eine LayoutException, wenn es nicht innerhalb von Row, Column oder Flex platziert ist. Lösung: Überprüfen Sie immer die Eltern-Widget-Kette.

Fehler 2: Verwechslung von Flexible und Expanded. Entwickler verwenden oft Expanded, wenn Flexible mit loose fit benötigt wird, und umgekehrt. Ergebnis: Expanded streckt ein Element mit kurzem Text und erzeugt große leere Ränder. Lösung: Wenn die Elementgröße kleiner als zugewiesen sein kann — verwenden Sie Flexible(fit: FlexFit.loose).

Fehler 3: Null-Flex-Faktor. Flexible mit flex=0 verhält sich wie ein unflexibles Widget, was unintuitiv sein kann. Der Entwickler erwartet flexibles Verhalten, aber das Element nimmt die Mindestgröße ein. Lösung: flex sollte ≥1 für aktive Platzverteilung sein.

Fehler 4: Flexible innerhalb einer ScrollView ohne Größenbeschränkung. Wenn Flexible in einer Column innerhalb einer SingleChildScrollView ist, bietet der Scroll-Container unendlich Platz, und die Flex-Verteilung funktioniert nicht. Lösung: Beschränken Sie die Größe des Scroll-Containers mit SizedBox oder ConstrainedBox.

Zusammenfassung: Flexible erfordert die gleiche Aufmerksamkeit für den Elternkontext wie Expanded. Der einzige Unterschied ist der Fit — wählen Sie ihn bewusst basierend auf der Aufgabe.