Bölüm 2 — Konu 9: `Expanded`, `Flexible`, `Spacer`, Intrinsic Widget'lar

Bölüm 2'nin son konusundayız. Bir önceki derste öğrendiğimiz "Row içinde sonsuz genişlik hatası" sorununu çözen araçları burada işleyeceğiz.

#Expanded — Kalan Alanı Doldurma

Row(
  children: [
    Container(width: 50, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue), // kalan TÜM alanı doldurur
    ),
  ],
)

Expanded, Bölüm 2 Konu 8'de öğrendiğimiz constraint sistemini "senin lehine kullanan" bir widget'tır — Row'un, çocuklarına verdiği "sonsuz genişlik" imkanını, Expanded güvenli bir şekilde çocuğuna aktarır (artık "sonsuz boyut seç" paradoksuna düşmeden, çünkü Expanded, kalan kesin alanı hesaplayıp iletir).

Nasıl çalışır — adım adım:

1. Row, toplam genişliğini (300px diyelim) biliyor.
2. İlk çocuk (Container(width: 50)), 50px kullanıyor.
3. Row, kalan 250px'i, Expanded'e kesin (tight) bir kısıtlama olarak veriyor: "tam olarak 250px olmalısın."
4. Expanded'in çocuğu (Container), bu kesin kısıtlamayı alıyor ve 250px genişliğinde çiziliyor.

#flex Parametresi — Oransal Paylaşım

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
)

Birden fazla Expanded kullanıldığında, kalan alan, flex değerlerinin oranına göre paylaştırılır — burada flex: 1 ve flex: 2 olduğu için, mavi kutu kırmızının iki katı genişlikte olur (toplam 3 birim, kırmızı 1/3'ü, mavi 2/3'ü alır). Varsayılan flex değeri 1'dir.

#Flexible — Expanded'in Daha Esnek Kuzeni

Row(
  children: [
    Flexible(
      child: Container(width: 100, color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Flexible ile Expanded arasındaki fark: Expanded, aslında Flutter'ın kaynak kodunda Flexible'dan türeyen bir sınıftır (Dart Bölüm 7'de öğrendiğimiz extends kalıtımı) — Expanded, Flexible'ın fit: FlexFit.tight (yani "kesinlikle tüm kalan alanı doldur") ile sabitlenmiş bir versiyonudur. Flexible'ın kendisi, varsayılan olarak fit: FlexFit.loose kullanır — bu, çocuğun kendi istediği kadar yer kaplamasına izin verir, ama gerekirse kalan alana kadar büyüyebilir.

// Flexible (loose) — çocuk kendi boyutunu seçebilir, taşmaz
Flexible(child: Text('Kısa metin'))

// Expanded (tight) — çocuk HER ZAMAN kalan tüm alanı doldurur
Expanded(child: Text('Kısa metin')) // Text, ihtiyacından fazla yer kaplar (boş alan bırakır)

Bu, Bölüm 2 Konu 7'de Center'ın aslında Align'ın özel bir hali olduğunu öğrendiğimiz kalıba çok benzer — burada da Expanded, Flexible'ın özel (daha kısıtlayıcı) bir halidir.

#Spacer — Boş Alan Widget'ı

Row(
  children: [
    Text('Sol'),
    Spacer(), // aradaki tüm boşluğu doldurur
    Text('Sağ'),
  ],
)

Spacer, görünmez bir widget'tır — sadece kalan alanı doldurarak, iki widget'ı birbirinden uzaklaştırmaya yarar. Bilmen faydalı bir detay: Spacer, aslında kaynak kodda Expanded'i kullanan bir widget'tır (Expanded(child: SizedBox()) gibi bir kompozisyon) — yani Expanded'i zaten öğrendiğin için, Spacer'ın nasıl çalıştığını da örtük olarak biliyorsun. Bu, Row(children: [Text('Sol'), Spacer(), Text('Sağ')]) yazmanın, MainAxisAlignment.spaceBetween kullanmaya alternatif bir yol olduğunu gösteriyor — ikisi de benzer bir görsel sonuç verir, ama Spacer'a flex de verebilirsin, bu da ona MainAxisAlignment'ın sağlamadığı bir esneklik katar.

Row(
  children: [
    Text('Sol'),
    Spacer(flex: 2), // 2 birim boşluk
    Text('Orta'),
    Spacer(flex: 1), // 1 birim boşluk
    Text('Sağ'),
  ],
)

#Intrinsic Widget'lar — IntrinsicWidth, IntrinsicHeight

Bölüm 2 Konu 8'de öğrendiğimiz "constraints go down, sizes go up" kuralının istisnai bir durumunu ele alan widget'lardır. Normalde bir widget, kendi doğal (intrinsic) boyutunu bilmeden, sadece kendine verilen kısıtlamaya göre boyutlanır. Bazen, bir widget grubunun hepsinin aynı genişlikte olmasını istersin — örneğin bir Column içindeki tüm butonların, en geniş olanına göre eşit genişlikte olmasını:

IntrinsicWidth(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      ElevatedButton(onPressed: () {}, child: Text('Kısa')),
      ElevatedButton(onPressed: () {}, child: Text('Çok Daha Uzun Bir Buton Metni')),
    ],
  ),
)

IntrinsicWidth, önce tüm çocukların "doğal olarak istediği" genişliği hesaplar, en genişini bulur, sonra hepsine bu genişliği zorunlu kılar.

Önemli performans notu: IntrinsicWidth/IntrinsicHeight, normal layout sürecinden daha maliyetlidir — çünkü layout ağacını iki kere (önce "doğal boyutları öğrenmek için", sonra "gerçek boyutlandırma için") gezmesi gerekir. Bölüm 9'da (performans) bu tür maliyetli widget'ları ne zaman kullanmaman gerektiğini derinlemesine işleyeceğiz — şimdilik, gerçekten gerekmedikçe kullanmaktan kaçınmanı öneririm.

#Hepsini Bir Arada — Pratik Bir Örnek

class OranliBar extends StatelessWidget {
  const OranliBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: Container(color: Colors.green), // %30 (3/10)
          ),
          Expanded(
            flex: 7,
            child: Container(color: Colors.grey[300]!), // %70 (7/10)
          ),
        ],
      ),
    );
  }
}

