🔥 Flutter’da Hot Reload ve Hot Restart

Flutter geliştirme sürecinin en güçlü yanlarından biri, kod değişikliklerini anında görebilmemizi sağlayan mekanizmalarıdır. Ancak "Hot Reload" ve "Hot Restart" arasındaki farkı anlamak, sadece hız kazanmak için değil, aynı zamanda hata ayıklama (debugging) sürecini doğru yönetmek için de kritiktir.

Flutter’ı Flutter yapan en güçlü özelliklerden ikisi Hot Reload ve Hot Restart’tır. Bu iki özellik sayesinde arayüz geliştirme süreci inanılmaz hızlanır ve “yaz–çalıştır–bekle” döngüsü neredeyse ortadan kalkar.

Hot Reload ve Hot Restart nedir?
Nasıl çalışırlar?
Aralarındaki farklar
Ne zaman hangisi kullanılmalı?
Gerçek örnekler ve senaryolar
Yaygın hatalar

📌 Flutter’da Çalışma Mantığı (Kısa Ön Bilgi)

Flutter uygulamaları:

Dart dili ile yazılır
Kodlar Dart VM (Virtual Machine) üzerinde çalışır
Uygulama çalışırken Widget Tree (widget ağacı) oluşturulur

Hot Reload ve Hot Restart, bu yapıya müdahale ederek geliştirme sürecini hızlandırır.

🔁 Hot Reload Nedir?

Hot Reload, çalışan Flutter uygulamasına kod değişikliklerini anında enjekte etme işlemidir.

✔️ Ne Yapar?

Değişen Dart kodunu çalışan uygulamaya ekler
Widget Tree yeniden oluşturulur
Uygulama state’i (durumu) korunur

❌ Ne Yapmaz?

main() fonksiyonu tekrar çalışmaz
initState() tekrar çağrılmaz
Değişkenlerin başlangıç değerleri sıfırlanmaz

🧠 Hot Reload Nasıl Çalışır?

Kodda değişiklik yapılır
Dart VM, sadece değişen sınıfları derler
Widget ağacı yeniden çizilir
Uygulama kaldığı yerden devam eder

Bu işlem genellikle 1 saniyeden kısa sürer 🚀

⌨️ Hot Reload Nasıl Yapılır?

Ortam	Kısayol
VS Code	`Ctrl + S`
Android Studio	⚡ Hot Reload butonu
Terminal	`r`

🧪 Hot Reload Örneği

Text(
  'Merhaba Flutter',
  style: TextStyle(fontSize: 20),
)

⬇️ Değiştir:

Text(
  'Merhaba ETAP!',
  style: TextStyle(fontSize: 30, color: Colors.red),
)

➡️ Hot Reload sonrası:
Uygulama aynı ekranda, state bozulmadan güncellenir.

🔄 Hot Restart Nedir?

Hot Restart, Flutter uygulamasını baştan başlatır, ancak IDE kapanmaz.

✔️ Ne Yapar?

main() fonksiyonu tekrar çalışır
Tüm state sıfırlanır
Değişkenler ilk haline döner
Widget Tree tamamen yeniden oluşturulur

❌ Ne Yapmaz?

Uygulamayı baştan derlemez (Full Restart değil)
Emulator / cihaz kapanmaz

⌨️ Hot Restart Nasıl Yapılır?

Ortam	Kısayol
VS Code	`Ctrl + Shift + P → Hot Restart`
Android Studio	🔄 Hot Restart butonu
Terminal	`R`

🔥 Hot Reload vs 🔄 Hot Restart

Özellik	Hot Reload	Hot Restart
Hız	⚡ Çok hızlı	🐢 Daha yavaş
State korunur mu?	✅ Evet	❌ Hayır
main() çalışır mı?	❌ Hayır	✅ Evet
initState()	❌	✅
UI değişikliği	✅	✅
Mantık değişikliği	⚠️ Kısmen	✅

🎯 Ne Zaman Hangisi Kullanılmalı?

✅ Hot Reload Kullan:

UI tasarlarken
Renk, padding, font değiştirirken
Text güncellerken
StatelessWidget üzerinde çalışırken

🔄 Hot Restart Kullan:

initState() değiştirdiğinde
Global değişken eklediğinde
Provider / Bloc / Riverpod yapısını değiştirdiğinde
Constructor mantığını güncellediğinde
Hot Reload işe yaramadığında 😄

⚠️ Sık Yapılan Hatalar

❌ “Hot Reload çalışmıyor”

👉 Çözüm: Hot Restart dene

❌ “initState neden tetiklenmedi?”

👉 Çünkü Hot Reload initState’i çağırmaz

❌ “Değişkenim güncellenmedi”

👉 State korunuyor olabilir → Hot Restart

🧩 Örnek Senaryo (Sayaç Uygulaması)

int sayac = 0;

Hot Reload → sayac aynı kalır
Hot Restart → sayac = 0 olur

Bu yüzden state’e bağlı hatalarda Hot Restart şarttır.

🚀 Full Restart (Ek Bilgi)

Emulator kapatılıp tekrar açılır
Flutter tamamen yeniden derlenir

🟥 En yavaş yöntemdir
🟩 Genelde gerekli değildir

🧠 Özet

Hot Reload → UI odaklı, hızlı
Hot Restart → Mantık odaklı, temiz başlangıç
Flutter’ın en büyük gücü: anında geri bildirim

“Flutter’da hız, doğru zamanda doğru restart’ı bilmektir.”

Flutter'ın neden bu kadar hızlı olduğunu ve Hot Reload'ın teknik olarak nasıl mümkün olduğunu anlamanın anahtarı bu üçlü ağaç yapısında yatar.

