Özet - ThemeData
- Flutter kursu
- Orta seviye
- Ders 90/99
- 4 dk
ThemeData ve ColorScheme'i birleştirerek koyu tema yaparsın.
Koyu tema
Koyu tema yapmak için ThemeData'nın brightness alanını Brightness.dark yapar ve buna uygun bir ColorScheme verirsin. ColorScheme.fromSeed'e brightness: Brightness.dark geçirerek tohumdan koyu palet ürettirirsin. Theme.of(context) ile widget'lar otomatik olarak koyu temaya uyum sağlar.
ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)Uygulama Koyu tema uygulaması
Uygulama adında bir StatelessWidget tanımla. build metodu bir MaterialApp döndürsün. theme parametresine bir ThemeData ver; bu ThemeData'nın brightness alanı Brightness.dark olsun ve colorScheme alanı ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark) olsun. home olarak Scaffold(body: Center(child: Text('Merhaba'))) kullan. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// Uygulama StatelessWidget tanımla
// build MaterialApp döndürsün
// theme koyu tema olsun
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
),
home: const Scaffold(body: Center(child: Text('Merhaba'))),
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Koyu tema için ThemeData'da hangi alan ayarlanır?
- primarySwatch
- platform
- brightness Doğru cevap
- textTheme
Açıklama: Brightness.dark ile tema koyu moda geçer. textTheme metin stilleri içindir, primarySwatch ana renk tonudur, platform hedef platformu belirtir; koyu tema ile doğrudan ilgileri yoktur.
2 Koyu tema değeri
ThemeData(
brightness: ____,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)Açıklama: Koyu tema için brightness: Brightness.dark kullanılır. Brightness.light aydınlık moddur, Colors.black bir renktir brightness değil, ThemeData.dark ise ayrı bir kurucu adıdır ama burada brightness alanı değer olarak beklenir.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
ThemeData |
tema tanımı |
ColorScheme |
renk paleti |
brightness |
aydınlık/koyu mod |
Theme.of |
tema erişimi |