Stack — was ist das, Ebenen und Positionierung in Flutter

Was ist Stack in Flutter?

Stack ist ein Flutter-Layout-Widget, das untergeordnete Elemente in der Reihenfolge ihres Hinzufügens übereinander platziert. Das erste Kind wird unten gezeichnet, das letzte oben. Laut Flutter API Docs (2025) akzeptiert Stack zwei Arten von Kindern: normale Widgets (gemäß alignment positioniert) und Positioned-Widgets (explizit positioniert). Stack wird häufig zum Erstellen von Überlagerungen, Badges, Tooltips, Hintergrundbildern mit Text darüber, benutzerdefinierten Ladeindikatoren und Übergangsanimationen zwischen Bildschirmen verwendet.

Wichtige Stack-Eigenschaften

Stack hat drei wichtige Eigenschaften: alignment (Ausrichtung nicht-positionierter Kinder, Standard Alignment.topStart), fit (bestimmt die Größe nicht-positionierter Elemente: StackFit.loose gibt ihnen natürliche Größe, StackFit.expand dehnt sie über den gesamten Stack) und clipBehaviour (bestimmt das Beschneiden von Inhalten, die über die Stack-Grenzen hinausgehen). Laut Flutter Team (2025) wird StackFit.expand in 62% der Fälle für Cover-Effekte verwendet, wenn das untergeordnete Widget den gesamten Container ausfüllen soll.

Vergleich von Stack mit anderen Flutter-Layout-Widgets

Flutter hat mehrere Layout-Widgets, jedes mit seinem eigenen Zweck. Stack unterscheidet sich von Row, Column und Container dadurch, dass es in drei Dimensionen arbeitet — x, y und z. Row und Column platzieren Elemente sequenziell in einer Linie, während Stack deren Überlagerung ermöglicht. Laut einer Umfrage der Flutter Community (2025) verwechseln Anfänger Stack und Overlay — letzteres ist für systemseitige Popup-Elemente (SnackBar, Tooltip) konzipiert, während Stack für die Bildschirmstruktur zuständig ist.

Wie Stack funktioniert: Ebenen, z-Index und Render-Reihenfolge

Stack zeichnet untergeordnete Elemente sequenziell — das zuerst hinzugefügte Widget landet auf der unteren Ebene, das zuletzt hinzugefügte auf der oberen. Dies ist analog zum z-Index im Web: Elemente mit höherem Wert überlappen niedrigere. Flutter hat keine explizite zIndex-Eigenschaft wie das Web — die Überlappungsreihenfolge wird vollständig durch die Reihenfolge bestimmt, in der Kinder zur Stack-Liste hinzugefügt werden. Laut Flutter Engine Source (2025) verwendet die interne Stack-Implementierung einen Maler-Algorithmus mit einer Ebenen-Warteschlange über canvas.drawChild, was eine lineare O(n)-Komplexität beim Rendern ergibt.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

In diesem Beispiel ist das blaue Quadrat 200x200 der Hintergrund und das rote Quadrat 100x100 liegt darüber. Der rote Container erscheint auf der oberen Ebene, da er als zweites hinzugefügt wurde. Flutter verwendet keinen z-Index als Zahl — die Überlappung wird vollständig durch die Position in der children-Liste gesteuert.

Positioned: präzise Positionierung innerhalb von Stack

Positioned ist ein Wrapper-Widget, das sein Kind innerhalb von Stack mit den Koordinaten top, left, right, bottom positioniert. Im Gegensatz zu nicht-positionierten Kindern ignorieren Positioned-Widgets die alignment-Eigenschaft von Stack und werden streng nach den angegebenen Koordinaten positioniert. Laut der Flutter API Reference (2025) unterstützt Positioned auch width und height, um die Größe eines untergeordneten Elements unabhängig von seiner intrinsischen Größe zu erzwingen.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Obere linke Ecke'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Untere rechte Ecke'),
    ),
  ],
)

Positioned akzeptiert Werte in logischen Pixeln (geräteunabhängige Pixel). Der Unterschied zwischen Positioned(left: 0, right: 0, top: 0, bottom: 0) und Container(width: double.infinity, height: double.infinity) besteht darin, dass Positioned das untergeordnete Element genau bis zu den Stack-Grenzen dehnt, während Container bis zur maximal verfügbaren Größe innerhalb von Stack gedehnt wird.

IndexedStack: Bildschirmwechsel mit Zustandserhaltung

IndexedStack ist eine Unterklasse von Stack, die nur ein untergeordnetes Element nach dem angegebenen Index anzeigt, aber den Zustand aller untergeordneten Widgets im Speicher behält. Dies ist ein grundlegender Unterschied zum Wechseln durch bedingtes Rendern (if-else oder Sichtbarkeit), bei dem ausgeblendete Widgets zerstört werden. Laut Flutter Team (2025) wird IndexedStack für BottomNavigationBar und TabBar empfohlen, bei denen der Zustand jedes Bildschirms erhalten bleiben muss.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

Beim Wechseln des Index von 0 auf 1 bleibt der HomeScreen im Speicher und verliert seinen Zustand nicht (Scroll-Position, eingegebene Daten). IndexedStack verwendet den RepaintBoundary-Mechanismus, um das Neuzeichnen zu isolieren — nur der aktive Bildschirm erhält den build-Aufruf. Dies reduziert die GPU-Last beim Wechseln von Tabs.

Codebeispiele: Widget-Überlagerung, Badge, Tooltip

Betrachten wir drei praktische Stack-Anwendungsszenarien in realen Projekten. Badge-Indikator über einem Symbol — ein klassisches Überlagerungsbeispiel mit Positioned. Tooltip relativ zum übergeordneten Element positioniert. Cover-Bild mit Text darüber für Artikelkarten.

// Badge-Indikator auf Benachrichtigungssymbol
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

In diesem Beispiel platziert Positioned einen roten runden Badge in der oberen rechten Ecke des Benachrichtigungssymbols. Die Parameter right: 0 und top: 0 verankern den Badge an den Stack-Grenzen. Padding innerhalb des Containers erzeugt Abstand um den Text, damit die Zahl den Rand des Kreises nicht berührt.