gamification_ui
Headless gamification UI components for Flutter: achievements, streaks, points, and leaderboards.
▶ Watch the demo as video (mp4, 480 KB)
Bring your own state. This package ships widgets only — no storage, no network calls, no game logic. Pass your data in, get polished gamification UI out. Works with any backend or state management solution.
🚧 Early development. APIs will change until 1.0.
Why headless?
Existing Flutter gamification packages bundle UI with their own persistence engines (Firestore, Hive, SQLite), which makes them hard to adopt when your achievement logic lives on a server. gamification_ui decouples presentation from logic entirely, the same approach Trophy UI takes for React.
Planned components
| Family | Components |
|---|---|
| Achievement | badge, badge grid, unlock toast, progress card, detail sheet |
| Streak | flame counter, weekly calendar, milestone bar |
| Points | balance chip, XP bar, level card, points history, animated counter, tier badge |
| Leaderboard | ranking list, podium, rank change indicator |
Plus celebration primitives (confetti, shine, pulse) used by the above.
Design principles
- Headless — widgets take plain Dart values; state management is your choice
- Composable — small widgets that combine, not monolithic screens
- Themeable — respects your
ThemeData, with opt-in style overrides - Zero dependencies — Flutter SDK only (celebration effects included, not delegated)
Credits
Component taxonomy inspired by Trophy UI (MIT, © Trophy Labs, Inc). This is an independent project, not affiliated with Trophy.
License
MIT © Keishi Iwata
Libraries
- gamification_ui
- Headless gamification UI components for Flutter: achievements, streaks, points, and leaderboards.