Bölüm 2 — Konu 8: Constraint Sistemi — "Constraints Go Down, Sizes Go Up, Parent Sets Position"

Bu, Flutter layout'unun en temel mantığıdır — bunu anlamadan, "neden bu widget beklediğim boyutta değil" tarzı sorularla sürekli karşılaşırsın. Flutter ekibinin kendisi bu cümleyi resmi dokümantasyonda kullanır çünkü layout sisteminin özünü üç kısa ifadede özetler.

#Üç Kural

Constraints go down. Sizes go up. Parent sets position. (Kısıtlamalar aşağı iner. Boyutlar yukarı çıkar. Ebeveyn konumu belirler.)

Bunu Bölüm 1 Konu 1'de öğrendiğimiz RenderObject ağacı bağlamında düşünelim — bu üç kural, aslında RenderObject'lerin birbirleriyle nasıl "konuştuğunu" tarif ediyor.

#Kural 1: "Constraints Go Down" — Kısıtlamalar Aşağı İner

Bir widget, ebeveyninden (parent) bir "kısıtlama" (constraint) alır — bu kısıtlama, "minimum ve maksimum genişlik/yükseklik" şeklinde bir aralıktır, kesin bir boyut değil.

Container(
  width: 300,
  height: 200,
  child: Container(
    color: Colors.blue,
    // Bu iç Container'a boyut vermedik!
  ),
)

Dıştaki Container, içteki Container'a "en fazla 300x200 olabilirsin" kısıtlamasını iletir. İçteki Container, kendi boyutunu belirtmediği için, verilen kısıtlamanın maksimumunu kullanır — yani 300x200 olur.

#Kural 2: "Sizes Go Up" — Boyutlar Yukarı Çıkar

Her widget, aldığı kısıtlama içinde kendi boyutuna karar verir ve bu boyutu ebeveynine geri bildirir.

