Bölüm 6 — Konu 24: Provider Paketi

Bir önceki derste InheritedWidget'ı elle yazmanın ne kadar detaylı olduğunu gördük (of() metodu, updateShouldNotify, vb.). Provider, bu süreci büyük ölçüde basitleştiren, en popüler Flutter state management paketlerinden biridir.

#Paketi Ekleme

flutter pub add provider

#ChangeNotifier — State'i Tanımlama

import 'package:flutter/foundation.dart';

class SepetModeli extends ChangeNotifier {
  int _sepetSayisi = 0;
  int get sepetSayisi => _sepetSayisi; // Bölüm 6 Konu 30'u hatırla — getter ile salt-okunur erişim

  void urunEkle() {
    _sepetSayisi++;
    notifyListeners(); // "bana bağımlı olan herkese haber ver, güncellenin!"
  }
}

ChangeNotifier, Dart Bölüm 7'de öğrendiğimiz extends ile türetilen, Flutter'ın kendi kütüphanesinde tanımlı bir sınıftır (dart:core'da değil, flutter/foundation.dart'ta — Dart Bölüm 12'de öğrendiğimiz import mekanizmasını hatırla). Bu class, "beni dinleyen widget'lara değişiklik bildirebilme" yeteneğini sağlar.

notifyListeners() — bu, Bölüm 6 Konu 23'te öğrendiğimiz updateShouldNotify + otomatik rebuild mekanizmasının, senin elle yazmana gerek kalmadan çalışan halidir. _sepetSayisi değiştiğinde notifyListeners() çağırıyorsun, ve Provider, arka planda, bu değişikliği dinleyen tüm widget'ları günceller.

#ChangeNotifierProvider — State'i Widget Ağacına "Enjekte Etme"

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => SepetModeli(),
      child: MyApp(),
    ),
  );
}

ChangeNotifierProvider, Bölüm 6 Konu 23'te elle yazdığımız SepetSaglayici widget'ının hazır, genel amaçlı bir versiyonudur — create: parametresi (Dart Bölüm 3 Konu 11'de öğrendiğimiz builder pattern), state nesnesini bir kere oluşturur ve tüm alt ağaca "yayınlar."

#context.watch<T>() — Veriye Erişim ve Otomatik Rebuild

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

  @override
  Widget build(BuildContext context) {
    final sepet = context.watch<SepetModeli>(); // Dart Bölüm 9'u hatırla — generic!
    return Badge(
      label: Text('${sepet.sepetSayisi}'),
      child: Icon(Icons.shopping_cart),
    );
  }
}

context.watch<SepetModeli>() — Dart Bölüm 9'da öğrendiğimiz generic tip parametresi (<SepetModeli>), Provider'a hangi state'e erişmek istediğini söylüyor. Bu, arka planda tam olarak Bölüm 6 Konu 23'te öğrendiğimiz dependOnInheritedWidgetOfExactType<T>() çağrısını kullanır — Provider, aslında kendi içinde bir InheritedWidget sarmalıyor.

watch, "bu değeri izle, değiştiğinde beni otomatik olarak yeniden çiz" demektir — az önce öğrendiğimiz SepetIkonu, SepetModeli.urunEkle() çağrıldığında (ve notifyListeners() tetiklendiğinde), otomatik olarak yeniden çizilir.

#context.read<T>() — Sadece Erişim, Rebuild Tetiklemeden

ElevatedButton(
  onPressed: () {
    context.read<SepetModeli>().urunEkle(); // SADECE metod çağırmak için
  },
  child: Text('Sepete Ekle'),
)

read ile watch arasındaki kritik fark: watch, o widget'ı değişikliklere bağımlı yapar (her değişiklikte rebuild). read, sadece o anki değere/metoda erişim sağlar, rebuild tetiklemez. Bir onPressed callback'i içinde (Dart Bölüm 5'te öğrendiğimiz anonim fonksiyon), genelde read kullanılır — çünkü bir buton, sepet sayısı değiştiğinde kendisinin yeniden çizilmesine gerek yoktur, sadece metodu tetiklemek ister.

Yanlış kullanım örneği — performans sorunu yaratır:

// ❌ Kötü pratik — build() içinde watch kullanıp sadece bir metod çağırmak
onPressed: () {
  context.watch<SepetModeli>().urunEkle(); // ❌ HATA! watch, build() dışında kullanılamaz zaten
}

Aslında Provider, bu hatayı çalışma zamanında yakalar — watch, sadece build() metodunun içinde (rebuild mantığı gerektiren bağlamda) kullanılabilir.

#context.select<T, R>() — İnce Ayarlı İzleme (Bölüm 6 Konu 23'teki InheritedModel'in Pratik Karşılığı)

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

  @override
  Widget build(BuildContext context) {
    final sayi = context.select<SepetModeli, int>((model) => model.sepetSayisi);
    return Text('$sayi');
  }
}

