Meydan okuma 4
- Flutter kursu
- Uzman seviye
- Ders 39/39
- 3 dk
Token ve ThemeExtension ile çok temalı tasarım sistemi yaparsın.
Token ve ThemeExtension ile çok tema
Token'lar tasarım değerlerini tek yerde toplar; ThemeExtension bu değerleri ThemeData'ya özel alan olarak ekler. Açık ve koyu temalar için ayrı token setleri tanımlar, her temayı ayrı bir AppColors uzantısıyla kaydedersin. extensions parametresi uzantıyı ThemeData'ya bağlar.
class AppTokens {
static const Color lightBrand = Color(0xFF1A73E8);
static const Color darkBrand = Color(0xFF66A8FF);
}
ThemeData lightTheme = ThemeData(
extensions: [const AppColors(brand: AppTokens.lightBrand)],
);Uygulama Token ve AppColors yaz
AppTokens sınıfında lightBrand ve darkBrand adında iki Color sabiti tanımla (0xFF1A73E8 ve 0xFF66A8FF). AppColors adında ThemeExtension alt sınıfı yaz; brand alanı, copyWith ve lerp metodları olsun. main içinde lightBrand ile bir AppColors oluştur ve brand yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// AppTokens: iki marka rengi sabiti
// AppColors: ThemeExtension tabanlı, brand alanı
// Kopyalama ve ara değer metodlarını uygula
// main: AppColors oluştur ve brand yazdır
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class AppTokens {
static const Color lightBrand = Color(0xFF1A73E8);
static const Color darkBrand = Color(0xFF66A8FF);
}
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: AppTokens.lightBrand);
print(colors.brand);
}Beklenen çıktı
Color(0xff1a73e8)
Uygulama Açık ve koyu temalar
Aynı AppTokens ve AppColors sınıflarını yaz. main içinde hem lightBrand hem darkBrand ile iki AppColors oluştur. Her ikisinin brand rengini ayrı satırda yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// AppTokens: açık ve koyu marka renkleri
// AppColors: ThemeExtension, brand alanı
// Kopyalama ve ara değer metodlarını uygula
// main: hem açık hem koyu AppColors oluştur
// Her ikisinin brand rengini yazdır
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class AppTokens {
static const Color lightBrand = Color(0xFF1A73E8);
static const Color darkBrand = Color(0xFF66A8FF);
}
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 light = const AppColors(brand: AppTokens.lightBrand);
final dark = const AppColors(brand: AppTokens.darkBrand);
print(light.brand);
print(dark.brand);
}Beklenen çıktı
Color(0xff1a73e8) Color(0xff66a8ff)
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ThemeExtension bir ThemeData'ya nasıl eklenir?
- colorScheme içine gömülerek
- extensions parametresi ile Doğru cevap
- main'de setExtension ile
- theme parametresi ile
Açıklama: ThemeData'nın extensions parametresi bir liste alır; ThemeExtension örnekleri burada listelenir.
2 extensions parametresi
ThemeData(
____: [const AppColors(brand: AppTokens.lightBrand)],
);ThemeData(
extensions: [const AppColors(brand: AppTokens.lightBrand)],
);Açıklama: extensions parametresi, ThemeExtension örneklerini ThemeData'ya kaydeder; alt widget'lar Theme.of(context) ile erişir.
3 Çok temalı sistem parçaları
| Kavram | Anlamı |
|---|---|
AppTokens |
Tasarım değer sabitleri |
ThemeExtension |
Özel tema alanı |
extensions |
ThemeData'da uzantı kaydı |
lerp |
Temalar arasında ara değer |