context.watch and read
- Flutter course
- Intermediate
- Lesson 9/99
- 4 min
Learn the difference between context.watch and context.read.
context.watch
context.watch<T>() listens to the provided model and automatically rebuilds the widget when notifyListeners is called. It is used inside the build method.
final model = context.watch<CounterModel>();
Text('${model.value}')On every change, build runs again.
context.read
context.read<T>() reads the model once without listening. Even if notifyListeners is called, it does not trigger a rebuild. It is used outside build, such as in button callbacks.
onPressed: () {
context.read<CounterModel>().increment();
}Unlike watch, read does not trigger build.
Practice Listen with watch, call with read
In Ekrani, get the model with context.watch<SayacModeli>() and display deger. When the button is pressed, call context.read<SayacModeli>().artir(). In main, call print('ekran hazır').
Starter code
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),
),
);
}
}Sample solution
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),
),
);
}
}Expected output
ekran hazır
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the difference between context.watch and context.read?
- watch is only used in initState
- They are exactly the same
- watch listens and rebuilds, read reads only once Correct answer
- read rebuilds, watch only reads
Explanation: context.watch listens to the model and triggers rebuild on change; context.read reads once without listening.
2 Read the model once inside the button
onPressed: () {
context.____<SayacModeli>().artir();
}onPressed: () {
context.read<SayacModeli>().artir();
}Explanation: In a button callback, context.read is used because no rebuild is wanted; it reads the model once without listening.
3 watch and read parts
| Term | Meaning |
|---|---|
context.watch |
Triggers rebuild on change |
context.read |
Reads once without listening |
build metodu |
Where watch is used |
onPressed |
Where read can be used |