Design System from scratch in Flutter

Initially, many solutions are available to create a Design System for your app in
Flutter. I want to share my experience with Design System, which we have
implemented in our projects before.

Why do we need a Design System?

In our example, we have applied it to share our design code between mobile, web,
and desktop apps. As a result, it is an independent package working on its own. We
can inject into any project in a few steps.

Let’s start with the atomic parts.

As a first step, we divided all minor parts — colors, radiuses, shadows, etc into
independent classes. Definitely, Implemented design system codes depend on the
designer’s implementation.

As you can see, the designer divided atomic parts for us (thanks to our designer)

I will not mention all the code; it will be snippets. They are like the following
examples:

1 /// {@template app_colors}

2 /// Colors class for themes which provides direct access with static
3 fields.
4 /// {@endtemplate}
5 class AppColors {
6 AppColors._();
7
8 /// The color white
9 static const white = Colors.white;
10
11 /// The color black
12 static const black = Colors.black;
13
14 /// The color transparent
15 static const transparent = Colors.transparent;
16
17 /// Brand color palette.
18 static const brand = MaterialColor(
19 0xFF347AF6,
20 {
21 50: Color(0xFFF0F5FF),
22 100: Color(0xFFE0ECFF),
23 150: Color(0xFFD3E1FB),
24 200: Color(0xFFBDD3F9),
25 250: Color(0xFF9FBFF9),
26 300: Color(0xFF81ACF9),
27 400: Color(0xFF5A93F9),
28 500: Color(0xFF347AF6),
29 600: Color(0xFF1559D1),
30 700: Color(0xFF174EAF),
31 800: Color(0xFF1D4387),
32 900: Color(0xFF163367),
33 },
34 );
35
36 /// Light gray color palette.
37 static const grayLight = MaterialColor(
38 0xFF667085,
39 {
40 50: Color(0xFFFCFCFD),
41 100: Color(0xFFF9FAFB),
42 150: Color(0xFFF2F4F7),
43 200: Color(0xFFEAECF0),
44 250: Color(0xFFD0D5DD),
45 300: Color(0xFF98A2B3),
46 400: Color(0xFF667085),
47 500: Color(0xFF475467),
48 600: Color(0xFF344054),
 700: Color(0xFF182230),
49
800: Color(0xFF101828),
50
900: Color(0xFF0C111D),
51
},
52
);
53
54
/// Dark gray color palette.
55
static const grayDark = MaterialColor(
56
0xFF85888E,
57
{
58
50: Color(0xFFFAFAFA),
59
100: Color(0xFFF5F5F6),
60
150: Color(0xFFF0F1F1),
61
200: Color(0xFFECECED),
62
250: Color(0xFFCECFD2),
63
300: Color(0xFF94969C),
64
400: Color(0xFF85888E),
65
500: Color(0xFF61646C),
66
600: Color(0xFF333741),
67
700: Color(0xFF1F242F),
68
800: Color(0xFF161B26),
69
900: Color(0xFF0C111D),
70
},
71
);

/// {@template app_radius}

1 /// Radius class contains all radius used in
2 app
3 /// {@endtemplate}
4 class AppRadius {
5 AppRadius._();
6
7 /// Radius of 0.
8 static const none = Radius.zero;
9
10 /// Extra extra small radius of 2.
11 static const xxs = Radius.circular(2);
12
13 /// Extra small radius of 4.
14 static const xs = Radius.circular(4);
15
16 /// Small radius of 6.
17 static const sm = Radius.circular(6);
18 }

1 /// {@template app_shadow}

2 /// Shadow class contains all shadows used in
3 app
4 /// {@endtemplate}
5 class AppShadow {
6 AppShadow._();
7
8
9 /// Extra small shadow.
10 static const xs = [
11 BoxShadow(
12 blurRadius: 2,
13 offset: Offset(0, 1),
14 color: Color.fromRGBO(16, 24, 40,
15 0.05),
16 ),
17 ];
18
19 /// Small shadow.
20 static const sm = [
21 BoxShadow(
22 color: Color(0x0F101828),
23 blurRadius: 2,
24 offset: Offset(0, 1),
25 ),
26 BoxShadow(
 color: Color(0x19101828),
blurRadius: 3,
27
offset: Offset(0, 1),
28
),
29
];
30
}

/// {@template app_spacing}

1 /// Class contains all space (does not matter is it
2 vertical
3 /// or horizontal used in app
4 /// {@endtemplate}
5 class AppSpacing {
6 AppSpacing._();
7
8 /// No spacing.
9 static const none = 0.0;
10
11 /// Extra extra small spacing of 2.0.
12 static const xxs = 2.0;
13
14 /// Extra small spacing of 4.0.
15 static const xs = 4.0;
16
17 /// Small spacing of 6.0.
18 static const sm = 6.0;

You can have more atomic parts in your projects.

Next stage — components

I will show you some of our components — like buttons, textfield. Other components
developed in the same way.

Theme development for component

I have written a new theme class for each of our components to keep them more
clean. Sure, it is provided by our designer, too :)

Keep in mind that Theme classes are extended from ThemeExtension, in this way, we
can register them as theme extensions and use them with Theme class.

For instance, we can check Theme classes for buttons and text fields:
1 /// {@template app_button_theme}
2 /// Theme class which provides configuration of buttons
3 /// {@endtemplate}
4 class AppButtonTheme extends ThemeExtension<AppButtonTheme> {
5 /// {@macro app_button_theme}
6 const AppButtonTheme({
7 required this.primaryText,
8 required this.primaryDefault,
9 required this.primaryHover,
 required this.primaryFocused,
});
10
11
/// {@macro app_button_theme}
12
factory AppButtonTheme.light() {
13
return AppButtonTheme(
14
primaryText: AppColors.white,
15
primaryDefault: AppColors.brand.shade500,
16
primaryHover: AppColors.brand.shade600,
17
primaryFocused: AppColors.brand.shade700,
18
);
19
}
20
21
/// The color of the primary text.
22
final Color primaryText;
23
24
/// The color of the primary button default.
25
final Color primaryDefault;
26
27
/// The color of the primary button hover.
28
final Color primaryHover;
29
30
/// The color of the primary button focused.
31
final Color primaryFocused;
32
33
@override
34
ThemeExtension<AppButtonTheme> copyWith({
35
Color? primaryText,
36
Color? primaryDefault,
37
Color? primaryHover,
38
Color? primaryFocused,
39
}) {
40
return AppButtonTheme(
41
primaryText: primaryText ?? this.primaryText,
42
primaryDefault: primaryDefault ?? this.primaryDefault,
43
primaryHover: primaryHover ?? this.primaryHover,
44
primaryFocused: primaryFocused ?? this.primaryFocused,
45
);
46
}
47
48
@override
49
ThemeExtension<AppButtonTheme> lerp(
50
covariant ThemeExtension<AppButtonTheme>? other,
51
double t,
52
) {
53
if (other is! AppButtonTheme) {
54
return this;
55
}
56
57
return AppButtonTheme(
58
primaryText: Color.lerp(primaryText, other.primaryText, t)!,
59
primaryDefault: Color.lerp(primaryDefault,
60
other.primaryDefault, t)!,
61
primaryHover: Color.lerp(primaryHover, other.primaryHover,
62
t)!,
63
primaryFocused: Color.lerp(primaryFocused,
64
other.primaryFocused, t)!,
65
);
66
}
}

1 /// {@template app_input_theme}

2 /// Theme class which provides configuration of [AppTextField]
3 /// {@endtemplate}
4 class AppInputTheme extends ThemeExtension<AppInputTheme> {
5 /// {@macro app_input_theme}
6 const AppInputTheme({
7 required this.defaultText,
8 required this.focusedOnBrand,
9 required this.focusedTextDefault,
10 required this.errorTextDefault,
11 required this.successTextDefault,
12 required this.disabledText,
13 required this.borderDefault,
14 required this.borderHover,
15 required this.borderFocused,
16 required this.borderError,
17 required this.borderSuccess,
18 required this.borderDisabled,
19 required this.defaultColor,
20 required this.disabledColor,
21 });
22
23 /// {@macro app_input_theme}
24 factory AppInputTheme.light() {
25 return AppInputTheme(
26 defaultText: AppColors.grayLight.shade400,
27 focusedOnBrand: AppColors.brand.shade500,
28 focusedTextDefault: AppColors.grayLight.shade600,
29 errorTextDefault: AppColors.error.shade400,
30 successTextDefault: AppColors.success.shade400,
31 disabledText: AppColors.grayLight[250]!,
32 borderDefault: AppColors.grayLight[250]!,
33 borderHover: AppColors.grayLight.shade300,
34 borderFocused: AppColors.brand.shade500,
35 borderError: AppColors.error.shade400,
36 borderSuccess: AppColors.success.shade400,
37 borderDisabled: AppColors.grayLight.shade200,
38 defaultColor: AppColors.white,
39 disabledColor: AppColors.grayLight.shade100,
40 );
41 }
42
43 /// The default text color.
44 final Color defaultText;
45
46 /// The text color when focused on brand.
47 final Color focusedOnBrand;
48
49 /// The text color when focused.
50 final Color focusedTextDefault;
51
52 /// The text color when error.
53 final Color errorTextDefault;
54
55 /// The text color when success.
56 final Color successTextDefault;
57
58 /// The text color when disabled.
59 final Color disabledText;
60
61 /// The default border color.
62 final Color borderDefault;
63
64 /// The border color when hovered.
65 final Color borderHover;
66
67 /// The border color when focused.
68 final Color borderFocused;
69
70 /// The border color when error.
71 final Color borderError;
72
73 /// The border color when success.
74 final Color borderSuccess;
75
76 /// The border color when disabled.
77 final Color borderDisabled;
78
79 /// The default color.
80 final Color defaultColor;
81
82 /// The disabled color.
83 final Color disabledColor;
84
 85 @override
86 ThemeExtension<AppInputTheme> copyWith({
87 Color? defaultText,
88 Color? focusedOnBrand,
89 Color? focusedTextDefault,
90 Color? errorTextDefault,
91 Color? successTextDefault,
92 Color? disabledText,
93 Color? borderDefault,
94 Color? borderHover,
95 Color? borderFocused,
96 Color? borderError,
97 Color? borderSuccess,
98 Color? borderDisabled,
99 Color? defaultColor,
100 Color? disabledColor,
101 }) {
102 return AppInputTheme(
103 defaultText: defaultText ?? this.defaultText,
104 focusedOnBrand: focusedOnBrand ?? this.focusedOnBrand,
105 focusedTextDefault: focusedTextDefault ??
106 this.focusedTextDefault,
107 errorTextDefault: errorTextDefault ?? this.errorTextDefault,
108 successTextDefault: successTextDefault ??
109 this.successTextDefault,
110 disabledText: disabledText ?? this.disabledText,
111 borderDefault: borderDefault ?? this.borderDefault,
112 borderHover: borderHover ?? this.borderHover,
113 borderFocused: borderFocused ?? this.borderFocused,
114 borderError: borderError ?? this.borderError,
115 borderSuccess: borderSuccess ?? this.borderSuccess,
116 borderDisabled: borderDisabled ?? this.borderDisabled,
117 defaultColor: defaultColor ?? this.defaultColor,
118 disabledColor: disabledColor ?? this.disabledColor,
119 );
120 }
121
122 @override
123 ThemeExtension<AppInputTheme> lerp(
124 covariant ThemeExtension<AppInputTheme>? other,
125 double t,
126 ) {
127 if (other is! AppInputTheme) {
128 return this;
129 }
130
131 return AppInputTheme(
132 defaultText: Color.lerp(defaultText, other.defaultText, t)!,
133 focusedOnBrand: Color.lerp(focusedOnBrand,
134 other.focusedOnBrand, t)!,
135 focusedTextDefault: Color.lerp(
136 focusedTextDefault,
137 other.focusedTextDefault,
138 t,
139 )!,
140 errorTextDefault: Color.lerp(
141 errorTextDefault,
142 other.errorTextDefault,
143 t,
144 )!,
145 successTextDefault: Color.lerp(
146 successTextDefault,
147 other.successTextDefault,
148 t,
149 )!,
150 disabledText: Color.lerp(disabledText, other.disabledText,
151 t)!,
152 borderDefault: Color.lerp(borderDefault, other.borderDefault,
153 t)!,
154 borderHover: Color.lerp(borderHover, other.borderHover, t)!,
155 borderFocused: Color.lerp(borderFocused, other.borderFocused,
156 t)!,
157 borderError: Color.lerp(borderError, other.borderError, t)!,
 borderSuccess: Color.lerp(borderSuccess, other.borderSuccess,
t)!,
borderDisabled: Color.lerp(borderDisabled,
other.borderDisabled, t)!,
defaultColor: Color.lerp(defaultColor, other.defaultColor,
158 t)!,
disabledColor: Color.lerp(disabledColor, other.disabledColor,
t)!,
);
}
}
Moreover, we have an AppTypography class, which collects font sizes as an independent
theme.
1 /// {@template app_typography}
2 /// Theme class which provides configuration of [TextStyle]
3 /// {@endtemplate}
4 interface class AppTypography extends ThemeExtension<AppTypography> {
5 /// {@macro app_typography}
6 AppTypography({
7 required this.buttonLarge,
8 required this.buttonMedium,
9 required this.buttonSmall,
10 });
11
12 /// Button Large
13 final TextStyle buttonLarge;
14
15 /// Button Medium
16 final TextStyle buttonMedium;
17
18 /// Button Small
19 final TextStyle buttonSmall;
20
21 @override
22 ThemeExtension<AppTypography> copyWith({
23 TextStyle? buttonLarge,
24 TextStyle? buttonMedium,
25 TextStyle? buttonSmall,
26 }) {
27 return AppTypography(
28 buttonLarge: buttonLarge ?? this.buttonLarge,
29 buttonMedium: buttonMedium ?? this.buttonMedium,
30 buttonSmall: buttonSmall ?? this.buttonSmall,
31 );
32 }
33
34 @override
35 ThemeExtension<AppTypography> lerp(covariant ThemeExtension<AppTypography>?
36 other,double t,)
37 {
38 if (other is! AppTypography) {
39 return this;
40 }
41
42 return AppTypography(
43 buttonLarge: TextStyle.lerp(buttonLarge, other.buttonLarge, t)!,
44 buttonMedium: TextStyle.lerp(buttonMedium, other.buttonMedium, t)!,
45 buttonSmall: TextStyle.lerp(buttonSmall, other.buttonSmall, t)!,
46 );
47 }
48 }
49
50 /// {@macro app_typography}
51 class AppRegularTypography extends AppTypography {
52 /// {@macro app_typography}
53 AppRegularTypography({
54 super.buttonLarge = const TextStyle(
55 fontSize: 16,
56 height: 24 / 16,
57 fontWeight: FontWeight.w500,
58 ),
59 super.buttonMedium = const TextStyle(
60 fontSize: 14,
61 height: 20 / 14,
62 fontWeight: FontWeight.w500,
63 ),
64 super.buttonSmall = const TextStyle(
65 fontSize: 14,
66 height: 20 / 14,
67 fontWeight: FontWeight.w500,
68 ),
69 ),
70 });
 }

