Tema değiştirme
- Flutter kursu
- Uzman seviye
- Ders 34/39
- 4 dk
Çok temalı uygulamayı canlı değiştirmeyi öğrenirsin.
Çok temalı uygulama
Çok temalı uygulamada ThemeData'yı state içinde tutarsın. Kullanıcı temasını değiştirdiğinde state güncellenir ve MaterialApp yeniden derlenir. ChangeNotifier ile bu değişimi tüm uygulamaya yayarsın.
class ThemeModeNotifier extends ChangeNotifier {
ThemeMode _mode = ThemeMode.light;
ThemeMode get mode => _mode;
void toggle() {
_mode = _mode == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
notifyListeners();
}
}Provider ile tema yönetimi
ChangeNotifierProvider ile tema state'ini uygulama geneline yayarsın. Consumer ile tema değişikliğini dinler ve MaterialApp'i yeni themeMode ile yeniden derlersin.
ChangeNotifierProvider(
create: (_) => ThemeModeNotifier(),
child: Consumer<ThemeModeNotifier>(
builder: (context, notifier, _) => MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: notifier.mode,
home: const HomeScreen(),
),
),
);Uygulama Tema controller yaz
ThemeController adında ChangeNotifier yaz. _isDark adında bool alanı başlangıçta false olsun, isDark getter'ı ile dışarı açılsın. toggle metodu değeri tersine çevirip dinleyicileri uyarsın. main içinde oluştur, toggle çağır, isDark yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// ThemeController: ChangeNotifier tabanlı
// isDark: bool, başlangıçta false
// toggle(): değeri tersine çevir ve dinleyicileri uyar
// main: oluştur, toggle çağır, isDark yazdır
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class ThemeController extends ChangeNotifier {
bool _isDark = false;
bool get isDark => _isDark;
void toggle() {
_isDark = !_isDark;
notifyListeners();
}
}
void main() {
final controller = ThemeController();
controller.toggle();
print(controller.isDark);
}Beklenen çıktı
true
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ChangeNotifier ile tema değişikliğini dinleyicilere bildiren metod hangisi?
- build
- updateListeners
- notifyListeners Doğru cevap
- setState
Açıklama: notifyListeners, ChangeNotifier'daki değişikliği tüm dinleyen widget'lara bildirir; Consumer ve context.watch bu sinyali dinler.
2 Toggle metodu
void toggle() {
_mode = (_mode == ThemeMode.light) ? ThemeMode.dark : ____;
notifyListeners();
}void toggle() {
_mode = (_mode == ThemeMode.light) ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}Açıklama: toggle, light ve dark arasında geçiş yapar; dark ise light'a döner.
3 Tema değiştirme parçaları
| Kavram | Anlamı |
|---|---|
ChangeNotifier |
State değişikliğini bildirir |
notifyListeners |
Dinleyicileri uyarır |
Consumer |
State'i dinleyen widget |
themeMode |
Aktif tema seçimi |