context.watch ve read
- Flutter kursu
- Orta seviye
- Ders 9/99
- 4 dk
context.watch ve context.read arasındaki farkı öğrenirsin.
context.watch
context.watch<T>() sağlanan modeli dinler ve notifyListeners çağrıldığında widget'ı otomatik yeniden inşa eder. Build metodu içinde kullanılır.
final model = context.watch<SayacModeli>();
Text('${model.deger}')Her değişiklikte build yeniden çalışır.
context.read
context.read<T>() modeli dinlemeden bir kez okur. notifyListeners çağrılsa bile rebuild tetiklemez. Buton callback'leri gibi build dışı yerlerde kullanılır.
onPressed: () {
context.read<SayacModeli>().artir();
}read, watch'tan farklı olarak build'i tetiklemez.
Uygulama watch ile dinle, read ile çağır
Ekrani'de context.watch<SayacModeli>() ile modeli al ve deger'i göster. Butona basıldığında context.read<SayacModeli>().artir() çağır. main içinde print('ekran hazır') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('ekran hazır');
runApp(MyApp());
}
class SayacModeli extends ChangeNotifier {
int deger = 0;
void artir() {
deger++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<SayacModeli>(
create: (_) => SayacModeli(),
child: MaterialApp(home: Ekrani()),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
// modeli watch ile dinle, butonu read ile bağla
return Scaffold(
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('ekran hazır');
runApp(MyApp());
}
class SayacModeli extends ChangeNotifier {
int deger = 0;
void artir() {
deger++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<SayacModeli>(
create: (_) => SayacModeli(),
child: MaterialApp(home: Ekrani()),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
final model = context.watch<SayacModeli>();
return Scaffold(
body: Center(child: Text('${model.deger}')),
floatingActionButton: FloatingActionButton(
onPressed: () {
context.read<SayacModeli>().artir();
},
child: Icon(Icons.add),
),
);
}
}Beklenen çıktı
ekran hazır
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 context.watch ile context.read arasındaki fark nedir?
- watch yalnızca initState'te kullanılır
- İkisi de tamamen aynıdır
- watch dinler ve rebuild eder, read yalnızca bir kez okur Doğru cevap
- read rebuild eder, watch yalnızca okur
Açıklama: context.watch modeli dinler ve değişiklikte rebuild tetikler; context.read yalnızca bir kez okur ve dinlemez.
2 Buton içinde modeli bir kez oku
onPressed: () {
context.____<SayacModeli>().artir();
}onPressed: () {
context.read<SayacModeli>().artir();
}Açıklama: Buton callback'inde rebuild istenmediği için context.read kullanılır; bu modeli bir kez okur ve dinlemez.
3 watch ve read parçaları
| Kavram | Anlamı |
|---|---|
context.watch |
Değişiklikte rebuild tetikler |
context.read |
Bir kez okur, dinlemez |
build metodu |
watch'ın kullanıldığı yer |
onPressed |
read'in kullanılabileceği yer |