After all… Components

Component development depends on the design given by the designer. In reality, all
the things we have developed above depend on. In our case, for instance, text
buttons have many versions, such as size, decoration, etc.

We had many buttons, but I have shared some of them (text buttons)
Therefore, we have created a base class for our text buttons. Here is the code
snippet:
1 /// {@template app_text_button}
2 /// A custom text button widget that adapts to the platform.
3 /// {@endtemplate}
4 abstract class AppTextButton extends StatelessWidget {
5 /// {@macro app_text_button}
6 const AppTextButton({
7 super.key,
8 required this.label,
9 this.onTap,
10 this.leading,
11 this.trailing,
12 this.appButtonSize = AppButtonSize.medium,
13 });
14
15 /// The label for the text button.
16 final String label;
17
18 /// The callback function for the text button.
19 final VoidCallback? onTap;
20
21 /// The leading icon for the text button.
22 final IconBuilder? leading;
23
24 /// The trailing icon for the text button.
25 final IconBuilder? trailing;
26
27 /// The size of the text button.
28 final AppButtonSize appButtonSize;
29
30 /// The background color for the text button.
31 Color backgroundColor(BuildContext context);
32
33 /// The focus color for the text button.
34 Color focusColor(BuildContext context);
35
36 /// The hover color for the text button.
37 Color hoverColor(BuildContext context);
38
39 /// The disabled color for the text button.
40 Color disabledColor(BuildContext context);
41
42 /// The text color for the text button.
43 Color textColor(BuildContext context);
44
45 /// The disabled text color for the text button.
46 Color disabledTextColor(BuildContext context) {
47 return context.buttonTheme.primaryTextDisabled;
48 }
49
50 /// The default border for the text button.
51 BorderSide defaultBorder(BuildContext context) => BorderSide.none;
52
53 /// The focused border for the text button.
54 BorderSide focusedBorder(BuildContext context) => BorderSide.none;
55
56 /// The hover border for the text button.
57 BorderSide hoverBorder(BuildContext context) => BorderSide.none;
58
59 /// The disabled border for the text button.
60 BorderSide disabledBorder(BuildContext context) => BorderSide.none;
61
62 @override
63 Widget build(BuildContext context) {
64 final betweenSpace = switch (appButtonSize) {
65 AppButtonSize.small ||
66 AppButtonSize.xSmall ||
67 AppButtonSize.medium =>
68 AppSpacing.xs,
69 AppButtonSize.large || AppButtonSize.xlarge => AppSpacing.sm,
70 AppButtonSize.xxLarge => AppSpacing.lg,
 71 };
72
73 final inputTextColor = WidgetStateProperty.resolveWith(
74 (states) {
75 if (states.contains(WidgetState.disabled)) {
76 return disabledTextColor(context);
77 }
78
79 return textColor(context);
80 },
81 );
82
83 return ElevatedButton(
84 style: ButtonStyle(
85 elevation: WidgetStateProperty.all(0),
86 splashFactory: NoSplash.splashFactory,
87 overlayColor: WidgetStateProperty.resolveWith(
88 (states) {
89 if (states.contains(WidgetState.disabled)) {
90 return disabledColor(context);
91 }
92
93 if (states.contains(WidgetState.hovered)) {
94 return hoverColor(context);
95 }
96
97 if (states.contains(WidgetState.focused)) {
98 return focusColor(context);
99 }
100
101 if (states.contains(WidgetState.pressed)) {
102 return focusColor(context);
103 }
104
105 return backgroundColor(context);
106 },
107 ),
108 shape: WidgetStateProperty.resolveWith(
109 (states) {
110 const shape = RoundedRectangleBorder(
111 borderRadius: BorderRadius.all(AppRadius.md),
112 );
113
114 if (states.contains(WidgetState.disabled)) {
115 return shape.copyWith(side: disabledBorder(context));
116 }
117
118 if (states.contains(WidgetState.focused)) {
119 return shape.copyWith(side: focusedBorder(context));
120 }
121
122 if (states.contains(WidgetState.hovered)) {
123 return shape.copyWith(side: hoverBorder(context));
124 }
125
126 if (states.contains(WidgetState.pressed)) {
127 return shape.copyWith(side: focusedBorder(context));
128 }
129
130 return shape.copyWith(side: defaultBorder(context));
131 },
132 ),
133 backgroundColor: WidgetStateProperty.resolveWith(
134 (states) {
135 if (states.contains(WidgetState.disabled)) {
136 return disabledColor(context);
137 }
138
139 if (states.contains(WidgetState.hovered)) {
140 return hoverColor(context);
141 }
142
143 if (states.contains(WidgetState.focused)) {
144 return focusColor(context);
145 }
146
147 if (states.contains(WidgetState.pressed)) {
148 return focusColor(context);
149 }
150
151 return backgroundColor(context);
152 },
153 ),
154 foregroundColor: inputTextColor,
155 fixedSize: WidgetStateProperty.all(
156 switch (appButtonSize) {
157 AppButtonSize.small ||
158 AppButtonSize.xSmall =>
159 const Size(double.infinity, 36),
160 AppButtonSize.medium => const Size(double.infinity, 40),
161 AppButtonSize.large => const Size(double.infinity, 44),
162 AppButtonSize.xlarge => const Size(double.infinity, 48),
163 AppButtonSize.xxLarge => const Size(double.infinity, 56),
164 },
165 ),
166 padding: WidgetStateProperty.all(
167 switch (appButtonSize) {
168 AppButtonSize.small ||
169 AppButtonSize.xSmall =>
170 const EdgeInsets.symmetric(horizontal: 12),
171 AppButtonSize.medium => const
172 EdgeInsets.symmetric(horizontal: 16),
173 AppButtonSize.large => const EdgeInsets.symmetric(horizontal:
174 16),
175 AppButtonSize.xlarge => const
176 EdgeInsets.symmetric(horizontal: 20),
177 AppButtonSize.xxLarge => const
178 EdgeInsets.symmetric(horizontal: 24),
179 },
180 ),
181 ),
182 onPressed: onTap,
183 child: Row(
184 mainAxisAlignment: MainAxisAlignment.center,
185 mainAxisSize: MainAxisSize.min,
186 children: [
187 if (leading != null) ...[
188 leading!(
189 onTap != null ? textColor(context) :
190 disabledTextColor(context),
191 ),
192 SizedBox(width: betweenSpace),
193 ],
194 Padding(
195 padding: const EdgeInsets.symmetric(horizontal:
196 AppSpacing.xxs),
197 child: Text(
198 label,
199 style: switch (appButtonSize) {
200 AppButtonSize.small ||
201 AppButtonSize.xSmall =>
202 context.typography.buttonSmall,
203 AppButtonSize.medium => context.typography.buttonMedium,
204 AppButtonSize.large => context.typography.buttonLarge,
205 AppButtonSize.xlarge => context.typography.buttonXLarge,
206 AppButtonSize.xxLarge =>
207 context.typography.button2XLarge,
208 },
209 ),
210 ),
211 if (trailing != null) ...[
212 SizedBox(width: betweenSpace),
213 trailing!(
214 onTap != null ? textColor(context) :
disabledTextColor(context),
),
 ],
],
),
);
}
}

