Tema mimarisi
- Flutter kursu
- Uzman seviye
- Ders 31/39
- 4 dk
Tema katmanları ve ThemeExtension'ı öğrenirsin.
Tema katmanları
Flutter'da tema katmanları şu şekilde işler: MaterialApp bir ThemeData alır ve bu değerler tüm alt widget'lara yayılır. Alt widget'lar Theme.of(context) ile temaya erişir. Renk, tipografi ve şekil tek yerden yönetilir.
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const HomeScreen(),
);ThemeExtension ile özel alan
Bazen ThemeData'nın sabit alanları yetmez; marka rengi gibi özel değerler eklemek istersin. ThemeExtension<T> ile kendi tema alanını tanımlarsın. copyWith ve lerp metodlarını uygulamalısın; böylece tema geçişlerinde Flutter değerleri yumuşakça ara değerler.
class AppColors extends ThemeExtension<AppColors> {
final Color brand;
const AppColors({required this.brand});
@override
AppColors copyWith({Color? brand}) =>
AppColors(brand: brand ?? this.brand);
@override
AppColors lerp(AppColors? other, double t) =>
AppColors(brand: Color.lerp(brand, other?.brand, t)!);
}Uygulama ThemeExtension sınıfı yaz
AppColors adında bir ThemeExtension sınıfı yaz. brand adında Color alanı olsun. copyWith ve lerp metodlarını uygula. main içinde bir AppColors örneği oluştur ve brand rengini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// AppColors adında ThemeExtension<AppColors> yaz
// brand adında Color alanı olsun
// İki metodu da uygula
void main() {
// AppColors oluştur ve brand rengini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class AppColors extends ThemeExtension<AppColors> {
final Color brand;
const AppColors({required this.brand});
@override
AppColors copyWith({Color? brand}) =>
AppColors(brand: brand ?? this.brand);
@override
AppColors lerp(AppColors? other, double t) =>
AppColors(brand: Color.lerp(brand, other?.brand, t)!);
}
void main() {
final colors = const AppColors(brand: Color(0xFF123456));
print(colors.brand);
}Beklenen çıktı
Color(0xff123456)
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ThemeExtension ile ne yapılır?
- Uygulamanın ekran boyutu değiştirilir
- State yönetimi yapılır
- ThemeData'ya özel tema alanları eklenir Doğru cevap
- Yeni bir widget türü tanımlanır
Açıklama: ThemeExtension<T>, ThemeData'nın sabit alanlarına kendi renk veya boyut değerlerini eklemenin standart yoludur.
2 ThemeExtension tipi
class AppColors extends ThemeExtension<____> {
final Color brand;
}class AppColors extends ThemeExtension<AppColors> {
final Color brand;
}Açıklama: ThemeExtension<T> kalıbında T, sınıfın kendisidir; böylece copyWith ve lerp doğru tipi döndürür.
3 Tema katmanı parçaları
| Kavram | Anlamı |
|---|---|
ThemeData |
Tüm tema değerlerini taşır |
ThemeExtension |
Özel tema alanları ekler |
Theme.of(context) |
Alt widget'tan temaya erişim |
ColorScheme.fromSeed |
Tohumdan renk paleti üretir |