Özet - Riverpod temel
- Flutter kursu
- Orta seviye
- Ders 15/99
- 4 dk
Riverpod, Provider ve ConsumerWidget'ı birleştirerek sayaç yaparsın.
Özet - Riverpod temel
Bu bölümde üç şey öğrendin: Riverpod ile BuildContext'e bağımlı olmayan state yönetimi yaparsın; Provider ve StateProvider ile değer ve yazılabilir state tanımlarsın; ConsumerWidget ile ref.watch kullanarak provider'ları dinlersin.
final sayacP = StateProvider<int>((ref) => 0);
ref.watch(sayacP);
ref.read(sayacP).state++;Bunları birleştirerek sayaç ekranı yaparsın.
Uygulama Sayaç ekranı yap
sayacP adında StateProvider<int> tanımla, başlangıç 0. Ekrani ConsumerWidget'ında ref.watch(sayacP) ile değeri göster. Butona basıldığında ref.read(sayacP).state++ çağır. main içinde print('sayaç açıldı') çağır ve ProviderScope ile kökü sar.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// sayacP: StateProvider<int> 0
void main() {
print('sayaç açıldı');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final sayacP = StateProvider<int>((ref) => 0);
void main() {
print('sayaç açıldı');
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final sayac = ref.watch(sayacP);
return Scaffold(
body: Center(child: Text('$sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(sayacP).state++,
child: Icon(Icons.add),
),
);
}
}Beklenen çıktı
sayaç açıldı
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Riverpod'da provider'a erişmek ve dinlemek için hangi widget kullanılır?
- InheritedWidget
- StatefulWidget
- StatelessWidget
- ConsumerWidget Doğru cevap
Açıklama: ConsumerWidget, build metoduna ref parametresi ekler; bu sayede ref.watch ve ref.read ile provider'lara erişilir.
2 StateProvider tanımla
final sayacP = ____<int>((ref) => 0);final sayacP = StateProvider<int>((ref) => 0);Açıklama: Yazılabilir state için StateProvider kullanılır; state özelliği ile güncellenir.
3 Riverpod temel parçaları
| Kavram | Anlamı |
|---|---|
ProviderScope |
Uygulama kökünü sarmalar |
Provider |
Salt okunur değer üretir |
StateProvider |
Yazılabilir state tutar |
ConsumerWidget |
ref ile provider'lara erişir |