This document provides detailed information about the theming architecture and design system implementation in the Flutter Mobile Project Template. It covers theme configuration, color schemes, component-specific themes, theme extensions, and the design system catalog application.
The template implements Material Design theming principles with support for light and dark themes. The theme system is organized in a modular fashion with separate components for color schemes, typography, and component-specific themes.
Sources:
The template provides factory functions for creating light and dark themes. These functions are the entry points for theme configuration.
The theme is created using the _createTheme function, which combines the color scheme, component themes, and theme extensions into a ThemeData object:
Sources:
The template uses Material Design color schemes with predefined color palettes for light and dark themes. These color schemes are defined in color_schemes.dart:
| Color Role | Light Theme | Dark Theme |
|---|---|---|
| Primary | #006496 | #90CDFF |
| Secondary | #50606F | #B8C8D9 |
| Tertiary | #66587B | #D1BFE7 |
| Error | #BA1A1A | #FFB4AB |
| Background | #FCFCFF | #1A1C1E |
Sources:
The design system includes specific themes for various UI components:
The AppBarTheme is configured using the _createAppBarTheme function, which provides consistent styling for app bars across the application:
Sources:
The bottom navigation bar is themed through the _createBottomNavigationBarTheme function:
Sources:
The template leverages Flutter's ThemeExtension mechanism to add custom theme properties that aren't covered by the standard Material theme.
The AppColors extension provides additional color definitions beyond the standard Material color scheme:
Sources:
Themes can be accessed throughout the application using Theme.of(context):
final theme = Theme.of(context); final textStyle = theme.textTheme.headline6; final primaryColor = theme.colorScheme.primary; // For custom theme extensions final appColors = theme.extension<AppColors>(); final iconColor = appColors?.icon;
Custom theme extensions can be accessed using the extension<T>() method on ThemeData:
// Accessing the AppColors extension final appColors = Theme.of(context).extension<AppColors>(); final iconColor = appColors?.icon;
Sources:
The template includes a catalog application that showcases all UI components with their respective themes.
The catalog app uses the Widgetbook library to organize and display UI components:
Sources:
The catalog app organizes theme previews into multiple categories:
Sources:
The catalog app includes detailed previews of all color scheme elements:
Sources:
The catalog app showcases all typography styles defined in the theme:
| Typography Category | Styles |
|---|---|
| Display | Large, Medium, Small |
| Headline | Large, Medium, Small |
| Title | Large, Medium, Small |
| Body | Large, Medium, Small |
| Label | Large, Medium, Small |
Sources:
The theme system supports dynamic theme switching between light and dark modes. This is typically implemented using Riverpod providers, but the implementation details are not shown in the provided files. For more details on theme switching implementation, see the Settings Feature documentation 4.1.
Refresh this wiki