Bölüm 1 — Konu 4: Hot Reload / Hot Restart Ne Yapıyor, Neden Önemli

Bölüm 1'in son konusundayız. Dart Bölüm 12 Konu 57'de JIT/AOT derlemeyi işlerken hot reload'a değinmiştik — şimdi bunu gerçek anlamda deneyimleyerek tam olarak anlayacağız.

#Hot Reload Nedir?

Hot reload, uygulamanı yeniden başlatmadan, kod değişikliklerini anında (genelde bir saniyeden kısa sürede) uygulamana yansıtma özelliğidir.

Nasıl tetiklenir?

• Terminalde flutter run çalışırken, r tuşuna bas.
• VS Code'da, kaydettiğinde (Ctrl+S/Cmd+S) otomatik tetiklenecek şekilde ayarlanabilir, ya da yıldırım simgesine tıklanır.

#Somut Bir Deney

lib/main.dart dosyasında (varsayılan sayaç uygulamasında), şu satırı bulalım:

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),

Bu metnin rengini değiştirelim:

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium?.copyWith(color: Colors.red),
),

Dosyayı kaydet (hot reload otomatik tetiklenir) — uygulamanın sayacı sıfırlanmadan, sayı rengi anında kırmızıya dönüşür!

#Hot Reload'ın Arkasında Ne Oluyor? — Dart Bölüm 12'ye Bağlantı

Dart Bölüm 12 Konu 57'de JIT derlemenin "kod her değiştiğinde tüm programı baştan derlemek gerekmez" özelliğini öğrenmiştik. Hot reload, tam olarak bunu kullanır:

