Bölüm 6 — Konu 23: InheritedWidget ve InheritedModel — "Neden setState Yetmiyor" Sorusunun Cevabı

Bölüm 6'ya hoş geldin — Flutter'ın en çok tartışılan konusuna giriyoruz. Bu derste, Bölüm 4 Konu 16 ve 17'de "bunu Bölüm 8'de (o zaman Bölüm 8 olarak planlanmıştı, şimdi Bölüm 6) tam göreceğiz" dediğimiz Theme.of(context)/MediaQuery.of(context) mekanizmasının gerçek işleyişini açıklayacağız.

#Sorun: setState() Sadece "Yerel"dir

Bölüm 2 Konu 6'da öğrendiğimiz setState(), sadece o widget'ın kendi State'ini günceller. Peki, birbirinden uzak iki widget'ın aynı veriyi paylaşması gerekiyorsa (örneğin bir "sepet" state'i, hem ürün listesi ekranında hem sepet ikonu göstergesinde)?

class UstEkran extends StatefulWidget {
  @override
  State<UstEkran> createState() => _UstEkranState();
}

class _UstEkranState extends State<UstEkran> {
  int _sepetSayisi = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        UrunListesi(), // burada bir ürün eklendiğinde _sepetSayisi'nı artırmak istiyoruz
        SepetIkonu(sayi: _sepetSayisi), // burada bu sayıyı GÖSTERMEK istiyoruz
      ],
    );
  }
}

UrunListesi ve SepetIkonu, kardeş widget'lardır (aynı ebeveynin çocukları) — birbirlerinin State'ine doğrudan erişemezler. Naif bir çözüm, tüm veriyi en üstteki widget'ta tutup, her seviyede elle parametre olarak aşağı aktarmaktır ("prop drilling" — çok yaygın bir problem).

// ❌ "Prop drilling" — veri, her seviyeden elle geçirilmek zorunda
UrunListesi(sepeteEkle: (urun) { setState(() { _sepetSayisi++; }); })

Küçük ağaçlarda bu çalışır, ama widget ağacı derinleştikçe (5-6 seviye), her ara widget'ın, kendisiyle hiç ilgisi olmayan bir veriyi sadece "aşağı aktarmak için" parametre olarak taşıması gerekir — bu, Bölüm 3 Konu 13'te öğrendiğimiz "tek sorumluluk" prensibini ihlal eder.

#InheritedWidget — Widget Ağacı Boyunca Veri "Yayınlama"

class SepetSaglayici extends InheritedWidget {
  final int sepetSayisi;
  final Widget child;

  const SepetSaglayici({
    super.key,
    required this.sepetSayisi,
    required this.child,
  }) : super(child: child);

  static SepetSaglayici? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<SepetSaglayici>();
  }

  @override
  bool updateShouldNotify(SepetSaglayici oldWidget) {
    return sepetSayisi != oldWidget.sepetSayisi;
  }
}

InheritedWidget, Dart Bölüm 7'de öğrendiğimiz extends ile türetilen özel bir widget türüdür — Bölüm 2 Konu 5'te öğrendiğimiz normal widget'lardan farklı bir amaca hizmet eder: kendi altındaki (descendant) tüm widget'lara, ağaç boyunca "elle taşımadan" veri erişimi sağlamak.

Parça parça inceleyelim:

1. static SepetSaglayici? of(BuildContext context) — Bu, Theme.of(context)/MediaQuery.of(context)'in tam olarak nasıl çalıştığını gösteriyor! Bölüm 6 Konu 16'da "bu, InheritedWidget'a dayanır" demiştik — işte gerçek mekanizma bu: context.dependOnInheritedWidgetOfExactType<T>(), widget ağacında yukarı doğru giderek, en yakın SepetSaglayici'yi bulur.

2. updateShouldNotify(...) — Dart Bölüm 7'de öğrendiğimiz override edilen bir metod. Bu, "veri değiştiğinde, bana bağımlı olan widget'ları yeniden çizmeli miyim?" sorusunun cevabıdır. sepetSayisi != oldWidget.sepetSayisi, Dart Bölüm 3'te öğrendiğimiz != karşılaştırma operatörüyle, eski ve yeni değeri kıyaslıyor.

#Nasıl Kullanılır?

class UstEkran extends StatefulWidget {
  @override
  State<UstEkran> createState() => _UstEkranState();
}

class _UstEkranState extends State<UstEkran> {
  int _sepetSayisi = 0;

