Implement expense type option card scaffold
epic-expense-type-selection-user-interface-task-001 — Build the base ExpenseTypeOptionCard widget that renders a single tappable expense category card with label, icon, and selection state. The card must support enabled, selected, and disabled visual states, and expose a tap callback. Use design tokens exclusively for colors, spacing, and typography.
Acceptance Criteria
Technical Requirements
Implementation Notes
Define an ExpenseTypeOption model with at minimum: String id, String label, IconData icon. Use AnimatedContainer or AnimatedOpacity for smooth state transitions between enabled/selected/disabled to avoid jarring jumps. Apply design tokens via a centralized AppTokens or AppTheme class — never inline. The card border should use a 2dp selected-state ring drawn via BoxDecoration.
Disabled state should use 0.38 opacity (Material Design guideline for disabled elements). Keep the widget file under 150 lines; extract any sub-builders if needed. Do not reference BLoC, Riverpod, or any state management from inside this widget.
Testing Requirements
Unit/widget tests using flutter_test: (1) render test for each of the three states (enabled, selected, disabled), (2) tap callback fires when enabled and does not fire when disabled, (3) golden image tests for all three states at standard and 1.5× text scale, (4) verify no hardcoded color or spacing values exist via lint rule or code review checklist. Minimum 90% branch coverage on this widget file.
If the expense calculation preview subscribes to the full BLoC state stream, every unrelated state property change (e.g. a loading flag toggle) triggers a widget rebuild. With complex card animations for the disabled-state transition, this could cause frame drops on low-end Android devices used by some peer mentors.
Mitigation & Contingency
Mitigation: Use select() on the Riverpod provider to subscribe only to the specific state slice each widget needs; write a performance test asserting rebuild count on a rapid sequence of toggle events.
Contingency: If jank is detected in device testing, replace animated disabled-state transitions with instant opacity changes and defer animation polish to a follow-up sprint.
The disabled card state requires a specific contrast-safe colour combination that communicates unavailability without relying solely on colour (WCAG 1.4.1). If the current design token palette does not include a disabled-state token with sufficient contrast for text on the disabled background, the widget will either fail WCAG AA or require a last-minute design token addition that could break other components.
Mitigation & Contingency
Mitigation: Audit the existing design token manifest for disabled-state tokens at the start of the epic; if missing, raise with the design lead and add a contrast-validated token before widget implementation begins.
Contingency: If no design review is available, use the established --color-text-disabled and --color-surface-disabled tokens with an added strikethrough or lock icon to satisfy WCAG 1.4.1 non-colour requirement, and document the deviation for design review.