Build BenefitCalculatorScreen layout
epic-benefit-calculator-ui-and-share-task-010 — Compose the main BenefitCalculatorScreen as a single scrollable view that integrates CalculatorInputPanel at the top, live-updating BenefitResultsCard in the middle, and a share CTA button at the bottom. The screen wires the BenefitCalculatorBLoC for reactive updates, registers accessible navigation entry points, and positions focus management so VoiceOver/TalkBack moves from input panel to results card after each calculation.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 4 - 323 tasks
Can start after Tier 3 completes
Implementation Notes
Use BlocConsumer rather than two separate BlocBuilder/BlocListener widgets to avoid double rebuilds. Wrap the scrollable body in a CustomScrollView with SliverFillRemaining(hasScrollBody: false) so the share button pins to the bottom when content is short but scrolls naturally with long results. Use FocusScope.of(context).requestFocus() inside BlocListener's listener callback (not builder) to trigger focus shifts after calculation — doing it in builder causes focus thrash on every rebuild. Obtain the BLoC via context.read() in the listener and context.watch() in the builder.
All spacing values must reference AppSpacing design tokens (e.g., AppSpacing.md, AppSpacing.lg). Register the route in the app router before testing navigation.
Testing Requirements
Widget tests must verify: (1) all three child components render in correct vertical order; (2) BLoC state transitions from initial → loading → success update BenefitResultsCard content; (3) BLoC error state renders error message without clearing input panel; (4) share button is disabled when state is initial/loading and enabled on success; (5) focus order moves from input panel to results card after a BLoC calculation event. Use flutter_test with a MockBenefitCalculatorBLoC (mocktail). No integration tests required at this task level — covered in task-012.
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.