Flutter
Token system
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'),
);
Exercise 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.
Show example 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);
}
Test yourself
-
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
Show answer
Collect design values in one place and ensure consistency — 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.
-
Token usage
Padding(
padding: EdgeInsets.all(____),
child: const Text('x'),
);
Show answer
Padding(
padding: EdgeInsets.all(Spacing.md),
child: const Text('x'),
);
-
Token types
- Color token
- Color values
- Spacing token
- Spacing values
- Radius token
- Corner radius
- Typography token
- Font sizes
Next lesson: Component library
