Build CalculatorInputPanel widget
epic-benefit-calculator-ui-and-share-task-004 — Implement the Flutter widget that renders labelled numeric input fields with stepper controls for session count and session duration. Fields must validate min/max ranges and emit inline accessible error messages using Semantics labels. The widget exposes an onChange callback consumed by the parent BLoC. Supports dark mode via design tokens.
Acceptance Criteria
Technical Requirements
Implementation Notes
Use a StatefulWidget that holds internal TextEditingController instances; parse and clamp on every change event rather than only on submission to give immediate feedback. Stepper buttons call _increment/_decrement helpers that call setState and trigger onChange if result is valid. Define min/max as constructor parameters with defaults so the widget can be reused for other numeric inputs in the codebase. Apply InputDecoration using Theme.of(context).inputDecorationTheme so dark mode switches automatically.
Keep error string in the widget's local state — do not route errors through BLoC, that keeps BLoC focused on business state. Import design token constants from the project's tokens file; never reference raw Color values inline.
Testing Requirements
Unit tests (flutter_test): test onChange fires on valid input, does not fire on invalid input, boundary values (min-1, min, max, max+1) emit correct error/no-error states, stepper buttons disabled at boundaries. Widget tests: golden snapshot at light/dark mode and 1.0x/2.0x text scale. Accessibility test: ensure Semantics tree has non-empty labels for all interactive nodes. Target coverage ≥ 90% on widget logic.
The RepaintBoundary PNG capture approach for sharing the results card may produce blurry or oversized images on high-DPI devices, or may silently fail on certain Android OEM configurations that restrict off-screen rendering. A failed share would break one of the core use cases (recruitment tool).
Mitigation & Contingency
Mitigation: Implement the capture using the established screenshot-capture-utility pattern already present in the Wrapped summary feature (component 542-screenshot-capture-utility). Test on a range of iOS and Android devices including Samsung and Huawei OEM builds during development. Set explicit pixel ratio (3.0) when calling toImage() to guarantee resolution.
Contingency: If image capture fails on a platform, the BenefitShareService falls back to sharing the plain-text summary only, with a user-facing message explaining the image could not be generated. This ensures the share flow never fully blocks.
Implementing full WCAG 2.2 AA compliance for the results card and metric tiles — including live regions, focus management, and semantic labels that read naturally in Norwegian — requires deep familiarity with Flutter semantics APIs. Gaps may only surface during screen reader testing on physical devices, late in the sprint.
Mitigation & Contingency
Mitigation: Use the existing semantics-wrapper-widget (606) and live-region-announcer (608) components from the accessibility feature rather than implementing custom semantics. Assign screen reader testing on a physical iPhone with VoiceOver as a mandatory acceptance gate, not an afterthought. Write widget tests using Flutter's AccessibilityGuideline matchers early in development.
Contingency: If screen reader issues are found late, the pure semantic markup approach (no Canvas numbers, all Semantics wrappers) limits the blast radius to label text corrections. Escalate to the accessibility feature team for a pairing session to resolve complex focus management issues.
The BenefitResultsCard must match the Wrapped design language used in the annual summary feature. If design tokens or widget patterns are inconsistent between the two features, the results card will look out of place and undermine the intended emotional impact for sharing.
Mitigation & Contingency
Mitigation: Review the existing Wrapped summary screen (529-wrapped-summary-screen) and stat card widget (530-stat-card-widget) implementations before building the results card. Reuse design tokens from the existing design-token-theme (200) system. Involve the designer in a review of the results card mock-up against the Wrapped language before implementation begins.
Contingency: If design parity issues are discovered post-implementation, isolate visual adjustments to the BenefitResultsCard widget. The feature's business logic and accessibility compliance are unaffected by visual polish changes.