Challenge 1
- Flutter course
- Intermediate
- Lesson 96/99
- 3 min
Build an app that manages theme with Provider.
Theme management with Provider
In this challenge you implement app-wide theme management with Provider and ChangeNotifier. A TemaProvider class extends ChangeNotifier; when brightness changes it calls notifyListeners(). The theme and darkTheme fields of MaterialApp are read from the provider, and themeMode is also determined by the provider.
class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}This structure redraws the whole app when the theme changes.
Practice The TemaProvider class
Define a class named TemaProvider that extends ChangeNotifier. Have a private field _mode initialized to ThemeMode.light and a mode getter that returns it. The degistir method should switch the mode from light to dark or dark to light and call notifyListeners(). In main, create a provider instance and print its mode value.
Starter code
import 'package:flutter/material.dart';
// TemaProvider sınıfını tanımla
// ChangeNotifier'ı extend etsin
// _mode alanı ThemeMode.light ile başlasın
// mode getter'ı _mode döndürsün
// degistir metodu modu değiştirsin ve dinleyicileri haberdar etsin
void main() {
// provider oluştur ve mode değerini yazdır
}Sample solution
import 'package:flutter/material.dart';
class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
void main() {
final p = TemaProvider();
print(p.mode);
}Expected output
ThemeMode.light
Practice Theme switch result
In main, create a TemaProvider. Call its degistir() method and print the new mode value with print.
Starter code
import 'package:flutter/material.dart';
class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
// main içinde provider oluştur
// degistir metodunu çağır
// yeni mode değerini yazdırSample solution
import 'package:flutter/material.dart';
class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
void main() {
final p = TemaProvider();
p.degistir();
print(p.mode);
}Expected output
ThemeMode.dark
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is called when mode changes in TemaProvider?
- notifyListeners Correct answer
- Navigator.pop
- jsonDecode
- setState
Explanation: In ChangeNotifier you call notifyListeners to inform listeners of changes. setState is for StatefulWidget, Navigator.pop is for navigation, and jsonDecode is for decoding JSON; none of these are part of the Provider flow.
2 Extend ChangeNotifier
class TemaProvider extends ____ {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}Explanation: TemaProvider extends ChangeNotifier; so it can update listeners with notifyListeners. State is for StatefulWidget, FutureBuilder is for async UI, and Tween is for value transitions; none are used for theme management.
3 Provider theme parts
| Term | Meaning |
|---|---|
ChangeNotifier |
Informing listeners |
notifyListeners |
Change notification |
ThemeMode |
Theme mode |
MaterialApp.theme |
App theme |