Benefit Results Card
Component Detail
Description
Visually rich results card consistent with the Wrapped design language that displays the calculated personal benefit (hours saved, travel costs avoided) and societal benefit (estimated public health system cost offset). Designed to be shareable as an image. Uses semantic markup rather than purely visual charts to ensure accessibility.
benefit-results-card
Summaries
The Benefit Results Card is the organisation's most visible marketing asset embedded directly into the volunteer experience. Its Wrapped-style visual language transforms dry statistics — hours saved, travel costs avoided, health system cost offsets — into emotionally resonant, share-worthy content that volunteers will post to social media, amplifying programme awareness at zero incremental cost. Each share is effectively a peer referral, directly supporting volunteer recruitment goals. The card's accessibility-first semantic markup also ensures that volunteers using assistive technologies receive the same impact story, upholding the organisation's inclusivity commitments and satisfying requirements from public health sector funders who audit digital accessibility.
The Benefit Results Card carries moderate visual design effort concentrated in applying the Wrapped design token system consistently and implementing the `RepaintBoundary`-based image capture pipeline. The key delivery risk is the image capture quality across device pixel densities and OS versions — this requires device matrix testing (iOS/Android, various screen densities) to ensure the exported image is sharp and correctly cropped for social sharing. A secondary risk is design-token alignment with the broader Wrapped design system; a design handoff session early in the sprint is recommended to lock spacing, typography, and colour values before implementation begins. Accessibility QA (screen-reader traversal of metric values) must also be scheduled.
Estimate 3–4 days.
BenefitResultsCard is a Flutter widget that accepts a `BenefitCalculationResult` value object and renders personal and societal benefit metrics using `BenefitMetricTile` sub-components. The entire card is wrapped in a `RepaintBoundary` with a `GlobalKey`, enabling the `captureAsImage() → Future
The `BenefitCalculationService` dependency is injected via constructor, keeping the widget testable with a mock result object.
Responsibilities
- Render personal benefit metrics (hours saved, travel cost avoided) with semantic text labels
- Render societal benefit metric (public health cost offset)
- Provide a RepaintBoundary-wrapped widget surface for image capture and sharing
- Apply Wrapped-style visual design tokens
Interfaces
build(BuildContext)
captureAsImage() → Future<Uint8List>
BenefitResultsCard({required BenefitCalculationResult result})
Relationships
Dependents (2)
Components that depend on this component