Flutter, perde arkasında sadece yazdığın kodlarla değil, birbirine bağlı üç farklı ağaç yapısıyla çalışır:

1. Üçlü Ağaç Yapısı (Three Trees)

A. Widget Tree (Sizin Yazdığınız Kod)

Bu, geliştirici olarak sizin oluşturduğunuz kısımdır. "Bir buton olsun, içinde şu yazı yazsın" dersiniz. Widget'lar immutable (değişmez) yapıdadır. Yani bir widget üzerinde değişiklik yaptığınızda aslında o widget güncellenmez, yerine yenisi oluşturulur.

B. Element Tree (Orta Katman / Menajer)

Widget ile RenderObject arasındaki köprüdür. Widget ağacındaki bir değişikliğin ekrana yansıyıp yansımayacağına karar veren "mantık" katmanıdır. Hot Reload'ın sırrı buradadır; Element ağacı, eski widget ile yeni widget'ı karşılaştırır (Diffing algoritması) ve sadece değişen kısımları işaretler.

C. Render Tree (Görsel Katman)

Ekranda boyama (painting) ve yerleşim (layout) işlemlerini yapan katmandır. Oldukça ağır ve maliyetli bir yapıdır. Flutter, performans için bu ağacı mümkün olduğunca az günceller.

2. Hot Reload Neden Widget Tree Üzerinden Çalışır?

Hot Reload yaptığınızda şu adımlar gerçekleşir:

Yeni kod Dart VM'e gönderilir.
Flutter, Widget Tree'yi baştan aşağı tarar ve yeni widget'ları oluşturur.
Element Tree, eski widget'ların tipine ve anahtarına (Key) bakar. Eğer tip aynıysa (örneğin hala bir Text widget'ıysa), Element yerinde kalır ve sadece RenderObject'e "Git ve üzerindeki veriyi güncelle" der.
Bu sayede Render Tree komple baştan çizilmez, sadece gerekli pikseller güncellenir.

3. "State" (Durum) Nerede Tutulur?

Peki, Hot Reload yaptığımızda neden ekrandaki sayaç sıfırlanmıyor?

Bunun sebebi State nesnelerinin Widget ağacında değil, Element ağacı üzerinde saklanmasıdır. Hot Reload sırasında Widget'lar ölür ve yeniden doğar, ancak Element'ler (ve dolayısıyla içlerindeki State'ler) hayatta kalır.

Hot Reload: Widget'ı yeniler, Element ve State'e dokunmaz. (Değerler korunur)
Hot Restart: Hem Widget hem Element hem de State ağaçlarını tamamen yok eder ve sıfırdan kurar. (Değerler sıfırlanır)

4. Pratik Bir İpucu: Key Kullanımı

Bazen Hot Reload yaptığınızda UI'ın beklediğiniz gibi güncellenmediğini veya yanlış elemanların yer değiştirdiğini görebilirsiniz. Bu genellikle Element ağacının hangi widget'ın hangisiyle eşleştiğini karıştırmasından kaynaklanır. İşte bu noktada Key (anahtar) kullanımı devreye girer. Key kullanarak Element ağacına "Bu widget, o eski widget'ın ta kendisi!" demiş olursunuz.

Bu ağaç yapılarının çalışma mantığını kavradığında, Flutter'da performans optimizasyonu yapmak ve karmaşık bug'ları çözmek çok daha kolay hale gelir.

Flutter perde arkasında tek bir ağaç değil, birbirine bağlı üç temel ağaç ile çalışır. Kısa bir cümle gibi başlayan bu konu aslında Flutter’ı gerçekten anlamanın anahtarıdır.

🌳 1️⃣ Widget Tree (Widget Ağacı)

Senin yazdığın dünya.

Tamamen immutable (değiştirilemez)
Her build() çağrısında yeniden oluşturulur
Sadece konfigürasyon içerir (ne gösterilecek?)

Text("Merhaba")
Container(
  color: Colors.red,
)

👉 Widget’lar ekrana çizilmez, sadece “nasıl olmalı?” diye tarif eder.

🌳 2️⃣ Element Tree (Element Ağacı)

Flutter’ın widget’ları hayata bağladığı katman.

Widget ile RenderObject arasında köprü
Widget + BuildContext = Element
State burada tutulur
Widget değişse bile, Element korunabilir

StatefulElement
StatelessElement

👉 setState() işte bu ağacı etkiler.

🧠 En kritik bilgi:

build() → Widget Tree
setState() → Element Tree

🌳 3️⃣ Render Tree (Render Object Tree)

Gerçek iş burada yapılır.

Ölçme (layout)
Konumlandırma
Çizim (paint)
Piksel piksel ekran

RenderFlex
RenderParagraph
RenderBox

👉 GPU’ya giden yol buradan geçer.

🔗 Ağaçlar Nasıl Bağlı?

Widget
   ↓
Element
   ↓
RenderObject

Widget değişir → Element bakar:
- “Aynı tip mi?” → Render korunur
- “Farklı tip mi?” → Render yeniden oluşur

🔁 setState() Olunca Ne Olur?

setState() çağrılır
İlgili Element işaretlenir
build() tekrar çalışır
Yeni Widget Tree oluşur
Flutter diff yapar
Gerekirse Render Tree güncellenir

👉 Ekran komple yenilenmez, sadece gereken yerler!

🎯 Neden Bu Mimari Çok Güçlü?

⚡ Yüksek performans
🔄 Akıllı yeniden çizim
🧩 Declarative yapı
📱 60–120 FPS

🧠 Akılda Kalıcı Özet

Ağaç	Sorumluluk
Widget Tree	Ne istiyoruz?
Element Tree	Kim hayatta?
Render Tree	Nasıl çizilecek?