Stack — mi ez, rétegek és pozícionálás Flutterben

Mi a Stack a Flutterben?

Stack egy Flutter elrendezési widget, amely a gyermekelemeket hozzáadásuk sorrendjében egymásra helyezi. Az első gyermekelem alul, az utolsó felül rajzolódik ki. A Flutter API Docs (2025) szerint a Stack kétféle gyermekelemtípust fogad el: közönséges widgeteket (az alignment szerint pozícionálva) és Positioned widgeteket (kifejezetten pozícionálva). A Stack széles körben használatos fedések, jelvények, tippek, háttérképek szöveggel, egyéni betöltésjelzők és képernyők közötti átmeneti animációk készítéséhez.

A Stack fő tulajdonságai

A Stack három kulcsfontosságú tulajdonsággal rendelkezik: alignment (a nem-Positioned gyermekelemek igazítása, alapértelmezés szerint Alignment.topStart), fit (meghatározza a nem-Positioned elemek méretét: a StackFit.loose természetes méretet ad, a StackFit.expand az egész Stackre kinyújtja) és clipBehaviour (meghatározza a Stack határain túlnyúló tartalom levágását). A Flutter Team (2025) szerint a StackFit.expand az esetek 62%-ában Cover effektusokhoz használatos, amikor a gyermek widgetnek ki kell töltenie az egész konténert.

Stack összehasonlítása más Flutter elrendezési widgetekkel

A Flutterben több elrendezési widget létezik, mindegyiknek saját célja van. A Stack abban különbözik a Row, Column és Container widgetektől, hogy három dimenzióban — x, y és z — működik. A Row és Column egymás után egy vonalba helyezi az elemeket, míg a Stack lehetővé teszi egymásra helyezésüket. A Flutter Community (2025) felmérése szerint a kezdő fejlesztők összetévesztik a Stacket az Overlayjel — utóbbi a rendszer felugró elemeihez (SnackBar, Tooltip) készült, a Stack pedig a képernyő szerkezetéhez.

Hogyan működik a Stack: rétegek, z-index és rajzolási sorrend

Stack a gyermekelemeket egymás után rajzolja — az első hozzáadott widget az alsó rétegen, az utolsó a felső rétegen található. Ez a webes z-index analógiája: a magasabb értékkel rendelkező elemek lefedik az alacsonyabbakat. A Flutterben nincs explicit zIndex tulajdonság, mint a weben — a fedési sorrendet teljes mértékben a gyermekek Stack listájához való hozzáadásának sorrendje határozza meg. A Flutter Engine Source (2025) szerint a Stack belső implementációja egy festő algoritmust használ rétegsorral a canvas.drawChild segítségével, ami lineáris O(n) komplexitást biztosít a rajzolás során.

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

Ebben a példában a 200×200-as kék négyzet lesz a háttér, a 100×100-as piros négyzet pedig fölötte. A piros konténer a felső rétegen jelenik meg, mivel másodikként lett hozzáadva. A Flutter nem használja a z-indexet számként — a fedést teljes mértékben a children listában elfoglalt pozíció vezérli.

Positioned: pontos pozícionálás a Stacken belül

Positioned egy burkoló widget, amely a gyermekét a Stacken belül a top, left, right, bottom koordináták segítségével pozícionálja. A nem-Positioned gyermekelemekkel ellentétben a Positioned widgetek figyelmen kívül hagyják a Stack alignment tulajdonságát, és szigorúan a megadott koordináták szerint helyezkednek el. A Flutter API Reference (2025) szerint a Positioned támogatja a width és height tulajdonságokat is a gyermekelem méretének kényszerítésére, függetlenül annak belső méretétől.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Bal felső sarok'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Jobb alsó sarok'),
    ),
  ],
)

A Positioned az értékeket logikai pixelekben (device-independent pixels) fogadja. A különbség a Positioned(left: 0, right: 0, top: 0, bottom: 0) és a Container(width: double.infinity, height: double.infinity) között — a Positioned pontosan a Stack határáig nyújtja a gyermekelemet, míg a Container a Stacken belüli maximálisan elérhető méretig.

IndexedStack: váltás képernyők között az állapot megtartásával

IndexedStack a Stack egy alosztálya, amely csak egy gyermekelemet jelenít meg a megadott index szerint, de az összes gyermek widget állapotát a memóriában tartja. Ez alapvető különbség a feltételes megjelenítéssel (if-else vagy visibility) történő váltáshoz képest, ahol a rejtett widgetek megsemmisülnek. A Flutter Team (2025) szerint az IndexedStack ajánlott BottomNavigationBar és TabBar esetén, ahol meg kell őrizni az egyes képernyők állapotát.

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

Az index 0-ról 1-re váltásakor a HomeScreen a memóriában marad, és nem veszíti el állapotát (görgetés, bevitt adatok). Az IndexedStack a RepaintBoundary mechanizmust használja az újrarajzolás elkülönítésére — csak az aktív képernyő kap build hívást. Ez csökkenti a GPU terhelését a lapok közötti váltáskor.

Kódpéldák: widgetek egymásra helyezése, jelvény, tipp

Vizsgáljuk meg a Stack használatának három gyakorlati forgatókönyvét valós projektekben. Értesítési jelvény az ikon fölött — klasszikus példa az egymásra helyezésre Positioned segítségével. Tipp a szülőelemhez viszonyított pozícionálással. Cover kép szöveggel a tetején cikkek kártyáihoz.

// Jelvényjelző az értesítési ikonon
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,
          ),
        ),
      ),
    ),
  ],
)

Ebben a példában a Positioned egy piros kör jelvényt helyez el az értesítési ikon jobb felső sarkában. A right: 0 és top: 0 paraméterek a Stack határaihoz rögzítik a jelvényt. A Containeren belüli Padding helyet hoz létre a szöveg körül, hogy a szám ne érjen hozzá a kör széléhez.