Flutter Game Leaderboard Card with Rank Medals and Your Position
A weekly leaderboard for games and social apps: gold, silver, and bronze rank medals, gradient initial avatars, points per player, and a highlighted row pinning the current user with their movement. Composed entirely from Wind className strings with dark-mode pairs.
by Anılcan Çakır
9 views
0 stars
5 days ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col gap-4 w-full max-w-sm p-5 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Leaderboard',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Top players this week',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-500/15',
children: [
WIcon(
Icons.bolt,
className: 'text-sm text-amber-500 dark:text-amber-400'
),
WText(
'Season 4',
className: 'text-xs font-semibold text-amber-700 dark:text-amber-300'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full p-3 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-7 h-7 rounded-full bg-amber-400 dark:bg-amber-500',
child: WText(
'1',
className: 'text-xs font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-rose-400 to-orange-500 dark:from-rose-500 dark:to-orange-600',
child: WText(
'MK',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Mira Kovac',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Level 42',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'18,420',
className: 'text-sm font-bold text-amber-600 dark:text-amber-400'
),
WText(
'pts',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full px-3 py-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-7 h-7 rounded-full bg-slate-300 dark:bg-slate-600',
child: WText(
'2',
className: 'text-xs font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-sky-400 to-blue-600 dark:from-sky-500 dark:to-blue-700',
child: WText(
'TJ',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Theo Janssen',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Level 39',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'16,975',
className: 'text-sm font-bold text-gray-800 dark:text-gray-100'
),
WText(
'pts',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full px-3 py-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-7 h-7 rounded-full bg-orange-300 dark:bg-orange-700',
child: WText(
'3',
className: 'text-xs font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-teal-600 dark:from-emerald-500 dark:to-teal-700',
child: WText(
'AL',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Aria Lund',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Level 37',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'15,310',
className: 'text-sm font-bold text-gray-800 dark:text-gray-100'
),
WText(
'pts',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full p-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-7 h-7 rounded-full bg-white/25 dark:bg-white/25',
child: WText(
'12',
className: 'text-xs font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-white/20 dark:bg-white/20 border border-white/40 dark:border-white/40',
child: WText(
'You',
className: 'text-xs font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Your rank',
className: 'text-sm font-semibold text-white dark:text-white'
),
WText(
'Up 3 spots today',
className: 'text-xs text-indigo-100 dark:text-indigo-100'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'9,640',
className: 'text-sm font-bold text-white dark:text-white'
),
WText(
'pts',
className: 'text-xs text-indigo-100 dark:text-indigo-100'
),
],
),
],
),
],
)
Stats
- Views
- 9
- Stars
- 0
- Revisions
- 1
- Size
- 7,936 chars
- Created
- Jun 19, 2026