Bölüm 1 — Konu 1: Flutter Nedir, Mimarisi (Widget → Element → RenderObject, Skia/Impeller)

Flutter tutorial'ına hoş geldin! Dart'ı sağlam bir şekilde öğrendiğin için, bu bölümde artık dil sözdizimiyle değil, Flutter'a özgü kavramlarla ilgileneceğiz.

#Flutter Nedir?

Flutter, Google tarafından geliştirilen, tek bir kod tabanından iOS, Android, Web, Windows, macOS ve Linux için native performanslı uygulamalar üretmeni sağlayan bir UI framework'üdür. "Framework" kelimesi önemli — Flutter bir dil değil (dili Dart'tır, zaten öğrendin), bir kütüphane/araç setidir; sana widget'lar, layout sistemi, animasyon motoru, render motoru gibi bir uygulama geliştirmek için gereken her şeyi sağlar.

#"Diğer Çözümlerden Farkı Ne?" — Kısa Bir Karşılaştırma

Mobil geliştirmede birkaç temel yaklaşım vardır:

1. Native geliştirme (Swift/iOS, Kotlin/Android) — en yüksek performans, ama iki ayrı kod tabanı yazman gerekir.
2. Köprü tabanlı framework'ler (React Native gibi) — JavaScript kodu yazarsın, bu kod native bileşenlere köprülenir (bridge). Bu köprü, bir performans darboğazı yaratabilir.
3. Flutter'ın yaklaşımı — Dart kodu, doğrudan native makine koduna derlenir (Bölüm 12'de öğrendiğin AOT derleme) ve Flutter, ekrana kendi çizim motoruyla (birazdan göreceğiz) her pikseli kendisi çizer. Native UI bileşenlerine (Android'in Button'u, iOS'un UIButton'u gibi) hiç dokunmaz — bunun yerine, aynı görünümü kendi motoruyla her platformda birebir aynı şekilde üretir.

Bu üçüncü yaklaşım, Flutter'ın "her platformda piksel piksel aynı görünüm" vaadinin temelidir — native bileşenlere bağımlı olmadığı için, bir Android'de görünen bir buton ile iOS'ta görünen aynı buton, gerçekten aynı kod tarafından çizilir.

#Widget Ağacı — "Her Şey Widget'tır" Felsefesi

Flutter'ın en temel felsefesi şudur: ekranda gördüğün her şey bir widget'tır. Bir metin, bir buton, bir boşluk (padding), hatta bazı durumlarda bir animasyon bile — hepsi birer widget'tır.

// Bu, ileride yazacağın gerçek koda çok benzer bir önizleme
Widget build(BuildContext context) {
  return Center(
    child: Text("Merhaba Flutter"),
  );
}

Burada Center bir widget, Text de bir widget — ve Text, Center'ın çocuğu (child). Bu, Bölüm 7'de (Dart) öğrendiğin kalıtım ve kompozisyon kavramlarının somut bir uygulamasıdır — Flutter'daki her widget, aslında Dart'ta bir class'tır (Widget'tan türeyen).

Widget'lar, bu şekilde iç içe geçerek bir ağaç (tree) yapısı oluşturur:

MaterialApp
  └── Scaffold
        └── Center
              └── Text("Merhaba Flutter")

Bu ağaç yapısı kavramı, Bölüm 4'te (Dart) öğrendiğimiz koleksiyon/veri yapıları kavramına benzer bir mantıkla çalışır — her widget'ın çocukları olabilir, ve tüm uygulama, bu iç içe geçmiş widget'lar ağacından oluşur.

#Üç Katmanlı Mimari — Widget, Element, RenderObject

Flutter'ın iç mimarisi, aslında üç ayrı ağaçtan oluşur — bu, Flutter'ın performansının ve esnekliğinin temelidir. Bunu anlamak, ileri seviye Flutter geliştirmede (özellikle performans optimizasyonu, Bölüm 9'da göreceğiz) kritik önemde.

#1. Widget Ağacı — "Ne İstiyorum" (Konfigürasyon)

Widget'lar, Bölüm 2'de (Dart) öğrendiğimiz immutable (değişmez) veri sınıfları gibi düşünülebilir — bir widget, "ekranda bunu şöyle görmek istiyorum" diyen basit bir açıklama (blueprint)'tir. Widget'ların kendisi, hiçbir görsel çizim yapmaz — sadece "ne istediğini" tarif eder.

#2. Element Ağacı — "Hayat Döngüsü ve Konum" (Yönetim)

Her widget, bir Element ile eşleştirilir. Element, widget ağacındaki konumu ve yaşam döngüsünü yönetir — widget'lar sürekli yeniden oluşturulurken (Bölüm 2'de bunu detaylı göreceğiz), Element'ler daha kalıcıdır ve widget'ların "kimliğini" (aynı widget'ın güncellenmiş bir versiyonu mu, yoksa tamamen yeni bir widget mı olduğunu) takip eder.

#3. RenderObject Ağacı — "Nasıl Çizilecek" (Gerçek Çizim)

RenderObject'ler, gerçek layout hesaplamasını (boyut, konum) ve gerçek çizimi yapan katmandır. Bölüm 2'de öğreneceğimiz "constraints go down, sizes go up" prensibi, tam olarak bu katmanda gerçekleşir.

Neden üç ayrı katman? Bu ayrım, Flutter'a büyük bir performans avantajı sağlar: bir widget her "yeniden oluşturulduğunda" (rebuild), Flutter, Element ve RenderObject ağaçlarını sıfırdan yeniden oluşturmak zorunda kalmaz — sadece neyin gerçekten değiştiğini karşılaştırır (buna "diffing" denir, Bölüm 13'te öğrendiğimiz kod üretimi kavramına benzer bir "akıllı güncelleme" mantığı) ve sadece gerekli değişiklikleri uygular. Bu, Bölüm 13'te (Dart) öğrendiğimiz garbage collection'ın "gereksiz nesne oluşturmaktan kaçınma" felsefesine paralel bir performans optimizasyonudur.

