Stack — nedir, Flutter'da katmanlar ve konumlandırma

Flutter'da Stack nedir?

Stack, alt öğeleri eklenme sırasına göre üst üste yerleştiren bir Flutter düzen widget'ıdır. İlk alt öğe en alta, son alt öğe en üste çizilir. Flutter API Docs (2025)'e göre Stack, iki tür alt öğe kabul eder: normal widget'lar (alignment'a göre konumlandırılır) ve Positioned widget'lar (açıkça konumlandırılır). Stack, katmanlamalar, rozetler, araç ipuçları, üzerinde metin bulunan arka plan resimleri, özel yükleme göstergeleri ve ekranlar arası geçiş animasyonları oluşturmak için yaygın olarak kullanılır.

Stack'in temel özellikleri

Stack'in üç temel özelliği vardır: alignment (Positioned olmayan alt öğelerin hizalaması, varsayılan Alignment.topStart), fit (Positioned olmayan öğelerin boyutunu belirler: StackFit.loose onlara doğal boyut verir, StackFit.expand tüm Stack'i dolduracak şekilde uzatır) ve clipBehaviour (Stack sınırlarının ötesine taşan içeriğin kırpılmasını belirler). Flutter Team (2025)'e göre, StackFit.expand alt widget'ın tüm kabı doldurması gereken Kapak efektleri için vakaların %62'sinde kullanılır.

Stack'in diğer Flutter düzen widget'larıyla karşılaştırılması

Flutter'ın her biri kendi amacına sahip birkaç düzen widget'ı vardır. Stack, Row, Column ve Container'dan üç boyutta — x, y ve z — çalışmasıyla ayrılır. Row ve Column öğeleri sırayla bir satıra yerleştirirken, Stack bunların üst üste binmesine izin verir. Flutter Community anketine (2025) göre, acemi geliştiriciler Stack ve Overlay'i karıştırır — Overlay sistem açılır öğeleri (SnackBar, Tooltip) için tasarlanmıştır, Stack ise ekran yapısı içindir.

Stack nasıl çalışır: katmanlar, z-index ve işleme sırası

Stack alt öğeleri sırayla çizer — ilk eklenen widget en alt katmanda, son eklenen en üst katmanda yer alır. Bu, web'deki z-index'e benzer: daha yüksek değere sahip öğeler daha düşük olanların üzerine biner. Flutter'da web gibi açık bir zIndex özelliği yoktur — üst üste binme sırası tamamen alt öğelerin Stack listesine eklenme sırasına göre belirlenir. Flutter Engine Source (2025)'e göre, Stack'in iç uygulaması, canvas.drawChild aracılığıyla bir katman kuyruğu ile boya algoritması kullanarak işleme için doğrusal O(n) karmaşıklığı sağlar.

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

Bu örnekte, 200x200 mavi kare arka plan olacak ve 100x100 kırmızı kare bunun üzerinde olacak. Kırmızı kap, ikinci olarak eklendiği için üst katmanda görünür. Flutter z-index'i bir sayı olarak kullanmaz — üst üste binme tamamen children listesindeki konum tarafından yönetilir.

Positioned: Stack içinde hassas konumlandırma

Positioned, alt öğesini Stack içinde top, left, right, bottom koordinatlarını kullanarak konumlandıran bir sarmalayıcı widget'tır. Positioned olmayan alt öğelerin aksine, Positioned widget'ları Stack'in alignment özelliğini yok sayar ve verilen koordinatlara göre kesin olarak konumlandırılır. Flutter API Reference (2025)'e göre, Positioned, içsel boyutundan bağımsız olarak bir alt öğenin boyutunu zorlamak için width ve height'ı da destekler.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Sol üst köşe'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Sağ alt köşe'),
    ),
  ],
)

Positioned değerleri mantıksal piksel (cihazdan bağımsız piksel) cinsinden kabul eder. Positioned(left: 0, right: 0, top: 0, bottom: 0) ile Container(width: double.infinity, height: double.infinity) arasındaki fark, Positioned'in alt öğeyi tam olarak Stack sınırlarına kadar uzatması, Container'ın ise Stack içinde mevcut maksimum boyuta kadar uzanmasıdır.

IndexedStack: durum koruma ile ekranlar arası geçiş

IndexedStack, belirtilen dizine göre yalnızca bir alt öğe görüntüleyen, ancak tüm alt widget'ların durumunu bellekte koruyan Stack'in bir alt sınıfıdır. Bu, gizli widget'ların yok edildiği koşullu işleme (if-else veya görünürlük) yoluyla geçişten temel bir farktır. Flutter Team (2025)'e göre IndexedStack, her ekranın durumunun korunması gereken BottomNavigationBar ve TabBar için önerilir.

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

Dizin 0'dan 1'e değiştirildiğinde, HomeScreen bellekte kalır ve durumunu (kaydırma konumu, girilen veriler) kaybetmez. IndexedStack, yeniden boyamayı izole etmek için RepaintBoundary mekanizmasını kullanır — yalnızca etkin ekran build çağrısını alır. Bu, sekmeler arasında geçiş yaparken GPU yükünü azaltır.

Kod örnekleri: widget katmanlama, rozet, araç ipucu

Gerçek projelerde Stack kullanımının üç pratik senaryosunu inceleyelim. Bir simgenin üzerinde rozet göstergesi — Positioned ile klasik bir katmanlama örneği. Üst öğeye göre konumlandırılmış araç ipucu. Makale kartları için üzerinde metin bulunan Kapak resmi.

// Bildirim simgesindeki rozet göstergesi
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,
          ),
        ),
      ),
    ),
  ],
)

Bu örnekte, Positioned bildirim simgesinin sağ üst köşesine kırmızı bir daire rozet yerleştirir. right: 0 ve top: 0 parametreleri rozeti Stack sınırlarına sabitler. Container içindeki Padding, sayının dairenin kenarına değmemesi için metnin etrafında boşluk oluşturur.