AppButtonSize is a simple enum provided by us:

/// Enum for button sizes
1
enum AppButtonSize {
2
/// Extra small button size
3
xSmall,
4
5
/// Small button size
6
small,
7
8
/// Medium button size
9
medium,
10
11
/// Large button size
12
large,
13
14
/// Extra large button size
15
xlarge,
16
17
/// Extra extra large button size
18
xxLarge,
19
}
20

IconBuilder is a simple typedef provided by us. In some cases, we can need to

change the color of an icon within the inner state of the button (focus, hover,
and other state colors can be applied to the color of the icon)
/// A function that builds an icon widget.
1 typedef IconBuilder = Widget Function(Color
2 iconColor);

Eventually, with the help of the base AppTextButton class, we can create our child
classes. So, our Primary, Secondary, and Outlined text buttons’ codes will be like
the following:
1 /// {@template primary_text_button}
2 /// A custom primary text button widget that adapts to the
3 platform.
4 /// {@endtemplate}
5 class PrimaryTextButton extends AppTextButton {
6 /// {@macro primary_text_button}
7 const PrimaryTextButton({
8 super.key,
9 required super.label,
10 super.onTap,
11 super.leading,
12 super.trailing,
13 super.appButtonSize,
14 });
15
16 @override
17 Color backgroundColor(BuildContext context) {
18 return context.buttonTheme.primaryDefault;
19 }
20
21 @override
22 Color disabledColor(BuildContext context) {
23 return context.buttonTheme.primaryDisabled;
24 }
25
26 @override
27 Color focusColor(BuildContext context) {
28 return context.buttonTheme.primaryFocused;
29 }
30
 @override
31
Color hoverColor(BuildContext context) {
32
return context.buttonTheme.primaryHover;
33
}
34
35
@override
36
Color textColor(BuildContext context) {
37
return context.buttonTheme.primaryText;
38
}
39
}

/// {@template secondary_text_button}

1
/// A custom secondary text button widget that adapts to the
2
platform.
3
/// {@endtemplate}
4
///
5
class SecondaryTextButton extends AppTextButton {
6
/// {@macro secondary_text_button}
7
const SecondaryTextButton({
8
super.key,
9
required super.label,
10
super.onTap,
11
super.leading,
12
super.trailing,
13
super.appButtonSize,
14
});
15
16
@override
17
Color backgroundColor(BuildContext context) {
18
return context.buttonTheme.secondaryDefault;
19
}
20
21
@override
22
Color disabledColor(BuildContext context) {
23
return context.buttonTheme.secondaryDisabled;
24
}
25
26
@override
27
Color focusColor(BuildContext context) {
28
return context.buttonTheme.secondaryFocused;
29
}
30
31
@override
32
Color hoverColor(BuildContext context) {
33
return context.buttonTheme.secondaryHover;
34
}
35
36
@override
37
Color textColor(BuildContext context) {
38
return context.buttonTheme.primaryTextOnBrand;
39
}
40
}

1 /// {@template outline_text_button}

2 /// A custom outline text button widget that adapts to the
3 platform.
4 /// {@endtemplate}
5 class OutlineTextButton extends AppTextButton {
6 /// {@macro outline_text_button}
7 const OutlineTextButton({
8 super.key,
9 required super.label,
10 super.onTap,
11 super.leading,
12 super.trailing,
13 super.appButtonSize,
14 });
15
16 @override
17 Color backgroundColor(BuildContext context) {
18 return context.buttonTheme.outlinedDefault;
19 }
20 @override
21 Color disabledColor(BuildContext context) {
22 return context.buttonTheme.outlinedDisabled;
23 }
24
25 @override
26 Color focusColor(BuildContext context) {
27 return context.buttonTheme.outlinedFocused;
28 }
29
30 @override
31 Color hoverColor(BuildContext context) {
32 return context.buttonTheme.outlinedHover;
33 }
34
35 @override
36 Color textColor(BuildContext context) {
37 return context.buttonTheme.buttonLineDefault;
38 }
39
40 @override
41 BorderSide defaultBorder(BuildContext context) {
42 return BorderSide(
43 color: context.buttonTheme.buttonLineDefault,
44 );
45 }
46
47 @override
48 BorderSide focusedBorder(BuildContext context) {
49 return BorderSide(
50 color: context.buttonTheme.buttonLineDefault,
51 );
52 }
53
54 @override
55 BorderSide hoverBorder(BuildContext context) {
56 return BorderSide(
57 color: context.buttonTheme.buttonLineDefault,
58 );
59 }
60
61 @override
62 BorderSide disabledBorder(BuildContext context) {
63 return BorderSide(
64 color: context.buttonTheme.outlinedBorderDisabled,
65 );
66 }
67 }

For the text field, we have created again an independent AppTextField class.
 1 /// {@template app_text_field}
2 /// A customizable text field widget with various customization
3 options.
4 /// {@endtemplate}
5 class AppTextField extends StatelessWidget {
6 /// {@macro app_text_field}
7 const AppTextField({
8 super.key,
9 this.controller,
10 this.labelText,
11 this.enabled = true,
12 this.obscureText = false,
13 this.onChanged,
14 this.autovalidateMode = AutovalidateMode.onUserInteraction,
15 this.validator,
16 this.helperText,
17 this.errorText,
18 this.suffixIcon,
19 this.suffixIconConstraints =
20 const BoxConstraints(minHeight: 24, minWidth: 40),
21 this.prefixIcon,
22 this.prefixIconConstraints =
23 const BoxConstraints(minHeight: 24, minWidth: 40),
24 this.autofillHints,
25 this.onEditingComplete,
26 this.inputFormatters,
27 this.keyboardType,
28 this.maxLines = 1,
29 });
30 /// The controller for the text field.
31 final TextEditingController? controller;
32
33 /// The label text for the text field.
34 final String? labelText;
35
36 /// Whether the text field is enabled.
37 final bool enabled;
38
39 /// Whether the text field is obscured.
40 final bool obscureText;
41
 42 /// Called when the text field value changes.
43 final ValueChanged<String>? onChanged;
44
45 /// The autovalidate mode for the text field.
46 final AutovalidateMode autovalidateMode;
47
48 /// The validator for the text field.
49 final FormFieldValidator<String>? validator;
50
51 /// The helper text for the text field.
52 final String? helperText;
53
54 /// The error text for the text field.
55 final String? errorText;
56
57 /// The suffix icon for the text field.
58 final Widget? suffixIcon;
59
60 /// The constraints for the suffix icon.
61 final BoxConstraints? suffixIconConstraints;
62
63 /// The prefix icon for the text field.
64 final Widget? prefixIcon;
65
66 /// The constraints for the prefix icon.
67 final BoxConstraints? prefixIconConstraints;
68
69 /// The autofillhints for app text field.
70 final Iterable<String>? autofillHints;
71
72 /// Called when the text field value completed.
73 final VoidCallback? onEditingComplete;
74 /// The input formatters for the text field.
75 final List<TextInputFormatter>? inputFormatters;
76
77 /// The keyboard type for the text field.
78 final TextInputType? keyboardType;
79
80 /// the maximum lines available in text field.
81 final int maxLines;
82
83 @override
84 Widget build(BuildContext context) {
85 return TextFormField(
86 keyboardType: keyboardType,
87 inputFormatters: inputFormatters,
88 onEditingComplete: onEditingComplete,
89 autofillHints: autofillHints,
90 controller: controller,
91 enabled: enabled,
92 obscureText: obscureText,
93 onChanged: onChanged,
94 autovalidateMode: autovalidateMode,
95 validator: validator,
96 maxLines: maxLines,
97 style: WidgetStateTextStyle.resolveWith(
98 (states) {
99 late final Color textColor;
100
101 if (states.contains(WidgetState.error)) {
102 textColor = context.inputTheme.focusedTextDefault;
103 } else if (states.contains(WidgetState.focused)) {
104 textColor = context.inputTheme.focusedTextDefault;
105 } else if (states.contains(WidgetState.disabled)) {
106 textColor = context.inputTheme.disabledText;
107 } else {
108 textColor = context.inputTheme.defaultText;
109 }
110
111 return context.typography.inputPlaceHolder.copyWith(
112 color: textColor,
113 );
114 },
115 ),
116 cursorColor: context.inputTheme.focusedTextDefault,
117 cursorHeight: 16,
118 decoration: InputDecoration(
119 labelText: labelText,
120 labelStyle: WidgetStateTextStyle.resolveWith(
121 (states) {
122 late final Color textColor;
123
124 if (states.contains(WidgetState.error)) {
125 textColor = context.inputTheme.errorTextDefault;
126 } else if (states.contains(WidgetState.focused)) {
127 textColor = context.inputTheme.focusedOnBrand;
128 } else if (states.contains(WidgetState.disabled)) {
129 textColor = context.inputTheme.disabledText;
130 } else {
131 textColor = context.inputTheme.defaultText;
132 }
133
134 return context.typography.inputPlaceHolder.copyWith(
135 color: textColor,
136 );
137 },
138 ),
139 floatingLabelStyle: WidgetStateTextStyle.resolveWith(
140 (states) {
141 late final Color textColor;
142
143 if (states.contains(WidgetState.error)) {
144 textColor = context.inputTheme.errorTextDefault;
145 } else if (states.contains(WidgetState.focused)) {
146 textColor = context.inputTheme.focusedOnBrand;
147 } else {
148 textColor = context.inputTheme.defaultText;
149 }
150
151 return context.typography.inputLabel.copyWith(
152 color: textColor,
153 );
154 },
155 ),
156 filled: true,
157 fillColor: enabled
158 ? context.inputTheme.defaultColor
159 : context.inputTheme.disabledColor,
160 border: MaterialStateOutlineInputBorder.resolveWith(
161 (states) {
162 late final Color borderColor;
163
164 if (states.contains(WidgetState.error)) {
165 borderColor = context.inputTheme.borderError;
166 } else if (states.contains(WidgetState.focused)) {
167 borderColor = context.inputTheme.borderFocused;
168 } else if (states.contains(WidgetState.disabled)) {
169 borderColor = context.inputTheme.borderDisabled;
170 } else if (states.contains(WidgetState.hovered)) {
171 borderColor = context.inputTheme.borderHover;
172 } else {
173 borderColor = context.inputTheme.borderDefault;
174 }
175
176 return OutlineInputBorder(
177 borderRadius: const BorderRadius.all(AppRadius.md),
178 borderSide: BorderSide(
179 color: borderColor,
180 ),
181 );
182 },
183 ),
184 hoverColor: Colors.transparent,
185 focusColor: Colors.transparent,
186 helperText: helperText,
187 helperStyle: WidgetStateTextStyle.resolveWith(
 (states) {
188 late final Color textColor;
189
190 if (states.contains(WidgetState.error)) {
191 textColor = context.inputTheme.errorTextDefault;
192 } else if (states.contains(WidgetState.focused)) {
193 textColor = context.inputTheme.focusedOnBrand;
194 } else if (states.contains(WidgetState.disabled)) {
195 textColor = context.inputTheme.disabledText;
196 } else {
197 textColor = context.inputTheme.defaultText;
198 }
199
200 return context.typography.inputHint.copyWith(
201 color: textColor,
202 );
203 },
204 ),
205 errorText: errorText,
206 errorStyle: context.typography.inputHint.copyWith(
207 color: context.inputTheme.errorTextDefault,
208 ),
209 suffixIcon: suffixIcon,
210 prefixIcon: prefixIcon,
211 suffixIconConstraints: suffixIconConstraints,
212 prefixIconConstraints: prefixIconConstraints,
213 ),
214 );
215 }
216 }

Extension to get themes with context

To get themes with context, we have created a simple extension class:
1 /// An extension on [BuildContext] that provides access to the current
2 theme.
3 extension ThemeExt on BuildContext {
4 /// The current theme.
5 ThemeData get theme => Theme.of(this);
6
7 ///the current button theme
8 AppButtonTheme get buttonTheme =>
9 theme.extension<AppTheme>()!.appButtonTheme as AppButtonTheme;
10
11 /// The current app checkboxTheme.
12 AppCheckboxTheme get checkboxTheme =>
13 theme.extension<AppTheme>()!.appCheckboxTheme as
14 AppCheckboxTheme;
15
16 /// The current app iconTheme.
17 AppIconTheme get iconTheme =>
18 theme.extension<AppTheme>()!.appIconTheme as AppIconTheme;
19
20 /// The current app inputTheme.
21 AppInputTheme get inputTheme =>
22 theme.extension<AppTheme>()!.appInputTheme as AppInputTheme;
23
24 /// The current app radioTheme.
25 AppRadioTheme get radioTheme =>
26 theme.extension<AppTheme>()!.appRadioTheme as AppRadioTheme;
27
28 /// The current app toggleTheme.
29 AppToggleTheme get toggleTheme =>
30 theme.extension<AppTheme>()!.appToggleTheme as AppToggleTheme;
31
32 /// The current app typographyTheme.
33 AppTypographyTheme get typographyTheme =>
34 theme.extension<AppTheme>()!.appTypographyTheme as
35 AppTypographyTheme;
36
37 /// The current app avatarTheme.
38 AppAvatarTheme get avatarTheme =>
 theme.extension<AppTheme>()!.appAvatarTheme as AppAvatarTheme;

/// The current app typography.

AppTypography get typography =>
39
theme.extension<AppTheme>()!.appTypography as AppTypography;
40
41
/// The current app navigationTheme.
42
AppNavigationTheme get navigationTheme =>
43
theme.extension<AppTheme>()!.appNavigationTheme as
44
AppNavigationTheme;
45
46
/// The current app layoutTheme.
47
AppLayoutTheme get layoutTheme =>
48
theme.extension<AppTheme>()!.appLayoutTheme as AppLayoutTheme;
49
50
/// The current app badgeTheme.
51
AppBadgeTheme get badgeTheme =>
52
theme.extension<AppTheme>()!.appBadgeTheme as AppBadgeTheme;
53
54
/// The current app breadcrumbTheme.
55
AppBreadCrumbTheme get appBreadCrumbTheme =>
56
theme.extension<AppTheme>()!.appBreadCrumbTheme as
57
AppBreadCrumbTheme;
58
59
/// The current app appDropdownTheme.
60
AppDropdownTheme get appDropdownTheme =>
61
theme.extension<AppTheme>()!.appDropdownTheme as
AppDropdownTheme;
}
So… What is AppTheme there?
AppTheme is a simple, immutable class (ThemeExtension) that provides all themes to
our application.
/// {@template app_theme}
1
/// Configuration class which collects all Themes of app together and
2
provides
3
/// them as a single instance
4
/// {@endtemplate}
5
class AppTheme extends ThemeExtension<AppTheme> {
6
/// {@macro app_theme}
7
const AppTheme({
8
required this.appButtonTheme,
9
required this.appInputTheme,
10
});
11
12
/// {@macro app_theme}
13
factory AppTheme.light() {
14
return AppTheme(
15
appButtonTheme: AppButtonTheme.light(),
16
appInputTheme: AppInputTheme.light(),
17
);
18
}
19
20
/// [AppButtonTheme] instance provides configuration of buttons
21
final ThemeExtension<AppButtonTheme> appButtonTheme;
22
23
/// [AppInputTheme] instance provides configuration of [AppTextField]
24
final ThemeExtension<AppInputTheme> appInputTheme;
25
26
27
@override
28
ThemeExtension<AppTheme> copyWith({
29
ThemeExtension<AppButtonTheme>? appButtonTheme,
30
ThemeExtension<AppInputTheme>? appInputTheme,
31
}) {
32
return AppTheme(
33
appButtonTheme: appButtonTheme ?? this.appButtonTheme,
34
appInputTheme: appInputTheme ?? this.appInputTheme,
35
);
36
}
37
38
@override
39
ThemeExtension<AppTheme> lerp(
40
covariant ThemeExtension<AppTheme>? other,
41
double t,
42
) {
43
if (other is! AppTheme) {
44
return this;
45
}
46
47
return AppTheme(
48
appButtonTheme: appButtonTheme.lerp(other.appButtonTheme, t),
49
appInputTheme: appInputTheme.lerp(other.appInputTheme, t),
50
);
51
}
52
}

