ConsumerWidget
- Flutter kursu
- Orta seviye
- Ders 13/99
- 4 dk
ConsumerWidget ile ref'e erişmeyi öğrenirsin.
ConsumerWidget
ConsumerWidget, Riverpod'da ref'e erişmek için kullanılan widget'tır. StatelessWidget yerine geçer ve build metoduna ek bir ref parametresi verir.
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final deger = ref.watch(isimP);
return Text(deger);
}
}ref, widget'a bağlıdır.
ref.watch ile izleme
ConsumerWidget içinde ref.watch(provider) ile bir provider'ı dinlersin. Provider değiştiğinde build metodu otomatik olarak yeniden çağrılır.
final sayi = ref.watch(sayacP);
Text('$sayi');StateProvider'ın state'i değiştiğinde widget güncellenir.
Uygulama ConsumerWidget ile provider oku
selamP adında Provider<String> tanımla ve 'Merhaba' döndürsün. Ekrani sınıfını ConsumerWidget yap; build metodunda ref.watch(selamP) ile değeri al ve Text olarak göster. main'de print('ekran açıldı') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// selamP: Provider<String> 'Merhaba'
void main() {
print('ekran açıldı');
runApp(ProviderScope(child: 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('?')));
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final selamP = Provider<String>((ref) => 'Merhaba');
void main() {
print('ekran 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 selam = ref.watch(selamP);
return Scaffold(body: Center(child: Text(selam)));
}
}Beklenen çıktı
ekran açıldı
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ConsumerWidget'ın build metodu kaç parametre alır?
- Yalnızca context
- context ve ref Doğru cevap
- Yalnızca ref
- Hiçbiri
Açıklama: ConsumerWidget'ın build metodu hem context hem de WidgetRef ref parametrelerini alır; StatelessWidget'dan farkı budur.
2 ConsumerWidget build imzası
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, ____ ref) {
return Container();
}
}class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container();
}
}Açıklama: ConsumerWidget'ın build metodu ikinci parametre olarak WidgetRef ref alır; bu, provider'lara erişim sağlar.
3 ConsumerWidget parçaları
| Kavram | Anlamı |
|---|---|
ConsumerWidget |
StatelessWidget'ın Riverpod alternatifi |
ref |
Provider'lara erişim nesnesi |
ref.watch |
Provider'ı dinleyip rebuild tetikler |
WidgetRef |
ref parametresinin tipi |