Bölüm 2 — Konu 7: Temel Layout — Container, Row, Column, Stack, Padding, Align, Center

Bu derste, Flutter'da arayüz kurmanın temel yapı taşlarını öğreneceğiz. Bölüm 2 Konu 5'te öğrendiğin child/children kavramları burada somutlaşacak.

#Container — "İsviçre Çakısı" Widget

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(8),
  child: Text('Merhaba'),
)

Container, tek başına birden fazla işi yapabilen (boyut verme, renk, boşluk, kenarlık) çok yönlü bir widget'tır. Bilmen faydalı bir detay: Container, aslında Flutter'ın kaynak kodunda kendi başına bir RenderObject'e sahip değildir — arka planda, verdiğin özelliklere göre (padding, color, margin vb.) Padding, DecoratedBox, ConstrainedBox gibi daha küçük widget'ları otomatik olarak birleştiren bir "kolaylık widget'ıdır" (bir nevi kompozisyon sarmalayıcısı). Yani Container yazdığında, Flutter arka planda senin için birden fazla widget'ı otomatik olarak iç içe geçiriyor. Bu, Bölüm 2 Konu 5'te öğrendiğimiz "küçük, tek işi yapan widget'ları birleştirme" felsefesinin, framework'ün kendi içinde de uygulandığını gösteriyor.

padding ile margin farkı:

• padding: içerik ile widget'ın kendi sınırı arasındaki boşluk (içeriden).
• margin: widget'ın sınırı ile çevresindeki diğer widget'lar arasındaki boşluk (dışarıdan).

#Row ve Column — Yatay ve Dikey Dizilim

Row(
  children: [
    Icon(Icons.star),
    Text('Yıldız'),
    Icon(Icons.favorite),
  ],
)

Row, çocuklarını yatay (soldan sağa) sıralar. Column, aynı mantıkla dikey (yukarıdan aşağıya) sıralar:

Column(
  children: [
    Text('Birinci satır'),
    Text('İkinci satır'),
    Text('Üçüncü satır'),
  ],
)

mainAxisAlignment ve crossAxisAlignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // ana eksen (yatay, Row için)
  crossAxisAlignment: CrossAxisAlignment.center,       // çapraz eksen (dikey, Row için)
  children: [
    Text('Sol'),
    Text('Sağ'),
  ],
)

"Ana eksen" (main axis) ve "çapraz eksen" (cross axis) kavramı önemli: Row için ana eksen yatay, çapraz eksen dikeydir. Column için bu tam tersidir — ana eksen dikey, çapraz eksen yataydır. Bu terminoloji tutarlı kalır, sadece Row/Column'a göre yön değişir.

MainAxisAlignment seçenekleri (Dart Bölüm 7'de öğrendiğimiz enum'ları hatırla — bu tam olarak bir enum'dur):

• start, end, center — başa, sona, ortaya yasla.
• spaceBetween — elemanlar arasına eşit boşluk (kenarlarda boşluk yok).
• spaceAround — her elemanın etrafına eşit boşluk.
• spaceEvenly — tüm boşluklar (kenarlar dahil) eşit.

#Stack — Üst Üste Bindirme

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Üstte yazı', style: TextStyle(color: Colors.white)),
    ),
  ],
)

Row/Column'ın aksine, Stack, çocuklarını üst üste (z-ekseninde) yerleştirir — listedeki ilk eleman en altta, son eleman en üstte görünür. Positioned, bir Stack çocuğunun tam olarak nereye yerleştirileceğini (üstten/soldan/sağdan/alttan mesafe ile) belirtir.

Ne zaman kullanılır? Bir resmin üzerine yazı bindirmek, bir bildirim rozeti (badge) eklemek gibi "katmanlı" tasarımlar için idealdir.

#Padding — Sadece Boşluk

Padding(
  padding: const EdgeInsets.all(16.0),
  child: Text('Etrafında boşluk olan metin'),
)

Container'ın aksine, Padding, sadece boşluk ekleme işini yapar — başka hiçbir şeyi yapmaz (renk veremez, boyut veremez). Bu, Bölüm 2 Konu 5'te öğrendiğimiz "tek sorumluluk" ilkesinin saf bir örneği.

EdgeInsets çeşitleri:

EdgeInsets.all(16)                      // her yönden 16
EdgeInsets.symmetric(horizontal: 20, vertical: 10) // yatay 20, dikey 10
EdgeInsets.only(left: 8, top: 4)        // sadece belirtilen yönler

