Meydan okuma 1
- Flutter kursu
- İleri seviye
- Ders 66/69
- 3 dk
StateNotifier ve AsyncValue ile API state yönetimi yaparsın.
Meydan okuma 1 - StateNotifier ve AsyncValue
Bu meydan okumada bir StateNotifier<AsyncValue<List<String>>> oluşturacaksın. AsyncValue.guard ile API çağrısını sarar, loading ve error durumlarını otomatik yönetirsin.
class PostNotifier extends StateNotifier<AsyncValue<List<String>>> {
PostNotifier() : super(const AsyncValue.loading()) {
_load();
}
Future<void> _load() async {
state = await AsyncValue.guard(() async => ['a', 'b']);
}
}Uygulama PostNotifier tanımla
PostNotifier adında StateNotifier<AsyncValue<List<String>>> tanımla. Constructor AsyncValue.loading() ile başlasın ve _load() çağırsın. _load async metodu state'e AsyncValue.guard(() async => ['post1', 'post2']) sonucunu atasın. main'de PostNotifier örneği al, 100ms bekle, state.value'yu yazdır.
Başlangıç kodu
import 'package:flutter_riverpod/flutter_riverpod.dart';
// PostNotifier sınıfını tanımla (StateNotifier ve AsyncValue ile)
// constructor loading durumuyla başlasın ve _load çağırsın
// _load, state'e guard sonucunu atasın
void main() async {
// PostNotifier örneği al, kısa bekle, state value'yu yazdır
}Örnek çözüm
import 'package:flutter_riverpod/flutter_riverpod.dart';
class PostNotifier extends StateNotifier<AsyncValue<List<String>>> {
PostNotifier() : super(const AsyncValue.loading()) {
_load();
}
Future<void> _load() async {
state = await AsyncValue.guard(() async => ['post1', 'post2']);
}
}
void main() async {
final notifier = PostNotifier();
await Future.delayed(const Duration(milliseconds: 100));
print(notifier.state.value);
notifier.dispose();
}Beklenen çıktı
[post1, post2]
Uygulama AsyncValue.when ile durum işle
main içinde state değişkenine AsyncValue.data(['a', 'b']) ata. state.when ile loading, data ve error durumlarını işle: loading () => 'yukleniyor', data (v) => v.join(','), error (e, _) => 'hata: $e'. Sonucu yazdır.
Başlangıç kodu
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
// state değişkenine AsyncValue ile data durumu ata (liste: 'a' ve 'b')
// .when ile loading, data ve error durumlarını işle
// loading 'yukleniyor', data ile virgülle birleştir, error 'hata: $e'
// sonucu yazdır
}Örnek çözüm
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
final state = AsyncValue.data(['a', 'b']);
final result = state.when(
loading: () => 'yukleniyor',
data: (v) => v.join(','),
error: (e, _) => 'hata: $e',
);
print(result);
}Beklenen çıktı
a,b
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 StateNotifier'ın state özelliği ne zaman güncellenmeli?
- Async işlemler bittiğinde ve değer hazır olduğunda Doğru cevap
- Asla
- Her frame
- Yalnızca constructor içinde
Açıklama: State, constructor'da başlangıç değerini alır; async işlemler bitip değer hazır olduğunda guard sonucuyla güncellenir.
2 AsyncValue.guard çağrısı
state = await AsyncValue.____(() async => ['a', 'b']);state = await AsyncValue.guard(() async => ['a', 'b']);Açıklama: AsyncValue.guard, verilen async fonksiyonu sarar; hata olursa AsyncError, başarırsa AsyncData döner.
3 StateNotifier ve AsyncValue eşleşmeleri
| Kavram | Anlamı |
|---|---|
StateNotifier |
State yöneticisi |
AsyncValue |
Async durum sarmalayıcı |
guard |
Hata yakalar |
StateNotifierProvider |
Provider |