Token sistemi

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.

Örnek çözümü göster

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);
}

Kendini test et

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
Cevabı göster

Tasarım değerlerini tek yerde toplayıp tutarlılık sağlamak — 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.

Token kullanımı

Padding(
  padding: EdgeInsets.all(____),
  child: const Text('x'),
);

Cevabı göster

Padding(
  padding: EdgeInsets.all(Spacing.md),
  child: const Text('x'),
);

Token türleri

Color token

Renk değerleri
Spacing token

Boşluk değerleri
Radius token

Köşe yarıçapı
Typography token

Font boyutları

Sıradaki ders: Bileşen kütüphanesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler