Stack — ano ito, mga layer at pagpoposisyon sa Flutter

Ano ang Stack sa Flutter?

Stack ay isang layout widget ng Flutter na naglalagay ng mga child element nang isa sa ibabaw ng iba ayon sa pagkakasunud-sunod ng pagdaragdag. Ang unang child element ay iginuhit sa ibaba, ang huli — sa itaas. Ayon sa Flutter API Docs (2025), ang Stack ay tumatanggap ng dalawang uri ng child element: mga ordinaryong widget (na naka-position ayon sa alignment) at Positioned widget (hayagang naka-position). Ang Stack ay malawakang ginagamit para sa paggawa ng mga overlay, badge, tooltip, background image na may text sa ibabaw, custom loading indicator at transition animation sa pagitan ng mga screen.

Mga Pangunahing Property ng Stack

Ang Stack ay may tatlong pangunahing property: alignment (pag-align ng mga non-Positioned child element, default ay Alignment.topStart), fit (tinutukoy ang laki ng mga non-Positioned element: ang StackFit.loose ay nagbibigay ng natural na laki, ang StackFit.expand ay nagpapahaba sa buong Stack) at clipBehaviour (tinutukoy ang pagputol ng content na lumalabas sa mga hangganan ng Stack). Ayon sa Flutter Team (2025), ang StackFit.expand ay ginagamit sa 62% ng mga kaso para sa Cover effect, kapag ang child widget ay dapat punan ang buong container.

Paghahambing ng Stack sa iba pang layout widget ng Flutter

Sa Flutter ay may ilang layout widget, bawat isa ay may kanya-kanyang layunin. Stack ay naiiba sa Row, Column at Container dahil ito ay gumagana sa tatlong dimensyon — x, y at z. Ang Row at Column ay naglalagay ng mga element nang sunud-sunod sa isang linya, habang ang Stack ay nagpapahintulot ng pagpapatong sa mga ito. Ayon sa survey ng Flutter Community (2025), ang mga baguhang developer ay nalilito ang Stack at Overlay — ang huli ay para sa system pop-up element (SnackBar, Tooltip), at ang Stack ay para sa istraktura ng screen.

Paano gumagana ang Stack: mga layer, z-index at pagkakasunod-sunod ng pagguhit

Stack ay gumuhit ng mga child element nang sunud-sunod — ang unang idinagdag na widget ay nasa ibabang layer, ang huli — sa itaas na layer. Ito ay kahalintulad ng z-index sa web: ang mga element na may mas mataas na halaga ay sumasakop sa mga mas mababa. Sa Flutter ay walang hayagang property na zIndex tulad ng sa web — ang pagkakasunod-sunod ng pagpapatong ay ganap na tinutukoy ng pagkakasunud-sunod ng pagdaragdag ng mga bata sa listahan ng Stack. Ayon sa Flutter Engine Source (2025), ang panloob na implementasyon ng Stack ay gumagamit ng painter algorithm na may queue ng layer sa pamamagitan ng canvas.drawChild, na nagbibigay ng linear complexity O(n) sa pagguhit.

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

Sa halimbawang ito ang asul na parisukat na 200×200 ay magiging background, at ang pulang parisukat na 100×100 ay nasa ibabaw nito. Ang pulang container ay lilitaw sa itaas na layer dahil ito ay idinagdag na pangalawa. Ang Flutter ay hindi gumagamit ng z-index bilang numero — ang pagpapatong ay ganap na kinokontrol ng posisyon sa listahan ng children.

Positioned: tumpak na pagpoposisyon sa loob ng Stack

Positioned ay isang wrapper widget na nagpoposisyon ng kanyang anak sa loob ng Stack gamit ang mga coordinate na top, left, right, bottom. Hindi tulad ng mga non-Positioned child element, ang Positioned widget ay binabalewala ang alignment property ng Stack at inilalagay nang mahigpit ayon sa ibinigay na coordinate. Ayon sa Flutter API Reference (2025), ang Positioned ay sumusuporta rin sa width at height para sa pagpilit ng laki ng child element nang hiwalay sa kanyang intrinsic size.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Kaliwang sulok sa itaas'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Kanang sulok sa ibaba'),
    ),
  ],
)

Ang Positioned ay tumatanggap ng mga halaga sa lohikal na pixel (device-independent pixels). Ang pagkakaiba sa pagitan ng Positioned(left: 0, right: 0, top: 0, bottom: 0) at Container(width: double.infinity, height: double.infinity) — ang Positioned ay nagpapahaba ng child element nang eksakto sa mga hangganan ng Stack, habang ang Container ay hanggang sa maximum na available na laki sa loob ng Stack.

IndexedStack: paglipat sa pagitan ng mga screen na may pagpapanatili ng estado

IndexedStack ay isang subclass ng Stack na nagpapakita lamang ng isang child element ayon sa tinukoy na index, ngunit pinapanatili ang estado ng lahat ng child widget sa memorya. Ito ay isang pangunahing pagkakaiba mula sa paglipat sa pamamagitan ng conditional rendering (if-else o visibility), kung saan ang mga nakatagong widget ay nawawasak. Ayon sa Flutter Team (2025), ang IndexedStack ay inirerekomenda para sa BottomNavigationBar at TabBar, kung saan kailangang panatilihin ang estado ng bawat screen.

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

Kapag lumipat ang index mula 0 patungong 1, ang HomeScreen ay nananatili sa memorya at hindi nawawala ang kanyang estado (pag-scroll, mga inilagay na datos). Ang IndexedStack ay gumagamit ng RepaintBoundary mechanism para sa paghihiwalay ng redrawing — tanging ang aktibong screen ang tumatanggap ng build call. Ito ay nagbabawas ng GPU load sa paglipat ng mga tab.

Mga halimbawa ng code: pagpapatong ng widget, badge, tooltip

Tingnan natin ang tatlong praktikal na sitwasyon ng paggamit ng Stack sa totoong proyekto. Badge ng notipikasyon sa ibabaw ng icon — klasikong halimbawa ng pagpapatong gamit ang Positioned. Tooltip na may pagpoposisyon kaugnay sa parent element. Cover na larawan na may text sa ibabaw para sa mga card ng artikulo.

// Badge indicator sa icon ng notipikasyon
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,
          ),
        ),
      ),
    ),
  ],
)

Sa halimbawang ito, ang Positioned ay naglalagay ng pulang bilog na badge sa kanang itaas na sulok ng icon ng notipikasyon. Ang mga parameter na right: 0 at top: 0 ay nag-angkla ng badge sa mga hangganan ng Stack. Ang Padding sa loob ng Container ay lumilikha ng espasyo sa paligid ng text upang ang numero ay hindi dumikit sa gilid ng bilog.