How will we provide our theme for a new project?

It is not a difficult process. If you know about InheritedWidget, you can

understand this step easily.
Therefore, we created a simple InheritedWidget called ThemeScope to provide our
design system for a new project.
/// {@template theme_scope}
1
/// InheritedWidget provides [AppTheme] for app
2
/// {@endtemplate}
3
class ThemeScope extends InheritedWidget {
4
/// {@macro theme_scope}
5
const ThemeScope({
6
super.key,
7
required Widget child,
8
required this.themeMode,
9
required this.appTheme,
10
}) : super(child: child);
11
12
/// The current theme mode.
13
final ThemeMode themeMode;
14
15
/// The current app theme.
16
final AppTheme appTheme;
17
18
/// The current theme.
19
static ThemeScope of(BuildContext context) {
20
final result =
21
context.dependOnInheritedWidgetOfExactType<ThemeScope>();
22
assert(result != null, 'No ThemeScope found in context');
23
return result!;
24
}
25
26
@override
27
bool updateShouldNotify(ThemeScope oldWidget) => true;
28
}

ThemeMode handler
For handling the dark, light, and system mode switching process, your can write a
simple controller and initializer as the following:
1 const _kThemeMode = 'themeMode';
2
3 /// {@template theme_scope_widget}
4 /// A class which handles all theme processes
5 ///
6 /// initialize() method should be used as app starter in order to use
7 /// [AppTheme] in the app
8
9 /// {@endtemplate}
10 class ThemeScopeWidget extends StatefulWidget {
11 /// {@macro theme_scope_widget}
12 const ThemeScopeWidget({
13 super.key,
14 required this.child,
15 required this.preferences,
16 });
17
18 /// The child widget
19 final Widget child;
20
21 /// The shared preferences
22 final SharedPreferences preferences;
23
24 /// Initialize the [ThemeScopeWidget] with the given [child] widget
25 static Future<ThemeScopeWidget> initialize(Widget child) async {
26 final preferences = await SharedPreferences.getInstance();
27 return ThemeScopeWidget(
28 preferences: preferences,
29 child: child,
30 );
31 }
32
33 /// In order to use methods of [ThemeScopeWidget] this function
34 /// should be called first. Theme change process will handled by
35 /// [ThemeScopeWidget] automatically.
36 static ThemeScopeWidgetState? of(BuildContext context) {
37 return
 context.findRootAncestorStateOfType<ThemeScopeWidgetState>();
}
38
39
@override
40
State<ThemeScopeWidget> createState() => ThemeScopeWidgetState();
41
}
42
43
/// The state for [ThemeScopeWidget].
44
class ThemeScopeWidgetState extends State<ThemeScopeWidget> {
45
ThemeMode? _themeMode;
46
47
/// Change the theme mode
48
Future<void> changeTo(ThemeMode themeMode) async {
49
if (_themeMode == themeMode) return;
50
51
try {
52
final index = ThemeMode.values.indexOf(themeMode);
53
await widget.preferences.setInt(_kThemeMode, index);
54
55
setState(() {
56
_themeMode = themeMode;
57
});
58
} on Exception catch (_) {}
59
}
60
61
@override
62
void didChangeDependencies() {
63
super.didChangeDependencies();
64
65
try {
66
final themeModeIndex =
67
widget.preferences.getInt(_kThemeMode) ?? 0;
68
final themeMode = ThemeMode.values[themeModeIndex];
69
70
_themeMode = themeMode;
71
} on Exception catch (_) {
72
_themeMode = ThemeMode.system;
73
}
74
}
75
76
@override
77
Widget build(BuildContext context) {
78
final brightness = MediaQuery.platformBrightnessOf(context);
79
80
final appTheme = switch (_themeMode!) {
81
ThemeMode.light => AppTheme.light(),
82
ThemeMode.dark => AppTheme.light(),
83
ThemeMode.system =>
84
brightness == Brightness.dark ? AppTheme.light() :
85
AppTheme.light(),
86
};
87
88
return ThemeScope(
89
themeMode: _themeMode!,
90
appTheme: appTheme,
91
child: widget.child,
92
);
93
}
}

