Meydan okuma 1
- Flutter kursu
- Orta seviye
- Ders 96/99
- 3 dk
Provider ile tema yönetimi yapan bir uygulama yaparsın.
Provider ile tema yönetimi
Bu meydan okumada Provider ve ChangeNotifier ile uygulama geneli tema yönetimi yaparsın. Bir TemaProvider sınıfı ChangeNotifier'ı extend eder; brightness değiştiğinde notifyListeners() çağrılır. MaterialApp'ın theme ve darkTheme alanları provider'dan okunur, themeMode da provider tarafından belirlenir.
class TemaProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void degistir() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}Bu yapı, tema değişiminde tüm uygulamayı yeniden çizer.
Uygulama TemaProvider sınıfı
TemaProvider adında bir sınıf tanımla; ChangeNotifier'ı extend etsin. _mode adında ThemeMode.light başlangıç değerli bir özel alan olsun ve mode getter'ı bunu döndürsün. degistir metodu modu light ise dark, dark ise light yapsın ve notifyListeners() çağırsın. main içinde provider örneği oluşturup mode değerini yazdır.
Başlangıç kodu
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
}Örnek çözüm
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);
}Beklenen çıktı
ThemeMode.light
Uygulama Tema değişimi sonucu
main içinde bir TemaProvider oluştur. degistir() metodunu çağır ve yeni mode değerini print ile yazdır.
Başlangıç kodu
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ırÖrnek çözüm
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);
}Beklenen çıktı
ThemeMode.dark
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TemaProvider'da mode değiştiğinde ne çağrılır?
- notifyListeners Doğru cevap
- Navigator.pop
- jsonDecode
- setState
Açıklama: ChangeNotifier'da değişiklikleri dinleyenleri haberdar etmek için notifyListeners çağrılır. setState StatefulWidget içindir, Navigator.pop yönlendirme içindir, jsonDecode JSON çözmek içindir; bunlar Provider akışında yer almaz.
2 ChangeNotifier'ı extend et
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();
}
}Açıklama: TemaProvider ChangeNotifier'ı extend eder; böylece notifyListeners ile dinleyicileri güncelleyebilir. State StatefulWidget içindir, FutureBuilder async arayüz içindir, Tween değer geçişidir; tema yönetiminde kullanılmazlar.
3 Provider ile tema parçaları
| Kavram | Anlamı |
|---|---|
ChangeNotifier |
dinleyicileri haberdar etme |
notifyListeners |
değişiklik bildirimi |
ThemeMode |
tema modu |
MaterialApp.theme |
uygulama teması |