Token sistemi
- Flutter kursu
- Uzman seviye
- Ders 32/39
- 4 dk
Renk ve boyut token'ları ile tasarım dilini kurmayı öğrenirsin.
Token nedir?
Token, tasarım dilinin temel değerleridir: renkler, boşluklar, font boyutları, köşe yarıçapları. Sabit değerleri tek sınıfta toplarsın ve böylece tüm uygulamada tutarlılık sağlarsın. AppTokens.primary gibi isimler, Color(0xFF...) gibi sihirli değerlerden daha okunaklıdır.
class AppTokens {
static const Color primary = Color(0xFF1A73E8);
static const double space4 = 4;
static const double space8 = 8;
static const double radiusSm = 4;
}Spacing token'ları
Boşlukları sabit sayılar yerine token olarak kullanırsın. Bu, ekran boyutları arasında tutarlı bir görsel ritim sağlar. Spacing.md gibi isimler hem okunaklı hem de tek yerden değiştirilebilir.
class Spacing {
static const double xs = 4;
static const double sm = 8;
static const double md = 16;
static const double lg = 24;
static const double xl = 32;
}
Padding(
padding: const EdgeInsets.all(Spacing.md),
child: const Text('Merhaba'),
);Uygulama Token sınıfları yaz
İki token sınıfı yaz: AppColors içinde primary adında Color sabiti (0xFF1A73E8), Spacing içinde md adında double sabiti (16). main içinde ikisini de yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// Birinci sınıf: Color sabiti primary (0xFF1A73E8)
// İkinci sınıf: double sabiti md (16)
// main içinde ikisini de yazdır
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class AppColors {
static const Color primary = Color(0xFF1A73E8);
}
class Spacing {
static const double md = 16;
}
void main() {
print(AppColors.primary);
print(Spacing.md);
}Beklenen çıktı
Color(0xff1a73e8) 16.0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Token sisteminin temel amacı nedir?
- Veritabanı sorgularını hızlandırmak
- Uygulamayı daha hızlı derlemek
- Daha az kod yazmak
- Tasarım değerlerini tek yerde toplayıp tutarlılık sağlamak Doğru cevap
Açıklama: Token'lar renk, boşluk, font gibi değerleri tek sınıfta toplar; böylece tasarım dili tutarlı kalır ve değişiklik tek yerden yapılır.
2 Token kullanımı
Padding(
padding: EdgeInsets.all(____),
child: const Text('x'),
);Padding(
padding: EdgeInsets.all(Spacing.md),
child: const Text('x'),
);Açıklama: Sabit 16 yerine Spacing.md token'ı, boşluk değerini tek yerden değiştirmene izin verir.
3 Token türleri
| Kavram | Anlamı |
|---|---|
Color token |
Renk değerleri |
Spacing token |
Boşluk değerleri |
Radius token |
Köşe yarıçapı |
Typography token |
Font boyutları |