Badges Screen
Component Detail
User Interface
medium complexity
mobile
2
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
Flutter screen displaying the peer mentor's earned and locked achievement badges. Earned badges are shown in full color with unlock date; locked badges are greyed out with visible unlock criteria. Provides a visible progression system to encourage continued engagement.
badges-screen
Responsibilities
- Render earned badges in full color with name, icon, and unlock date
- Render locked badges greyed out with unlock criteria visible
- Display badge detail overlay on tap with description and achievement context
- Ensure WCAG 2.2 AA compliance with descriptive alt text for all badge icons
- Differentiate coordinator view (badge progress for their peer mentors) from peer mentor self-view
Interfaces
BadgesScreen()
loadUserBadges(userId: String)
renderEarnedBadge(badge: Achievement, awardedAt: DateTime)
renderLockedBadge(badge: Achievement, criteria: String)
showBadgeDetail(badge: Achievement)
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (2)
Data entities managed by this component