Summary - Provider
- Flutter course
- Intermediate
- Lesson 10/99
- 4 min
Combine Provider, ChangeNotifier and watch to build a theme.
Summary - Provider
In this section you learned three things: with Provider you provide state to the tree; with ChangeNotifier you make a listenable model and call notifyListeners on change; with context.watch you listen to the model and trigger rebuild.
final theme = context.watch<ThemeModel>();
Text(theme.dark ? 'Dark' : 'Light')Combining these, you build a theme toggle screen.
Practice Build a theme toggle screen
Make TemaModeli extend ChangeNotifier with a karanlik bool and a degistir method. Provide the model with ChangeNotifierProvider<TemaModeli>. In Ekrani, read the theme with context.watch<TemaModeli>() and call context.read<TemaModeli>().degistir() on the button. In main, call print('tema uygulaması').
Starter code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('tema uygulaması');
runApp(MyApp());
}
// TemaModeli: ChangeNotifier, karanlik bool, degistir metodu
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// ChangeNotifierProvider ile TemaModeli sağla
return MaterialApp(
home: Ekrani(),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
// context.watch ile temayı al
return Scaffold(
appBar: AppBar(title: Text('Tema')),
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
// context.read ile degistir çağır
onPressed: () {},
child: Icon(Icons.lightbulb),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
print('tema uygulaması');
runApp(MyApp());
}
class TemaModeli extends ChangeNotifier {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<TemaModeli>(
create: (_) => TemaModeli(),
child: MaterialApp(
home: Ekrani(),
),
);
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
final tema = context.watch<TemaModeli>();
return Scaffold(
appBar: AppBar(title: Text('Tema')),
body: Center(child: Text(tema.karanlik ? 'Karanlık' : 'Aydınlık')),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read<TemaModeli>().degistir(),
child: Icon(Icons.lightbulb),
),
);
}
}Expected output
tema uygulaması
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which class should the model extend in a theme toggle app?
- ChangeNotifier Correct answer
- StatelessWidget
- StatefulWidget
- InheritedWidget
Explanation: The theme model extends ChangeNotifier; the toggle method flips the dark value and notifies listeners with notifyListeners.
2 Extend TemaModeli from ChangeNotifier
class TemaModeli ____ {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}class TemaModeli extends ChangeNotifier {
bool karanlik = false;
void degistir() {
karanlik = !karanlik;
notifyListeners();
}
}Explanation: TemaModeli extends ChangeNotifier so that notifyListeners can be called and listeners can be notified.
3 Provider section parts
| Term | Meaning |
|---|---|
Provider |
Package providing state to tree |
ChangeNotifier |
Model class that notifies of changes |
notifyListeners |
Rebuilds listening widgets |
context.watch |
Listens model and triggers rebuild |