  void _sepeteEkle() {
    setState(() {
      _sepetSayisi++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SepetSaglayici(
      sepetSayisi: _sepetSayisi,
      child: Column(
        children: [
          ElevatedButton(onPressed: _sepeteEkle, child: Text('Sepete Ekle')),
          SepetIkonu(), // artık parametre almasına GEREK YOK
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final sepetSaglayici = SepetSaglayici.of(context)!; // context'ten DOĞRUDAN erişim
    return Icon(Icons.shopping_cart);
    // (Gerçek uygulamada sepetSaglayici.sepetSayisi ile bir rozet gösterirdik)
  }
}

Kritik gözlem: SepetIkonu, artık _sepetSayisi'yi hiçbir parametre almadan, doğrudan SepetSaglayici.of(context) ile alıyor — Bölüm ağacında ne kadar derinde olursa olsun, context'i olan her widget, bu veriye erişebilir.

#dependOnInheritedWidgetOfExactType — Otomatik Rebuild Kaydı

Buradaki en önemli detay, sadece "veriye erişmek" değil — dependOnInheritedWidgetOfExactType<T>() çağrıldığında, Flutter, o widget'ı, bu InheritedWidget'a "bağımlı" olarak kaydeder. Bölüm 2 Konu 6'da öğrendiğimiz rebuild mekanizmasını hatırlarsan — SepetSaglayici'nin sepetSayisi'si değiştiğinde (ve updateShouldNotify true döndürdüğünde), bu veriye bağımlı olan HER widget otomatik olarak yeniden çizilir — sen elle setState() çağırmana gerek kalmadan!

Bu, Bölüm 4 Konu 16'da "Theme değiştiğinde, temayı kullanan her widget otomatik güncellenir" dediğimiz davranışın tam açıklamasıdır.

#InheritedModel — Seçici Güncelleme (İleri Bir Optimizasyon)

InheritedWidget'ın bir sınırlaması var: updateShouldNotify true döndürdüğünde, ona bağımlı OLAN HER widget yeniden çizilir — veri birden fazla alt-parça içeriyorsa (örneğin bir "kullanıcı profili" hem isim hem yaş içeriyorsa), sadece isim değiştiğinde bile, yaşı kullanan widget'lar da gereksiz yere yeniden çizilir.

class ProfilModeli extends InheritedModel<String> {
  final String isim;
  final int yas;
  // ...

  @override
  bool updateShouldNotifyDependent(ProfilModeli oldWidget, Set<String> dependencies) {
    if (dependencies.contains('isim') && isim != oldWidget.isim) return true;
    if (dependencies.contains('yas') && yas != oldWidget.yas) return true;
    return false;
  }
}

InheritedModel<T>, Dart Bölüm 9'da öğrendiğimiz generic sınırlamayı kullanarak (burada T = String, "hangi alana bağımlı olduğunu" bir string ile belirtiyoruz), sadece kullanılan alt-parçaya bağımlı widget'ların güncellenmesini sağlar — bu, Bölüm 9'da (performans) derinlemesine işleyeceğimiz bir optimizasyon tekniğidir. Pratikte, InheritedModel'i doğrudan elle yazman nadirdir — modern state management araçları (Provider, Riverpod) bu tarz optimizasyonları senin için halleder.

#Neden Bu Kadar Temel? — Provider/Riverpod'a Köprü

Önemli bir gerçek: Bölüm 6'nın ilerleyen konularında öğreneceğin Provider paketi, aslında arka planda InheritedWidget kullanır! Provider, InheritedWidget'ın kaynak kodunu elle yazma zahmetini ortadan kaldıran, üzerine inşa edilmiş kullanışlı bir katmandır. Bu, Bölüm 5 Konu 20'de dio'nun http'nin üzerine bir kolaylık katmanı olması gibi bir ilişki.

Bu dersi neden bu kadar derinlemesine işledik? Çünkü Provider/Riverpod'u "sihir" olarak değil, temelini anlayarak öğrenmen, ileride karşılaşacağın hataları çok daha kolay çözmeni sağlayacak — "neden bu widget güncellenmiyor" gibi sorularla karşılaştığında, artık arka planda InheritedWidget mekanizmasının nasıl çalıştığını bileceksin.

#🎯 Bu Dersten Çıkarılması Gerekenler

• setState(), sadece kendi State'ini günceller — kardeş/uzak widget'lar arasında veri paylaşmak için "prop drilling" gerekir, bu da tek sorumluluk prensibini ihlal eder.
• InheritedWidget, widget ağacı boyunca veri "yayınlamanın" temel Flutter mekanizmasıdır; of(context) static metodu, dependOnInheritedWidgetOfExactType ile en yakın örneği bulur.
• dependOnInheritedWidgetOfExactType, sadece veri okumakla kalmaz, o widget'ı otomatik rebuild'e kaydeder — veri değiştiğinde bağımlı widget'lar kendiliğinden güncellenir.
• Theme.of(context) ve MediaQuery.of(context), bu mekanizmanın gerçek kullanım örnekleridir.
• InheritedModel, seçici (sadece kullanılan alt-parçaya bağımlı) güncelleme sağlayan ileri bir optimizasyondur.
• Provider ve Riverpod gibi modern araçlar, arka planda InheritedWidget'ı kullanır — bu dersi anlamak, onları "sihir" olmaktan çıkarır.

#📝 Ödevler

• [ ] Sadece InheritedWidget kullanarak, iki farklı (kardeş) widget arasında paylaşılan bir sayaç state'i kur.
• [ ] updateShouldNotify'ı bilerek her zaman false döndürecek şekilde yaz, bağımlı widget'ların güncellenmediğini gözlemle; sonra doğru mantıkla düzelt.
• [ ] SepetSaglayici.of(context) çağrısını, InheritedWidget olmayan bir yerde (örn. hiç SepetSaglayici olmayan bir widget ağacında) yapmayı dene, null döndüğünü gözlemle (ve ! ile zorladığında hatayı gör).
• [ ] Kendi cümlelerinle, "Theme.of(context) çağrıldığında Flutter'ın arka planda ne yaptığını", bu derste öğrendiğin mekanizmayla açıkla.
• [ ] Kendi basit bir InheritedWidget'ını (örn. bir "kullanıcı adı" paylaşan) yaz, en az 3 seviye derinlikte bir widget'tan bu veriye eriş.

Sıradaki konu: Bölüm 6 — Konu 24: Provider Paketi