Summary - Design system

Combine tokens, components and theme switch into a system.

The whole design system

A design system consists of three core parts: tokens define design values, components are the widgets that apply these values, and the theme layer combines them and allows live switching. Together they produce a consistent and flexible app.

MaterialApp(
  theme: ThemeData(
    extensions: [const AppColors(brand: AppTokens.primary)],
  ),
  home: AppButton(
    label: 'Kaydet',
    onPressed: () {},
  ),
);

Exercise Simple design system

Define a Color constant primary (0xFF1A73E8) in an AppTokens class. Write a StatelessWidget named AppButton with a required label parameter that returns an ElevatedButton. In main, create an AppButton and print its label and AppTokens.primary.

Show example solution

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

Test yourself

What are the three core parts of a design system?
- Provider, Bloc, Riverpod
- Color, font, padding
- Model, service, view
- Token, component, theme layer
Show answer

Token, component, theme layer — Tokens define values, components apply them, and the theme layer combines both and allows live switching.

Token with component

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

Show answer

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

Design system parts

Token

Design value constant
Component

Reusable widget
ThemeExtension

Custom theme field
ChangeNotifier

Notifies theme changes

Next lesson: Challenge 1

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies