Summary - Design system
- Flutter course
- Expert
- Lesson 35/39
- 4 min
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: () {},
),
);Practice 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.
Starter code
import 'package:flutter/material.dart';
// Birinci sınıf: primary adında Color sabiti (0xFF1A73E8)
// İkinci sınıf: StatelessWidget, label (String) parametreli
// build: ElevatedButton döndürür, child: Text(label)
void main() {
}Sample 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);
}Expected output
Kaydet Color(0xff1a73e8)
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What are the three core parts of a design system?
- Provider, Bloc, Riverpod
- Color, font, padding
- Model, service, view
- Token, component, theme layer Correct answer
Explanation: Tokens define values, components apply them, and the theme layer combines both and allows live switching.
2 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),
);
}
}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),
);
}
}Explanation: Using a token inside a component lets you change the color from one place.
3 Design system parts
| Term | Meaning |
|---|---|
Token |
Design value constant |
Component |
Reusable widget |
ThemeExtension |
Custom theme field |
ChangeNotifier |
Notifies theme changes |