Badge Widget
Component Detail
User Interface
medium complexity
mobile
0
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
Reusable Flutter widget that renders a single badge illustration with locked/unlocked visual state, progress ring, and descriptive alt text for screen reader accessibility. Uses AnimatedSwitcher and custom painter classes to transition between locked and unlocked states.
badge-widget
Responsibilities
- Render badge illustration in locked or unlocked state
- Animate state transition on badge award
- Display progress ring for partially-met criteria
- Provide WCAG 2.2 AA compliant contrast and alt text
Interfaces
BadgeWidget({badge, isUnlocked, progress})
animateUnlock()
setProgress(double value)
getAccessibilityLabel()
renderLockedOverlay()
Related Data Entities (2)
Data entities managed by this component