This document provides a comprehensive overview of the UI components system within the Flutter Mobile Project Template. It covers the shared UI components, theming integration, and component catalog that helps maintain design consistency throughout the application.
For information about the overall design system and theming architecture, see Theming and Design System.
The UI components in this project are organized through a structured component hierarchy that follows Material Design 3 principles. Components are primarily defined in the cores/designsystem package and showcase in a separate catalog application.
Sources: packages/cores/designsystem/lib/src/themes/theme.dart1-36 apps/catalog/lib/main.dart1-98 apps/catalog/lib/main.directories.g.dart1-450
UI components in the project leverage Flutter's theme system for consistent styling. The theme configuration is defined in the designsystem package with separate light and dark themes.
Sources: packages/cores/designsystem/lib/src/themes/theme.dart1-36 packages/cores/designsystem/lib/src/themes/app_bar_theme.dart1-27 packages/cores/designsystem/lib/src/themes/bottom_navigation_bar_theme.dart1-30 packages/cores/designsystem/lib/src/theme_extensions/app_colors/app_colors.dart1-20
The project defines custom color schemes for both light and dark modes following Material Design 3 guidelines. These color schemes provide the foundation for component styling.
| Category | Light Theme | Dark Theme |
|---|---|---|
| Primary | #006496 | #90CDFF |
| Secondary | #50606F | #B8C8D9 |
| Tertiary | #66587B | #D1BFE7 |
| Error | #BA1A1A | #FFB4AB |
| Surface | #FCFCFF | #1A1C1E |
| Outline | #72787E | #8C9198 |
Sources: packages/cores/designsystem/lib/src/themes/color_schemes.dart1-70 apps/catalog/lib/use_case/cores/designsystem/theme/style/color_scheme.dart1-194
The project uses theme extensions to define custom colors and styles that aren't part of the standard Material theme:
AppColors
├── icon: Color - Icon color for application-specific icons
└── (other custom colors can be added as needed)
Sources: packages/cores/designsystem/lib/src/theme_extensions/app_colors/app_colors.dart1-20 packages/cores/designsystem/lib/theme_extensions.dart1-2
The project includes a catalog application that showcases all available UI components using Widgetbook. This provides a living documentation of the components and their variants.
Sources: apps/catalog/lib/main.dart1-98 apps/catalog/lib/main.directories.g.dart1-450
The catalog organizes components into the following categories:
Actions
Communication
Containment
Navigation
Selection
Text Inputs
Style
Sources: apps/catalog/lib/main.directories.g.dart76-449
The project includes a comprehensive typography system following Material Design guidelines. The text styles are showcased in the catalog and can be accessed through the theme.
| Text Style | Usage |
|---|---|
| Display (Large, Medium, Small) | Very large text for headlines |
| Headline (Large, Medium, Small) | Headlines for different sections |
| Title (Large, Medium, Small) | Titles for cards, dialogs, etc. |
| Body (Large, Medium, Small) | Body text for content |
| Label (Large, Medium, Small) | Labels for buttons, inputs, etc. |
Sources: apps/catalog/lib/use_case/cores/designsystem/theme/style/typography.dart1-114
To use the UI components in your application:
MaterialApp( theme: lightTheme(), darkTheme: darkTheme(), // ... )
final theme = Theme.of(context); final colorScheme = theme.colorScheme; final textTheme = theme.textTheme; final appColors = theme.extension<AppColors>();
Beyond standard Material components, the template includes some custom components:
These custom components are also showcased in the catalog for reference.
Sources: apps/catalog/lib/main.directories.g.dart436-447
Developers can explore the component catalog to understand available UI components and their usage patterns. The catalog app provides the following features:
To run the catalog:
cd apps/catalog
flutter run
Sources: apps/catalog/lib/main.dart17-95