Stack — vad är det, lager och positionering i Flutter

Vad är Stack i Flutter?

Stack är en layout-widget i Flutter som placerar underordnade element ovanpå varandra i den ordning de läggs till. Det första underordnade elementet ritas längst ner, det sista längst upp. Enligt Flutter API Docs (2025) accepterar Stack två typer av underordnade element: vanliga widgets (positionerade enligt alignment) och Positioned-widgets (explicit positionerade). Stack används i stor utsträckning för att skapa överlägg, märken, tooltips, bakgrundsbilder med text över, anpassade laddningsindikatorer och övergångsanimationer mellan skärmar.

Huvudegenskaper för Stack

Stack har tre viktiga egenskaper: alignment (justering av icke-Positioned underordnade element, som standard Alignment.topStart), fit (bestämmer storleken på icke-Positioned element: StackFit.loose ger dem naturlig storlek, StackFit.expand sträcker ut dem över hela Stack) och clipBehaviour (bestämmer beskärning av innehåll som går utanför Stack:s gränser). Enligt Flutter Team (2025) används StackFit.expand i 62% av fallen för Cover-effekter, när den underordnade widgeten måste fylla hela containern.

Jämförelse av Stack med andra layout-widgets i Flutter

I Flutter finns flera layout-widgets, var och en med sitt eget syfte. Stack skiljer sig från Row, Column och Container genom att den arbetar i tre dimensioner — x, y och z. Row och Column placerar element sekventiellt på en rad, medan Stack gör det möjligt att stapla dem. Enligt en undersökning från Flutter Community (2025) blandar nybörjarutvecklare ihop Stack och Overlay — den senare är avsedd för systemets popup-element (SnackBar, Tooltip), medan Stack är för skärmstruktur.

Hur Stack fungerar: lager, z-index och ritordning

Stack ritar underordnade element sekventiellt — den första tillagda widgeten finns på det nedre lagret, den sista på det övre lagret. Detta är analogt med z-index på webben: element med högre värde täcker lägre. I Flutter finns det ingen explicit zIndex-egenskap som på webben — staplingsordningen bestäms helt av ordningen för tillägg av barn till Stack:s lista. Enligt Flutter Engine Source (2025) använder Stack:s interna implementering en målaralgoritm med lagerkö via canvas.drawChild, vilket ger linjär komplexitet O(n) vid ritning.

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

I detta exempel är den blå kvadraten 200×200 bakgrunden, och den röda kvadraten 100×100 ovanpå den. Den röda containern visas på det övre lagret eftersom den lades till som andra. Flutter använder inte z-index som ett nummer — stapling styrs helt av positionen i children-listan.

Positioned: exakt positionering inuti Stack

Positioned är en omslutande widget som positionerar sitt barn inuti Stack med hjälp av koordinaterna top, left, right, bottom. Till skillnad från icke-Positioned underordnade element ignorerar Positioned-widgets Stack:s alignment-egenskap och placeras strikt enligt de givna koordinaterna. Enligt Flutter API Reference (2025) stöder Positioned även width och height för att tvinga fram storleken på det underordnade elementet oberoende av dess inre storlek.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Övre vänstra hörnet'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Nedre högra hörnet'),
    ),
  ],
)

Positioned accepterar värden i logiska pixlar (device-independent pixels). Skillnaden mellan Positioned(left: 0, right: 0, top: 0, bottom: 0) och Container(width: double.infinity, height: double.infinity) — Positioned sträcker ut det underordnade elementet exakt till Stack:s gränser, medan Container till den maximalt tillgängliga storleken inuti Stack.

IndexedStack: växla mellan skärmar med bevarat tillstånd

IndexedStack är en underklass till Stack som endast visar ett underordnat element enligt det angivna indexet, men bevarar tillståndet för alla underordnade widgets i minnet. Detta är en grundläggande skillnad jämfört med växling genom villkorlig rendering (if-else eller visibility), där dolda widgets förstörs. Enligt Flutter Team (2025) rekommenderas IndexedStack för BottomNavigationBar och TabBar, där tillståndet för varje skärm måste bevaras.

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

När index växlas från 0 till 1 förblir HomeScreen i minnet och förlorar inte sitt tillstånd (rullning, inmatade data). IndexedStream använder RepaintBoundary-mekanismen för isolering av omritning — endast den aktiva skärmen får ett build-anrop. Detta minskar GPU-belastningen vid växling av flikar.

Kodexempel: stapling av widgets, märke, tooltip

Låt oss titta på tre praktiska scenarier för användning av Stack i verkliga projekt. Märke för aviseringar ovanpå ikonen — ett klassiskt exempel på stapling med Positioned. Tooltip med positionering i förhållande till det överordnade elementet. Cover-bild med text över för artikelkort.

// Märkesindikator på aviseringsikonen
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,
          ),
        ),
      ),
    ),
  ],
)

I detta exempel placerar Positioned en röd cirkel-märke i det övre högra hörnet av aviseringsikonen. Parametrarna right: 0 och top: 0 förankrar märket vid Stack:s gränser. Padding inuti Container skapar utrymme runt texten så att siffran inte ligger mot cirkelns kant.