Özet - Design system

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.

Örnek çözümü göster

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

Kendini test et

Tasarım sisteminin üç temel parçası nedir?
- Provider, Bloc, Riverpod
- Color, font, padding
- Model, service, view
- Token, bileşen, tema katmanı
Cevabı göster

Token, bileşen, tema katmanı — Token'lar değerleri tanımlar, bileşenler bu değerleri uygular, tema katmanı ikisini birleştirir ve canlı değiştirmeye izin verir.

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

Cevabı göster

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

Tasarım sistemi parçaları

Token

Tasarım değeri sabiti
Component

Yeniden kullanılabilir widget
ThemeExtension

Özel tema alanı
ChangeNotifier

Tema değişimini bildirir

Sıradaki ders: Meydan okuma 1

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler