Flutter
Tema mimarisi
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.
Örnek çözümü göster
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);
}
Kendini test et
-
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
- Yeni bir widget türü tanımlanır
Cevabı göster
ThemeData'ya özel tema alanları eklenir — ThemeExtension<T>, ThemeData'nın sabit alanlarına kendi renk veya boyut değerlerini eklemenin standart yoludur.
-
ThemeExtension tipi
class AppColors extends ThemeExtension<____> {
final Color brand;
}
Cevabı göster
class AppColors extends ThemeExtension<AppColors> {
final Color brand;
}
-
Tema katmanı parçaları
- 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
Sıradaki ders: Token sistemi