#Skia ve Impeller — Flutter'ın Çizim Motorları

Widget'ların "ne çizileceğini" belirlediğini, RenderObject'lerin "nasıl çizileceğini" hesapladığını gördük. Peki bu çizim, fiziksel olarak ekrana nasıl aktarılıyor?

Skia, Google'ın geliştirdiği, açık kaynaklı bir 2D grafik motorudur — Flutter'ın uzun süredir kullandığı render motoru. Skia, RenderObject'lerin ürettiği "çizim talimatlarını" alıp, bunları doğrudan GPU'ya (ekran kartına) göndererek pikselleri boyar.

Impeller, Flutter ekibinin geliştirdiği daha yeni bir render motorudur — Skia'nın bazı performans sınırlamalarını (özellikle "shader derleme takılması" denen, ilk kez çizilen bir efektte oluşan kısa donmalar) çözmek için tasarlandı. Impeller, önceden derlenmiş shader'lar kullanarak, çalışma zamanında beklenmedik takılmaları önlemeyi hedefliyor.

Şu anki durum: Flutter, platforma göre kademeli olarak Impeller'a geçiş yapıyor (iOS'ta varsayılan hale geldi, Android'de de aktif geliştirme altında). Bu, Bölüm 12'de (Dart) öğrendiğimiz JIT/AOT derleme ikiliğine benzer bir mühendislik kararı — Impeller, "önceden hazırlanmış" bir yaklaşımla, çalışma zamanı sürprizlerini azaltmayı hedefliyor.

#Bu Bilgi Neden Şimdi Önemli?

Bu ders, biraz soyut görünebilir — henüz hiç kod yazmadık. Ama bu mimariyi baştan anlamak, ileride:

• Bölüm 6'da (Flutter) setState()'in neden ve nasıl çalıştığını,
• Bölüm 9'da (Flutter) performans optimizasyonlarının neden işe yaradığını,
• Ve genel olarak "widget ağacı" mantığıyla düşünmeyi

çok daha kolay kavramanı sağlayacak. Şimdi, bir sonraki derste elini koda değdireceksin — ortam kurulumuyla.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Flutter, Dart kodunu native makine koduna derleyip, kendi çizim motoruyla ekranı kendisi çizen bir UI framework'üdür — native bileşenlere bağımlı değildir.
• "Her şey widget'tır" — ekrandaki her öğe, iç içe geçmiş bir widget ağacı oluşturur.
• Flutter'ın iç mimarisi üç katmandan oluşur: Widget (ne isteniyor), Element (yaşam döngüsü/konum), RenderObject (nasıl çizilecek) — bu ayrım, performanslı güncellemeleri mümkün kılar.
• Skia, Flutter'ın köklü render motoru; Impeller, shader takılmalarını önlemek için geliştirilen daha yeni motor.

#📝 Ödevler

• [ ] Kendi cümlelerinle, "Flutter'ın native bileşenlere bağımlı olmaması" ile "her platformda piksel piksel aynı görünüm" arasındaki ilişkiyi açıkla.
• [ ] Widget/Element/RenderObject üçlüsünü, gerçek hayattan bir benzetmeyle (örneğin bir mimari plan, inşaat yöneticisi, inşaat işçisi gibi) kendi örneğinle açıkla.
• [ ] Skia ile Impeller arasındaki temel farkı (shader derleme takılması bağlamında) kendi cümlelerinle özetle.
• [ ] React Native'in "köprü" (bridge) yaklaşımı ile Flutter'ın yaklaşımını karşılaştıran kısa bir not yaz — hangi senaryoda hangisinin avantajlı olabileceğini düşün.

Sıradaki konu: Bölüm 1 — Konu 2: Ortam Kurulumu (Flutter SDK, Android Studio/VS Code, Emulator/Simulator, Flutter DevTools'a İlk Bakış)