You can call ThemeScopeWidget.of(context).changeTo function to change your

ThemeMode in anywhere!
The last step is to initialize your project with our Design System
We wrote this design system implementation as an independent package and used it
in different apps.
Firstly, we should initialize our wrapper:
void main() async {
1
WidgetsFlutterBinding.ensureInitialized();
2
final app = await ThemeScopeWidget.initialize(const
3
MyApp());
4
runApp(app);
5
}

We have another option to provide:

void main() async {
1
WidgetsFlutterBinding.ensureInitialized();
2
final preferences = await
3
SharedPreferences.getInstance();
4
5
runApp(
6
ThemeScopeWidget(
7
preferences: preferences,
8
child: const MyApp(),
9
),
10
);
11
}

And, in the MaterialApp, it should be registered as an extension:

final theme = ThemeScope.of(context);
1
2
return MaterialApp(
3
title: 'Flutter App',
4
themeMode: theme.themeMode,
5
theme: ThemeData(extensions: [theme.appTheme]),
6
darkTheme: ThemeData(extensions: [theme.appTheme]),
7
home: const MyHomePage(title: 'Flutter Demo Home
8
Page'),
9
);

There are a few extension methods that allow developers to access any theme,
typography, and just a few lines of code.
context.buttonTheme.linkHove
r;
1 context.checkboxTheme.disabl
2 ed;
3 context.typography.titleSmal
l;

To change the theme of app, just following function should be called:

final themeScope =
1
ThemeScopeWidget.of(context);
2
themeScope.changeTo(ThemeMode.light);

What is about Assets?

In general, assets are the part of the design system. Therefore, we created an
independent package that stores and emits PNGs, SVGs, etc, for any project as a
package.
So, as you can see, the assets package stores fonts, raster, and vector images.

 rasters mean PNGs, JPEGs, etc

 vectors mean SVGs
Why did we divide them in the different package?

To optimize SVGs, we have used the new way, for all SVGs in the vectors package
will be compiled to optimized version at the build time:

And, we need SSOT (Single Source of Truth) to get our assets:

/// {@template app_icons}
1 /// The [AppAssets] class contains all the icons used in
2 the app.
3 /// {@endtemplate}
4 abstract class AppAssets {
5 /// person icon
6 static const person = AssetBytesLoader(
7 'vectors/person.svg',
8 packageName: 'assets',
9 );
10
11 /// left arrow icon
12 static const leftArrow = AssetBytesLoader(
13 'vectors/left_icon.svg',
14 packageName: 'assets',
15 );
16
17 static const sittingSad = 'rasters/sitting_sad.png';
18 static const magnifyingGlass =
19 'rasters/magnifying_glass.png';
}

You can divide raster and vector graphics class too

Keep in mind that, when you use raster graphic in any project as package (you
defined asset package in pubspec and use it), you should define package field:
Image.asset(AppAssets.sittingSad, package:
1 'assets')
And, if you want to export font from
other package you should define your fonts inside lib folder. For more
information, you can check the Export fonts from a package article from Flutter
documentation.

Testing your design system as an independent app

For this purpose, we are using Widgetbook. It is a huge topic to write about. In
order not to prolong the article further, I did not write about this topic in more
detail. It has a great documentation, you can check it.