2.3 KiB
2.3 KiB
Component Guidelines
Widget composition and UI reuse conventions for
apps/lib/**.
Practical Conventions
- Prefer shared widgets before creating new feature-local widgets.
- Use semantic theme slots (
Theme.of(context).colorScheme.*) and project tokens (AppSpacing,AppRadius). - Keep feature screens focused on composition; move reusable sections into
shared/widgets/**. - Use project-consistent feedback components (
Toast/AppBanner/AppLoadingIndicator).
Real File Path Examples
- Shared base components:
apps/lib/shared/widgets/app_button.dartapps/lib/shared/widgets/banner/app_banner.dartapps/lib/shared/widgets/app_loading_indicator.dart
- Feature screen composition using shared widgets/tokens:
apps/lib/features/auth/presentation/screens/login_screen.dartapps/lib/features/settings/presentation/widgets/settings_page_scaffold.dartapps/lib/features/home/presentation/widgets/home_composer_stack.dart
- Design system sources:
apps/lib/core/theme/design_tokens.dartapps/lib/core/theme/app_theme.dart
UI Contract Rules
- Color usage
- Use
colorSchemefor semantic colors. - Use
Theme.extension<AppColorPalette>()only for brand palette/event/avatar domains.
- Use
- Spacing & radius
- Use
AppSpacing.*/AppRadius.*tokens as defaults.
- Use
- Page actions & confirmations
- Reuse shared action/confirmation surfaces where available (for consistent interaction style).
Anti-patterns (with evidence)
- Duplicating near-identical controls per feature instead of extending shared widgets.
- Existing shared baseline in
apps/lib/shared/widgets/**should be checked first.
- Existing shared baseline in
- Hardcoding user-facing feedback patterns outside project primitives.
- Existing patterns:
AppBannerinlogin_screen.dart,AppLoadingIndicatorinshared/widgets/app_loading_indicator.dart.
- Existing patterns:
- Bypassing theme semantics by introducing ad-hoc
Colors.*in feature widgets.- Current style source of truth is
apps/lib/core/theme/app_theme.dart+design_tokens.dart.
- Current style source of truth is
Uncertainties / Gaps
- There is no automated lint rule in this repo that forbids all hardcoded color constants in feature widgets; consistency relies on code review and AGENTS guidance.
- Some older UI files may still contain local one-off style values where token extraction is incomplete.