Animated Stat Card Widget
Component Detail
User Interface
medium complexity
Shared Component
mobile
1
Dependencies
1
Dependents
0
Entities
0
Integrations
Description
Reusable animated card that reveals a single statistic (e.g., total hours volunteered, number of people helped) with a count-up animation and a descriptive label. Designed with high contrast, scalable text, and semantic accessibility labels so screen readers announce the full meaning of each value.
stat-card-widget
Responsibilities
- Animate numeric value from zero to final count
- Render icon, value, and descriptive label with design token styling
- Provide semantic accessibility label combining value and context
- Support theming via design tokens for colour and typography
Interfaces
StatCardWidget({required int value, required String label, required IconData icon, String? accessibilityLabel})
playAnimation(): void
resetAnimation(): void
setHighContrastMode(enabled: bool): void