Bu, gerçek uygulamalarda gördüğün ilerleme çubukları (progress bar) veya oran gösterge çubuklarının temel mantığıdır — flex oranlarıyla, bir alanın yüzdesel dağılımını modelliyorsun.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Expanded, Row/Column içinde kalan alanı doldurur; flex parametresiyle birden fazla Expanded arasında oransal paylaşım yapılabilir.
• Flexible, Expanded'in daha esnek üst sınıfıdır — loose modda (varsayılan), çocuk kendi boyutunu seçebilir; Expanded, bunun tight (zorunlu, tam doldurma) versiyonudur.
• Spacer, görünmez bir boşluk widget'ıdır; arka planda Expanded kullanır, flex ile oransal boşluk oluşturabilir.
• IntrinsicWidth/IntrinsicHeight, bir grup widget'ı "en büyük olana göre" eşitler, ama normal layout'tan daha maliyetlidir.

#📝 Ödevler

• [ ] Row içine 3 farklı Container koy, Expanded ve farklı flex oranlarıyla (1:2:1 gibi) genişlik dağıt.
• [ ] Flexible ile Expanded arasındaki farkı, aynı Text widget'ını ikisiyle de deneyerek (görsel farkı gözlemleyerek) göster.
• [ ] Spacer kullanarak, bir Row içinde iki widget'ı birbirinden uzaklaştır; sonra aynı sonucu MainAxisAlignment.spaceBetween ile elde et, ikisini karşılaştır.
• [ ] IntrinsicWidth kullanarak, farklı uzunluktaki metinlere sahip birkaç butonu eşit genişlikte yap.
• [ ] Konu 9'daki "OranliBar" örneğine benzer, kendi flex oranlarınla bir "yüzde göstergesi" çubuğu tasarla.

#🎮 Mini Uygulama — Basit Bir "Bütçe Dağılımı" Ekranı

Bölüm 2'de öğrendiğin tüm layout araçlarını (Container, Row, Column, Stack, Padding, Align, Center, Expanded, Flexible, Spacer) birleştiren bir ekran tasarla:

Gereksinimler:

• Üstte bir başlık (Text, Padding ile boşluklu).
• Ortada, Expanded/flex kullanan bir "bütçe çubuğu" (en az 3 farklı renkli, farklı oranlı bölüm — örneğin "Kira: %40, Yemek: %30, Eğlence: %30").
• Çubuğun altında, her kategori için bir renk göstergesi ve isim (Row içinde küçük renkli kutular + Text, Spacer ile aralarında boşluk).
• Tüm ekran Center ve Padding ile düzgün ortalanmış ve boşluklu olsun.

Bu projede de StatelessWidget yeterli — setState()'e gerek yok. Amaç, Bölüm 2'nin tamamını kapsayan bir layout pratiği yapmak.

#🏁 Bölüm 2 Tamamlandı!

Widget'larla düşünmeyi, StatelessWidget/StatefulWidget ayrımını, temel layout widget'larını, constraint sistemini ve esnek boyutlandırma araçlarını (Expanded/Flexible/Spacer) öğrendin. Artık gerçek, düzenli arayüzler kurabiliyorsun.

Sıradaki durak Bölüm 3 — İlk Gerçek Ekranlar: MaterialApp/Scaffold/AppBar ile gerçek bir uygulama iskeleti kuracak, listeler (ListView) ve navigasyon (ekranlar arası geçiş) ile ilk çok ekranlı uygulamanı yazacaksın.