1. Kod değiştiğinde, Flutter sadece değişen kısımların yeni bir versiyonunu, çalışan Dart VM'ine (JIT ile) enjekte eder.
2. Flutter, widget ağacını (Bölüm 1 Konu 1'de öğrendiğimiz) yeni kodla yeniden oluşturur (rebuild).
3. Önemli olan: uygulamanın state'i (durumu) korunur! Sayaç değeri 5 iken hot reload yaptıysan, hâlâ 5'tir — sadece görünüm/davranış güncellenir.

#Hot Restart — Farklı Bir Araç

Terminalde 'R' (büyük harf) tuşuna bas

Hot restart, hot reload'dan farklıdır — uygulamayı tamamen yeniden başlatır, ama yine de (AOT derlemeye göre) hızlıdır, çünkü tam bir "cold start" (sıfırdan derleme + yükleme) değildir.

Fark tam olarak nerede?

#Ne Zaman Hot Reload Yetmez, Hot Restart Gerekir?

Hot reload, her değişikliği yansıtamaz — çünkü sadece "aynı state ile devam edilebilecek" değişiklikleri güvenle uygulayabilir. Şu durumlarda hot restart gerekir:

// Örnek: Bir sınıfın alan yapısını değiştirmek
class Sayac {
  int deger = 0;
  // int yeniAlan = 10; // Bu tarz bir değişiklik, HOT RELOAD ile bazen sorun çıkarabilir
}

• main() fonksiyonunun içeriğini değiştirdiğinde (hot reload, main()'i tekrar çalıştırmaz).
• Global değişkenlerin başlangıç değerini değiştirdiğinde.
• Bir State sınıfının (Bölüm 1 Konu 6'da göreceğiz) alan yapısını (yeni bir alan eklemek gibi) değiştirdiğinde — bazen hot reload bunu doğru yansıtamaz, "state uyumsuzluğu" görebilirsin.
• Genel kural: Eğer hot reload sonrası garip/beklenmedik bir davranış görüyorsan, hot restart dene — bu, çoğu "hot reload çalışmıyor gibi" sorununun çözümüdür.

#Neden Bu Kadar Önemli? — Geliştirici Deneyimine Etkisi

Bölüm 1 Konu 1'de Flutter'ın Dart'ı seçme sebeplerinden birinin JIT'in hot reload'ı mümkün kılması olduğunu söylemiştik. Şimdi bunun pratik değerini görüyorsun:

Hot reload olmadan bir dünya hayal et: Bir butonun rengini değiştirmek istiyorsun. Kodu değiştiriyorsun, tüm uygulamayı yeniden derlemen (native derleme, birkaç dakika sürebilir), yeniden yüklemen, ve eğer bu buton, bir dizi tıklamadan sonra ulaşılan bir ekrandaysa, o tıklamaları tekrar tekrar yapman gerekiyor — her küçük görsel değişiklik için.

Hot reload ile: Rengi değiştir, kaydet, bir saniye içinde sonucu gör — hatta derinlemesine bir ekranda, belirli bir state'teyken bile, o state korunarak değişikliği anında görürsün.

Bu, Flutter'ın geliştirici verimliliğinin en büyük kaynaklarından biridir — "değiştir, gör, tekrar değiştir" döngüsünü saniyeler seviyesine indirir.

#flutter run Terminalindeki Diğer Kısayollar

r  -> Hot reload
R  -> Hot restart
p  -> Widget sınırlarını (performans overlay'ini) göster/gizle
o  -> Platform temasını değiştir (Android/iOS arası geçiş, test amaçlı)
q  -> Uygulamayı sonlandır (quit)

Bu kısayolları bir sonraki bölümlerde, gerçek geliştirme yaparken sürekli kullanacaksın.

#Küçük Bir Deney Daha — State'in Korunduğunu Kanıtlamak

1. Sayaç uygulamasında, butona birkaç kere tıkla (sayaç 3 olsun diyelim).
2. Kodda, Text('$_counter') satırının üzerine yeni bir Text widget'ı ekle (örneğin Text('Merhaba!')).
3. Hot reload yap (r).
4. Gözlemle: Sayaç hâlâ 3 gösteriyor, ve yeni eklediğin "Merhaba!" metni de görünüyor — state kaybolmadı, sadece widget ağacı güncellendi.

Bu deney, Bölüm 1 Konu 1'de öğrendiğimiz Widget/Element/RenderObject ayrımının neden var olduğunu somut olarak gösteriyor: Element ağacı, widget'lar değişse bile kalıcılığını ve state'ini koruyor.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Hot reload, kodu JIT ile çalışan uygulamaya enjekte ederek, state'i koruyarak, saniyeler içinde değişiklikleri yansıtır.
• Hot restart, uygulamayı tamamen yeniden başlatır (main() dahil), state sıfırlanır — ama tam bir cold start'tan daha hızlıdır.
• Hot reload, widget ağacı/UI değişiklikleri için idealdir; global değişken/state yapısı değişikliklerinde hot restart gerekebilir.
• Bu özellik, Flutter'ın "değiştir-gör" geliştirme döngüsünü dramatik şekilde hızlandırır ve geliştirici verimliliğinin temel taşlarından biridir.

#📝 Ödevler

• [ ] Sayaç uygulamasında bir metnin rengini/boyutunu değiştir, hot reload ile anlık güncellemeyi gözlemle.
• [ ] Sayacı birkaç kere artır, sonra hot reload yap — state'in korunduğunu doğrula.
• [ ] Aynı senaryoyu hot restart ile tekrarla — bu sefer state'in sıfırlandığını gözlemle.
• [ ] main() fonksiyonunun içine bir print() ekle, hot reload sonrası bu print'in çalışmadığını, hot restart sonrası çalıştığını terminalde gözlemle.
• [ ] flutter run terminalindeki diğer kısayolları (p, o) dene, her birinin ne yaptığını gözlemle.

#🏁 Bölüm 1 Tamamlandı!

Flutter'ın ne olduğunu, iç mimarisini (Widget/Element/RenderObject, Skia/Impeller), ortamı kurmayı, proje yapısını ve hot reload/restart mekaniğini öğrendin. Artık gerçek bir Flutter projesini çalıştırabiliyor ve üzerinde değişiklik yapabiliyorsun.

Sıradaki durak Bölüm 2 — Widget'larla Düşünmek: "her şey widget'tır" felsefesini derinleştirecek, StatelessWidget vs StatefulWidget ayrımını ve temel layout widget'larını (Container, Row, Column) işleyeceğiz — burada gerçekten kendi arayüzünü yazmaya başlayacaksın.