StateNotifierProvider
- Flutter kursu
- İleri seviye
- Ders 2/69
- 4 dk
StateNotifierProvider ile ağaca sağlamayı öğrenirsin.
StateNotifierProvider nedir?
StateNotifierProvider, bir StateNotifier'ı widget ağacına sağlayan Riverpod provider'ıdır. ref.watch(provider) ile state'e erişir, ref.read(provider.notifier) ile StateNotifier'ın kendisini alıp metotlarını çağırırsın. İkinci generic parametre state'in türünü belirtir.
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
(ref) => CounterNotifier(),
);watch ve read farkı
ref.watch state değişince widget'ı yeniden inşa eder; ref.read ise anlık okuma yapar ve yeniden inşa tetiklemez. Bu yüzden butonların onPressed'ında read kullanılır. Yanlışlıkla watch kullanırsan her tıklamada yeniden inşa tetiklenebilir.
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return ElevatedButton(
onPressed: () => ref.read(counterProvider.notifier).increment(),
child: Text('$count'),
);
}Uygulama StateNotifierProvider kullan
counterProvider adında bir StateNotifierProvider tanımla; CounterNotifier tipinde, int state tutsun. main içinde ProviderContainer oluştur, iki kez increment çağır ve state'i yazdır.
Başlangıç kodu
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state = state + 1;
}
// counterProvider'ı tanımla
// CounterNotifier tipinde, int state tutsun
void main() {
// ProviderContainer ile iki kez artır, yazdır
}Örnek çözüm
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state = state + 1;
}
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
(ref) => CounterNotifier(),
);
void main() {
final container = ProviderContainer();
container.read(counterProvider.notifier).increment();
container.read(counterProvider.notifier).increment();
print(container.read(counterProvider));
}Beklenen çıktı
2
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 StateNotifierProvider ile state'i güncellemek için hangisi kullanılır?
- ref.read(provider).metot()
- ref.notify(provider).metot()
- ref.read(provider.notifier).metot() Doğru cevap
- ref.watch(provider).metot()
Açıklama: state'i değiştiren metotlar StateNotifier'ın kendisindeidir; bu yüzden provider.notifier üzerinden read ile alınır.
2 StateNotifierProvider tanımla
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
(ref) => ____,
);final counterProvider = StateNotifierProvider<CounterNotifier, int>(
(ref) => CounterNotifier(),
);Açıklama: Oluşturucu fonksiyon, StateNotifier örneğini döndürür; parantezlerle çağrı gerekir.
3 StateNotifierProvider parçaları
| Kavram | Anlamı |
|---|---|
StateNotifierProvider |
StateNotifier sağlar |
ref.watch(provider) |
state'i dinler |
ref.read(provider.notifier) |
StateNotifier'ı verir |
(ref) => CounterNotifier() |
Oluşturucu fonksiyon |