Benefit Metric Tile
Component Detail
Description
Reusable accessible tile widget rendering a single computed benefit metric with an icon, numeric value, unit label, and optional explanatory caption. Used inside the results card and breakdown section.
benefit-metric-tile
Summaries
The Benefit Metric Tile is a foundational display component that ensures all calculated impact figures — whether hours saved, costs avoided, or health system offsets — are presented in a clear, consistent, and brand-aligned format throughout the volunteer-facing application. Consistency in how impact is communicated builds trust with volunteers and stakeholders alike, reinforcing the organisation's credibility as a data-driven impact organisation. The tile's support for both compact and expanded display modes means it can be reused across multiple screens and future reporting features without redesign investment, reducing long-term UI development cost and accelerating delivery of any future impact reporting capabilities the organisation chooses to build.
BenefitMetricTile is a low-complexity, reusable UI atom with no external dependencies, making it an ideal early-sprint deliverable that unblocks both the Results Card and any future reporting screens that require metric display. Its primary QA consideration is visual regression testing across the two display modes (compact and expanded) and validation of colour contrast tokens against the WCAG 2.2 AA threshold — particularly important given the organisation's accessibility commitments. Because this component carries no business logic, it can be built by a junior developer or alongside onboarding, freeing senior capacity for the calculation service and data wiring. Deliver and lock this component early to avoid late-stage churn in dependent components.
BenefitMetricTile is a stateless Flutter widget with a named constructor signature: `BenefitMetricTile({required String label, required String value, required String unit, String? caption, IconData? icon})`. It renders a semantic heading hierarchy (`Text` with `style: Theme.of(context).textTheme.titleMedium` for the value, `bodySmall` for label and unit) ensuring correct traversal order for screen readers.
Colour contrast is enforced by consuming `colorScheme.onSurface` and `colorScheme.surfaceVariant` tokens from the app `ThemeData` rather than hardcoded values, making the tile automatically WCAG-compliant when the theme is correctly configured. Display mode switching between compact and expanded is controlled via a `compact` boolean parameter that adjusts padding and whether the optional `caption` text is rendered. The component has no dependencies on services or state management and is fully testable with golden tests for visual regression coverage.
Responsibilities
- Display a labelled numeric metric with proper semantic heading hierarchy
- Apply correct color contrast tokens per design system
- Support both compact (card) and expanded (detail) display modes
Interfaces
BenefitMetricTile({required String label, required String value, required String unit, String? caption, IconData? icon})
build(BuildContext)