Customize your Theme
Having a consistent look and feel throughout your application will make it more professional and easier to use. Because of this, most of the styling for commonly used elements should be handled by the theme.
The default styling for this boilerplate is defined in core/ui/theme/app_theme.dart
. Within this file we define what the app should look like for both light and dark mode.
How to use
Because the theme is already applied on the MaterialApp
, most of the colors, styling and similar is already applied automatically for you.
There are a lot of cases when this is not true though, such as when you define Text('large text')
or when you want to have some spacing SizedBox(height: 8)
. All these constants you would want to use is accessible through something called ThemeExtension
.
To simplify this further we have exposed these as an extension on BuildContext
.
// large text styleText('large text', style: context.textStyle.xxl);
// Large grey/neutral textText('large text', style: context.textStyle.xxl.copyWith(color: context.kitColors.neutral500));
// SpacingSizedBox(height: context.spacing.lg);
Consistent UI
For most of the styling we use constants defined in core/ui/constants/
. You can read more about the constants in the UI Constants section.
When developing, if something doesn’t look how you want it to look, you should default to trying to update the general app theme. By doing this, your feature not only looks good now but for every future time you use it.