Badge Earned Celebration Overlay
Component Detail
Description
Transient full-screen or banner overlay that celebrates a newly earned badge immediately after the triggering activity is saved. Provides positive reinforcement through animation and accessible announcement. Dismisses automatically after a short duration.
badge-earned-celebration-overlay
Summaries
The Badge Earned Celebration Overlay is the emotional peak of the recognition experience — the moment a peer mentor sees their effort acknowledged in real time. Delivered as an animated overlay immediately after a qualifying activity is saved, it creates a powerful positive reinforcement loop that increases the likelihood of continued engagement. This kind of in-the-moment celebration is a proven driver of habit formation in behavioral apps, directly supporting the platform's mission to sustain active, motivated peer mentoring. It also demonstrates to users that the system is actively tracking and valuing their contributions.
Medium complexity due to the animation and accessibility requirements. The overlay must coordinate with the activity save flow — it should only trigger after a successful save confirms a new badge was earned, meaning integration with the badge evaluation pipeline is a hard dependency. The auto-dismiss timer and manual dismiss must both be tested, including edge cases like the user backgrounding the app mid-celebration. Accessibility announcement via semantics (announceToAccessibility) requires manual testing with VoiceOver and TalkBack.
Animation assets or Lottie files, if used, must be reviewed for bundle size impact. Plan for integration testing across the activity-save → badge-evaluate → celebrate flow.
showBadgeEarned() should be called from the activity save success handler after the badge evaluation service confirms a new EarnedBadge. Implement as an overlay entry on the Navigator or using an OverlayPortal to avoid disrupting the current route stack. buildCelebrationAnimation() should use Flutter's AnimationController with a defined duration (e.g., 2.5s) and trigger auto-dismiss via a Future.delayed or animation status listener. announceToAccessibility() wraps SemanticsService.announce() with the badge name.
Ensure dismiss() removes the overlay cleanly and cancels any pending timers to avoid setState-after-dispose errors. Depends on badge-card-widget for consistent badge rendering within the overlay.
Responsibilities
- Display newly earned badge with animation
- Announce badge earn event to screen readers via semantics
- Auto-dismiss after celebration duration
- Provide manual dismiss affordance
Interfaces
showBadgeEarned(BuildContext context, EarnedBadge earned)
buildCelebrationAnimation(EarnedBadge earned)
announceToAccessibility(String message)
dismiss()