Center( // Center, çocuğuna "istediğin boyutu seçebilirsin, ben seni ortalarım" der
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

Container, kendine verilen (gevşek — loose) kısıtlama içinde, kendi istediği 100x100 boyutunu seçiyor ve bunu Center'a "işte benim boyutum bu" diye bildiriyor.

#Kural 3: "Parent Sets Position" — Ebeveyn Konumu Belirler

Bir widget, kendi konumunu (ekranın neresinde olacağını) belirleyemez — çocuğun boyutu belli olduktan sonra, ebeveyn, bu çocuğu nereye yerleştireceğine karar verir.

Center(
  child: Container(width: 100, height: 100, color: Colors.red),
)

Container, kendi boyutunu (100x100) seçti, ama ekranın neresinde duracağına kendisi karar veremez — bunu Center widget'ı belirliyor (ortaya yerleştirerek).

#Somut Bir Örnekle Tüm Süreci İzleyelim

Container( // 1. Dış Container: 300x300 boyut VERİYOR (kısıtlama aşağı iner)
  width: 300,
  height: 300,
  color: Colors.grey,
  child: Center( // 2. Center: kısıtlamayı aynen aktarır ama "gevşetir" (loose yapar)
    child: Container( // 3. İç Container: kendi boyutuna karar VERİR (150x150)
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
  ),
)

Akış:

1. Dış Container, 300x300 kesin kısıtlama ile başlıyor.
2. Bu kısıtlama, Center'a aşağı doğru aktarılıyor.
3. Center, bu kısıtlamayı kendi çocuğuna gevşek bir şekilde iletiyor: "en fazla 300x300 olabilirsin, ama istediğin kadar küçük de olabilirsin."
4. İç Container, kendine verilen bu esneklik içinde, kendi 150x150 boyutunu seçiyor ve bunu yukarı (Center'a) bildiriyor.
5. Center, artık çocuğunun boyutunu (150x150) bildiği için, onu kendi alanının (300x300) ortasına yerleştiriyor.

#Neden Bazen "Beklenmedik" Boyutlar Görürsün? — Yaygın Tuzak

Row(
  children: [
    Container(color: Colors.red, child: Text('Merhaba')),
    Container(color: Colors.blue, child: Text('Dünya')),
  ],
)

Bu genelde beklendiği gibi çalışır — her Container, içeriğinin (Text) boyutuna göre kendi boyutunu belirler. Ama şunu denersen:

Row(
  children: [
    Container(color: Colors.red, width: double.infinity), // ❌ HATA!
  ],
)

Bu hata verir! Neden? Çünkü Row'un ana ekseni (yatay), çocuklarına sınırsız genişlik kısıtlaması verir (Row, "istediğin kadar genişleyebilirsin" der) — ama sen Container'a width: double.infinity (sonsuz genişlik) vermeye çalışıyorsun. "Sonsuz kısıtlama içinde sonsuz boyut seç" paradoksal bir durum yaratır ve Flutter bunu bir hata olarak fırlatır: "BoxConstraints forces an infinite width."

Bu hatayı gördüğünde artık nedenini anlıyorsun — bu, tam olarak "constraints go down, sizes go up" prensibinin ihlal edildiği bir durum. Çözüm, genelde Expanded kullanmaktır (bir sonraki derste tam olarak işleyeceğiz).

#Neden "Gevşek" (Loose) ve "Sıkı" (Tight) Kısıtlama Ayrımı Önemli?

Bölüm 1 Konu 1'de öğrendiğimiz RenderObject katmanı, aslında her widget'a iki tür kısıtlama iletebilir:

• Tight (sıkı) kısıtlama: minimum = maksimum. "Tam olarak bu boyutta olmalısın." (width: 100, height: 100 verdiğinde oluşur)
• Loose (gevşek) kısıtlama: minimum = 0, maksimum = belirli bir değer. "En fazla şu kadar olabilirsin, istediğin kadar küçük olabilirsin."

Center, çocuğuna her zaman gevşek bir kısıtlama iletir — bu yüzden Center içindeki bir widget, "istediği" boyutu seçebilir. Container gibi bazı widget'lar ise, kendine boyut verildiğinde, çocuğuna sıkı bir kısıtlama iletebilir.

#Bu Bilgi Pratikte Ne İşine Yarar?

Bu, sadece teorik bir bilgi değil — Flutter'da "neden bu widget'ım büyümüyor/küçülmüyor" sorusuyla karşılaştığında, her zaman şu soruları sormalısın:

1. Bu widget'a ne tür bir kısıtlama geliyor? (Ebeveyni ne tür bir kısıtlama veriyor?)
2. Bu widget, kendi boyutuna nasıl karar veriyor? (İçeriğine göre mi, yoksa maksimum kısıtlamayı mı alıyor?)
3. Bu boyut, ebeveyne nasıl bildiriliyor ve ebeveyn onu nereye yerleştiriyor?

Bu üç soruyu sırayla sorduğunda, hemen her layout sorununu çözümleyebilir hale gelirsin — Bölüm 2 Konu 9'da öğreneceğimiz Expanded/Flexible gibi araçlar, tam olarak bu üç kuralı senin lehine kullanmanı sağlayan araçlardır.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Constraints go down: bir ebeveyn, çocuğuna minimum/maksimum genişlik-yükseklik aralığı (kısıtlama) iletir.
• Sizes go up: her widget, aldığı kısıtlama içinde kendi boyutuna karar verir ve bunu ebeveynine bildirir.
• Parent sets position: çocuğun boyutu belirlendikten sonra, onu nereye yerleştireceğine ebeveyn karar verir — widget kendi konumunu seçemez.
• "Sonsuz kısıtlama içinde sonsuz boyut" gibi paradoksal durumlar (Row içinde width: double.infinity), Flutter'ın en yaygın layout hatalarından birine yol açar.
• Loose (gevşek) ve tight (sıkı) kısıtlama ayrımı, bir widget'ın ne kadar "özgür" boyut seçebileceğini belirler.

#📝 Ödevler

• [ ] Bir Container içine boyut vermeden başka bir Container koy, dıştakinin boyutunu değiştirerek içtekinin boyutunun nasıl etkilendiğini gözlemle.
• [ ] Center içine bir Container koy, Container'a boyut ver, Center'ın onu nasıl konumlandırdığını gözlemle.
• [ ] Bilerek Row içinde width: double.infinity vererek hatayı tetikle, hata mesajını oku ve bu dersle ilişkilendirerek yorumla.
• [ ] Üç seviyeli bir widget ağacı kur (dış Container → Center → iç Container), her seviyede "kısıtlama nedir, boyut nedir, konum nasıl belirleniyor" sorularını kendi cümlelerinle cevapla.
• [ ] Kendi cümlelerinle, "neden bir widget kendi konumunu seçemiyor, sadece boyutunu seçebiliyor" sorusunu açıkla.

Sıradaki konu: Bölüm 2 — Konu 9: Expanded, Flexible, Spacer, Intrinsic Widget'lar