#Align — Belirli Bir Konuma Hizalama

Align(
  alignment: Alignment.topRight,
  child: Icon(Icons.close),
)

Align, çocuğunu ebeveyninin içinde belirtilen konuma yerleştirir. Alignment, aslında -1.0 ile 1.0 arasında bir koordinat sistemidir: Alignment(-1, -1) sol üst köşe, Alignment(1, 1) sağ alt köşe, Alignment(0, 0) tam orta.

#Center — Align'ın Özel Bir Hali

Center(
  child: Text('Ortalanmış'),
)

Bilmen faydalı bir detay: Center, Flutter'ın kaynak kodunda aslında Align'dan türeyen bir sınıftır (Dart Bölüm 7'de öğrendiğimiz extends kalıtımı) — alignment: Alignment.center ile sabitlenmiş bir Align'dır. Yani Center(child: X) yazmak, aslında Align(alignment: Alignment.center, child: X) yazmakla birebir aynı şeydir, sadece daha kısa ve niyeti daha net bir isim. Bu, Dart Bölüm 7'de öğrendiğimiz kalıtımın, "özel bir durumu daha kolay ifade etmek için" kullanılmasının gerçek bir örneği.

#Bunları Bir Arada Kullanmak

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.grey[200],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Ahmet Yılmaz'),
              Text('Flutter Geliştirici'),
            ],
          ),
          Icon(Icons.more_vert),
        ],
      ),
    );
  }
}

Bu örnek, öğrendiğin widget'ların (Container, Row, Column) gerçek bir arayüz parçası oluşturmak için nasıl birleştiğini gösteriyor — sol tarafta isim/unvan dikey sıralı, sağ tarafta bir ikon, ikisi arasında maksimum boşluk (spaceBetween).

#🎯 Bu Dersten Çıkarılması Gerekenler

• Container, birden fazla küçük widget'ı (Padding, DecoratedBox vb.) arka planda birleştiren çok amaçlı bir kolaylık widget'ıdır.
• Row (yatay) ve Column (dikey), mainAxisAlignment/crossAxisAlignment ile dizilimi kontrol eder; ana/çapraz eksen, Row/Column'a göre yön değiştirir.
• Stack, çocukları üst üste bindirir; Positioned, tam konumu belirler.
• Padding, sadece boşluk ekler; Align, belirli bir konuma hizalar; Center, aslında Align'ın özel (ortalanmış) bir alt sınıfıdır.

#📝 Ödevler

• [ ] Container ile boyut, renk ve padding'i olan bir kutu oluştur.
• [ ] Row içine 3 farklı widget koy, mainAxisAlignment'ı spaceBetween, spaceAround, spaceEvenly ile sırayla dene, farkı gözlemle.
• [ ] Stack kullanarak bir Container'ın üzerine Positioned ile bir metin bindir.
• [ ] Aynı sonucu üç farklı yöntemle (Center, Align(alignment: Alignment.center), ve mainAxisAlignment/crossAxisAlignment ile) elde et, hangisinin ne zaman daha uygun olacağını yorumla.
• [ ] Konu 7'deki "ProfilKarti" örneğine benzer, kendi tasarladığın bir kart widget'ı yaz (en az Row + Column + bir ikon içersin).

#🎮 Mini Uygulama — Basit Bir Kartvizit Ekranı

Öğrendiğin layout widget'larını birleştirerek, tek ekranlık bir dijital kartvizit tasarla. Gereksinimler:

• Bir Container içinde, Column ile dikey sıralanmış:
  • Üstte bir daire (bir Container ile, borderRadius kullanarak — istersen Icon ile bir profil ikonu koy)
  • İsim ve unvan (Text widget'ları)
  • Alt kısımda, Row ile yatay sıralanmış 3 ikon (telefon, e-posta, konum gibi)
• Padding ile genel kenar boşlukları ekle.
• Center ile tüm kartı ekranın ortasına yerleştir.

Bu projede setState()'e ihtiyacın yok — sadece StatelessWidget ile statik bir arayüz kur. Amaç, bu derste öğrendiğin widget'ları gerçek bir kompozisyonda birleştirme pratiği yapmak.

Sıradaki konu: Bölüm 2 — Konu 8: Constraint Sistemi ("Constraints Go Down, Sizes Go Up, Parent Sets Position")