Badge Detail Modal
Component Detail
Description
Bottom sheet modal displayed when a user taps a badge, showing full badge description, earning criteria, earned date if applicable, and progress toward earning if locked. Provides context for why a badge was awarded or what is needed to earn it.
badge-detail-modal
Summaries
The Badge Detail Modal directly supports peer mentor motivation and retention by giving users clear, transparent feedback on why they earned a recognition or exactly what they need to do to earn it next. This transparency reduces frustration and increases engagement with the gamification system, which in turn drives more activity logging and platform stickiness. By showing progress toward locked badges, the component creates a continuous incentive loop that keeps peer mentors coming back to the app — directly supporting the organization's goal of sustained, high-quality peer mentoring activity.
This is a low-complexity UI component with a narrow, well-defined scope: display badge metadata and progress in a bottom sheet. It depends only on the badge-card-widget, so it can be built and tested in isolation without backend readiness. Development effort is estimated as small — one sprint or less. Testing should cover three cases: earned badge with timestamp, locked badge with progress bar, and a badge with no progress data.
No deployment risk beyond standard mobile release. Localization of criteria descriptions may add minor scope if multi-language support is required.
Implemented as a Flutter bottom sheet modal, this component receives a BadgeDefinition and an optional EarnedBadge via showBadgeDetail(). It conditionally renders either an earned timestamp or a progress section using buildProgressSection(int current, int required). The component depends on badge-card-widget for consistent badge rendering. State is stateless — all data is passed at invocation.
Criteria descriptions are built via buildCriteriaDescription() which should handle null-safe access on BadgeDefinition fields. close() wraps Navigator.pop(). Accessibility: ensure modal is announced as a dialog with a semantic label.
Responsibilities
- Display full badge description and criteria
- Show earned timestamp for unlocked badges
- Show progress toward earning for locked badges
- Provide accessible close affordance
Interfaces
showBadgeDetail(BuildContext context, BadgeDefinition badge, {EarnedBadge? earned})
buildCriteriaDescription(BadgeDefinition badge)
buildProgressSection(int current, int required)
close()
Relationships
Related Data Entities (2)
Data entities managed by this component