Stack — apa itu, lapisan dan penempatan di Flutter

Apa itu Stack di Flutter?

Stack adalah widget tata letak Flutter yang menempatkan elemen anak satu di atas yang lain sesuai urutan penambahannya. Elemen anak pertama digambar di bagian bawah, yang terakhir di bagian atas. Menurut Flutter API Docs (2025), Stack menerima dua jenis elemen anak: widget biasa (ditempatkan sesuai alignment) dan widget Positioned (ditempatkan secara eksplisit). Stack digunakan secara luas untuk membuat tumpukan, lencana, tooltip, gambar latar dengan teks di atasnya, indikator muat kustom, dan animasi transisi antar layar.

Properti Utama Stack

Stack memiliki tiga properti utama: alignment (perataan elemen anak non-Positioned, default Alignment.topStart), fit (menentukan ukuran elemen non-Positioned: StackFit.loose memberi ukuran alami, StackFit.expand meregangkan ke seluruh Stack), dan clipBehaviour (menentukan pemotongan konten yang melampaui batas Stack). Menurut Flutter Team (2025), StackFit.expand digunakan dalam 62% kasus untuk efek Cover, ketika widget anak harus mengisi seluruh wadah.

Perbandingan Stack dengan widget tata letak Flutter lainnya

Di Flutter terdapat beberapa widget tata letak, masing-masing dengan tujuannya sendiri. Stack berbeda dari Row, Column, dan Container karena bekerja dalam tiga dimensi — x, y, dan z. Row dan Column menempatkan elemen secara berurutan dalam satu garis, sementara Stack memungkinkan penumpukannya. Menurut survei Flutter Community (2025), pengembang pemula sering keliru membedakan Stack dan Overlay — yang terakhir ditujukan untuk elemen pop-up sistem (SnackBar, Tooltip), sedangkan Stack untuk struktur layar.

Bagaimana cara kerja Stack: lapisan, z-index, dan urutan gambar

Stack menggambar elemen anak secara berurutan — widget pertama yang ditambahkan berada di lapisan bawah, yang terakhir di lapisan atas. Ini analog dengan z-index di web: elemen dengan nilai lebih tinggi menutupi yang lebih rendah. Di Flutter tidak ada properti zIndex eksplisit seperti di web — urutan tumpukan sepenuhnya ditentukan oleh urutan penambahan anak ke daftar Stack. Menurut Flutter Engine Source (2025), implementasi internal Stack menggunakan algoritma pelukis dengan antrian lapisan melalui canvas.drawChild, yang memberikan kompleksitas linier O(n) saat menggambar.

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

Dalam contoh ini, kotak biru 200×200 akan menjadi latar belakang, dan kotak merah 100×100 di atasnya. Wadah merah akan muncul di lapisan atas karena ditambahkan sebagai yang kedua. Flutter tidak menggunakan z-index sebagai angka — tumpukan sepenuhnya dikendalikan oleh posisi dalam daftar children.

Positioned: penempatan tepat di dalam Stack

Positioned adalah widget pembungkus yang menempatkan anaknya di dalam Stack menggunakan koordinat top, left, right, bottom. Berbeda dengan elemen anak non-Positioned, widget Positioned mengabaikan properti alignment Stack dan ditempatkan secara ketat sesuai koordinat yang diberikan. Menurut Flutter API Reference (2025), Positioned juga mendukung width dan height untuk memaksa ukuran elemen anak terlepas dari ukuran intrinsiknya.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Sudut kiri atas'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Sudut kanan bawah'),
    ),
  ],
)

Positioned menerima nilai dalam piksel logis (device-independent pixels). Perbedaan antara Positioned(left: 0, right: 0, top: 0, bottom: 0) dan Container(width: double.infinity, height: double.infinity) — Positioned meregangkan elemen anak tepat hingga batas Stack, sedangkan Container hingga ukuran maksimum yang tersedia di dalam Stack.

IndexedStack: beralih antar layar dengan mempertahankan status

IndexedStack adalah subkelas dari Stack yang hanya menampilkan satu elemen anak berdasarkan indeks yang ditentukan, tetapi mempertahankan status semua widget anak di memori. Ini adalah perbedaan mendasar dari peralihan melalui rendering bersyarat (if-else atau visibility), di mana widget tersembunyi dimusnahkan. Menurut Flutter Team (2025), IndexedStack direkomendasikan untuk BottomNavigationBar dan TabBar, di mana status setiap layar perlu dipertahankan.

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

Saat beralih index dari 0 ke 1, HomeScreen tetap di memori dan tidak kehilangan statusnya (gulir, data yang dimasukkan). IndexedStack menggunakan mekanisme RepaintBoundary untuk isolasi penggambaran ulang — hanya layar aktif yang menerima panggilan build. Ini mengurangi beban GPU saat beralih tab.

Contoh kode: menumpuk widget, lencana, tooltip

Mari kita lihat tiga skenario praktis penggunaan Stack dalam proyek nyata. Lencana notifikasi di atas ikon — contoh klasik tumpukan dengan Positioned. Tooltip dengan penempatan relatif terhadap elemen induk. Gambar Cover dengan teks di atasnya untuk kartu artikel.

// Indikator lencana pada ikon notifikasi
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,
          ),
        ),
      ),
    ),
  ],
)

Dalam contoh ini, Positioned menempatkan lingkaran merah lencana di sudut kanan atas ikon notifikasi. Parameter right: 0 dan top: 0 mengikat lencana ke batas Stack. Padding di dalam Container menciptakan jarak di sekitar teks agar angka tidak menempel ke tepi lingkaran.