Token system
- Flutter course
- Expert
- Lesson 32/39
- 4 min
Build a design language with color and size tokens.
What is a token?
A token is a fundamental value of the design language: colors, spacing, font sizes, corner radii. You collect constant values in a single class and thus ensure consistency across the app. Names like AppTokens.primary are more readable than magic values like Color(0xFF...).
class AppTokens {
static const Color primary = Color(0xFF1A73E8);
static const double space4 = 4;
static const double space8 = 8;
static const double radiusSm = 4;
}Spacing tokens
You use tokens instead of hardcoded numbers for spacing. This provides a consistent visual rhythm across screen sizes. Names like Spacing.md are both readable and changeable from one place.
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'),
);Practice Write token classes
Write two token classes: AppColors with a Color constant primary (0xFF1A73E8), Spacing with a double constant md (16). Print both in main.
Starter code
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() {
}Sample solution
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);
}Expected output
Color(0xff1a73e8) 16.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the main purpose of a token system?
- Speed up database queries
- Compile the app faster
- Write less code
- Collect design values in one place and ensure consistency Correct answer
Explanation: Tokens gather values like color, spacing and font in one class; thus the design language stays consistent and changes can be made from one place.
2 Token usage
Padding(
padding: EdgeInsets.all(____),
child: const Text('x'),
);Padding(
padding: EdgeInsets.all(Spacing.md),
child: const Text('x'),
);Explanation: Instead of the hardcoded 16, the Spacing.md token lets you change the spacing value from one place.
3 Token types
| Term | Meaning |
|---|---|
Color token |
Color values |
Spacing token |
Spacing values |
Radius token |
Corner radius |
Typography token |
Font sizes |