Özet - Design system
- Flutter kursu
- Uzman seviye
- Ders 35/39
- 4 dk
Token, bileşen ve tema değiştirmeyi birleştirerek sistem yaparsın.
Tasarım sistemi bütünü
Tasarım sistemi üç temel parçadan oluşur: token'lar tasarım değerlerini tanımlar, bileşenler bu değerleri uygulayan widget'lardır, tema katmanı ise bunları birleştirip canlı değiştirmeye izin verir. Üçü birlikte tutarlı ve esnek bir uygulama ortaya koyar.
MaterialApp(
theme: ThemeData(
extensions: [const AppColors(brand: AppTokens.primary)],
),
home: AppButton(
label: 'Kaydet',
onPressed: () {},
),
);Uygulama Basit tasarım sistemi
AppTokens sınıfında primary adında Color sabiti (0xFF1A73E8) tanımla. AppButton adında StatelessWidget yaz; label zorunlu parametresi alsın ve ElevatedButton döndürsün. main içinde bir AppButton oluştur, label'ı ve AppTokens.primary'i yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// Birinci sınıf: primary adında Color sabiti (0xFF1A73E8)
// İkinci sınıf: StatelessWidget, label (String) parametreli
// build: ElevatedButton döndürür, child: Text(label)
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class AppTokens {
static const Color primary = Color(0xFF1A73E8);
}
class AppButton extends StatelessWidget {
final String label;
const AppButton({super.key, required this.label});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text(label),
);
}
}
void main() {
final btn = const AppButton(label: 'Kaydet');
print(btn.label);
print(AppTokens.primary);
}Beklenen çıktı
Kaydet Color(0xff1a73e8)
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tasarım sisteminin üç temel parçası nedir?
- Provider, Bloc, Riverpod
- Color, font, padding
- Model, service, view
- Token, bileşen, tema katmanı Doğru cevap
Açıklama: Token'lar değerleri tanımlar, bileşenler bu değerleri uygular, tema katmanı ikisini birleştirir ve canlı değiştirmeye izin verir.
2 Token ile bileşen
class AppButton extends StatelessWidget {
final String label;
const AppButton({super.key, required this.label});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: ____,
),
child: Text(label),
);
}
}class AppButton extends StatelessWidget {
final String label;
const AppButton({super.key, required this.label});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: AppTokens.primary,
),
child: Text(label),
);
}
}Açıklama: Bileşen içinde token kullanmak, rengi tek yerden değiştirmeye izin verir.
3 Tasarım sistemi parçaları
| Kavram | Anlamı |
|---|---|
Token |
Tasarım değeri sabiti |
Component |
Yeniden kullanılabilir widget |
ThemeExtension |
Özel tema alanı |
ChangeNotifier |
Tema değişimini bildirir |