Bölüm 6 Konu 23'te öğrendiğimiz InheritedModel'in "sadece kullanılan alt-parçaya bağımlı olma" optimizasyonunu hatırlarsan — select, tam olarak bunu Provider ile kolayca yapmanı sağlıyor. Eğer SepetModeli'nin başka bir alanı (örneğin bir indirimOrani) değişirse ama sepetSayisi değişmezse, select kullanan bu widget yeniden çizilmez — sadece sepetSayisi'ye gerçekten bağımlı olduğu için, gereksiz rebuild'lerden kaçınır.

#Birden Fazla Provider — MultiProvider

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => SepetModeli()),
        ChangeNotifierProvider(create: (context) => KullaniciModeli()),
      ],
      child: MyApp(),
    ),
  );
}

MultiProvider, Dart Bölüm 4'te öğrendiğimiz List yapısını kullanarak (providers: [...]), birden fazla state kaynağını tek bir yerde tanımlamanı sağlar — gerçek uygulamalarda, genelde birden fazla ChangeNotifier (kullanıcı, sepet, ayarlar gibi) aynı anda yönetilir.

#Tam Bir Örnek

class SepetModeli extends ChangeNotifier {
  final List<String> _urunler = [];
  List<String> get urunler => List.unmodifiable(_urunler); // Dart Bölüm 4'ü hatırla!

  void ekle(String urun) {
    _urunler.add(urun);
    notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    final sepet = context.watch<SepetModeli>();
    return Scaffold(
      appBar: AppBar(title: Text('Sepetim (${sepet.urunler.length})')),
      body: ListView.builder(
        itemCount: sepet.urunler.length,
        itemBuilder: (context, index) => ListTile(title: Text(sepet.urunler[index])),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<SepetModeli>().ekle('Yeni Ürün ${sepet.urunler.length + 1}'),
        child: Icon(Icons.add),
      ),
    );
  }
}

List.unmodifiable(_urunler) — Dart Bölüm 4 Konu 16'yı hatırlıyor musun? Bu, dışarıya salt-okunur bir liste sunmanın yoludur — SepetModeli'nin dışındaki kod, urunler listesine doğrudan eleman ekleyemez, sadece ekle() metodu üzerinden, kontrollü bir şekilde değiştirebilir. Bu, Bölüm 6 Konu 30'da (Dart) öğrendiğimiz encapsulation prensibinin, state management'ta kritik bir uygulamasıdır.

#🎯 Bu Dersten Çıkarılması Gerekenler

• ChangeNotifier, notifyListeners() ile bağımlı widget'lara değişiklik bildiren bir sınıftır — InheritedWidget'ın elle yazılmasının otomatikleştirilmiş halidir.
• ChangeNotifierProvider/MultiProvider, state nesnelerini widget ağacına "enjekte eder."
• context.watch<T>(), veriye erişir VE değişince otomatik rebuild tetikler; context.read<T>(), sadece erişir, rebuild tetiklemez (genelde callback'lerde kullanılır).
• context.select<T, R>(), sadece belirli bir alt-alana bağımlı olarak, gereksiz rebuild'lerden kaçınmayı sağlar (InheritedModel'in pratik karşılığı).
• List.unmodifiable, state modelinin içindeki koleksiyonları dışarıya salt-okunur sunmanın, encapsulation'ı koruyan bir yoludur.

#📝 Ödevler

• [ ] ChangeNotifier'dan türeyen basit bir sayaç modeli yaz, ChangeNotifierProvider ile widget ağacına ekle.
• [ ] context.watch kullanan bir widget ile context.read kullanan bir buton yaz, aralarındaki davranış farkını (rebuild tetikleyip tetiklemediğini) gözlemle.
• [ ] context.select kullanarak, modelin sadece belirli bir alanına bağımlı bir widget yaz; modelin başka bir alanını değiştirip bu widget'ın rebuild olmadığını kanıtla.
• [ ] MultiProvider ile en az iki farklı ChangeNotifier modelini aynı anda yönet.
• [ ] Konu 24'teki "SepetEkrani" örneğine benzer, kendi basit bir alışveriş sepeti uygulaması yaz (ürün ekleme + liste gösterme).

Sıradaki konu: Bölüm 6 — Konu 25: Riverpod (Modern Yaklaşım, Provider'ın Halefi)