🏠 Overview › 🧩 Components ›🧩 Badges Gallery Screen

Badges Gallery Screen

Component Detail

User Interface medium complexity mobile
3
Dependencies
0
Dependents
2
Entities
0
Integrations

Description

Flutter screen displaying the full badge catalogue with earned and locked states. Computes lock/unlock state client-side from the fetched badge catalogue and the user's achievement list, showing progress indicators toward the next unlock threshold.

Feature: Achievement Badges

badges-gallery-screen

Responsibilities

  • Fetch badge catalogue and user achievement list from Badge Award Service
  • Compute earned/locked state client-side for instant rendering without network dependency
  • Display progress indicators showing threshold progress toward next badge unlock
  • Render bundled SVG badge artwork assets without network requests
  • Present badge detail overlay with trigger description and earned timestamp

Interfaces

build(BuildContext) → Widget
loadBadgeCatalogue() → Future<List<BadgeDefinition>>
loadUserAchievements(userId) → Future<List<UserAchievement>>
computeBadgeStates(catalogue, achievements) → List<BadgeDisplayState>
renderBadgeTile(badge, state) → Widget
showBadgeDetail(badge, achievement) → void

Relationships

Dependencies (3)

Components this component depends on

data Badges Table data User Achievements Table service Badge Award Service

Related Data Entities (2)

Data entities managed by this component

Badge 16 fields core User Achievement 13 fields core