Flutter
Tema değiştirme
Ç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.
Örnek çözümü göster
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);
}
Kendini test et
-
ChangeNotifier ile tema değişikliğini dinleyicilere bildiren metod hangisi?
- build
- updateListeners
- notifyListeners
- setState
Cevabı göster
notifyListeners — notifyListeners, ChangeNotifier'daki değişikliği tüm dinleyen widget'lara bildirir; Consumer ve context.watch bu sinyali dinler.
-
Toggle metodu
void toggle() {
_mode = (_mode == ThemeMode.light) ? ThemeMode.dark : ____;
notifyListeners();
}
Cevabı göster
void toggle() {
_mode = (_mode == ThemeMode.light) ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
-
Tema değiştirme parçaları
- ChangeNotifier
- State değişikliğini bildirir
- notifyListeners
- Dinleyicileri uyarır
- Consumer
- State'i dinleyen widget
- themeMode
- Aktif tema seçimi
Sıradaki ders: Özet - Design system
