All snippets
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.
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'
),
],
),
],
),
],
)
236 lines
Open in the playground
More like this
-
Flutter Connect Four Board Card with Winning Diagonal and Series Score
A Connect Four game card for casual and board game apps: a 7 by 6 board with ringed winning discs on the diagonal, a marker over the last column played, the head to head series score, move and disc counts, and a play-again button.
-
Flutter Golf Scorecard Card with Birdie Circles and Bogey Squares
A Flutter golf scorecard card for round tracker apps: a back nine with hole and par rows, strokes marked the way golfers read them (circles under par, a double ring for an eagle, squares over par), a total against par and a post-to-handicap button. Built with wind_kit and dark mode pairs.
-
Flutter Poker Hand Odds Card with Board Cards and Equity Bar
A Flutter poker odds card for trainers and odds calculator apps: heads-up hole cards with suit glyphs, a flop with empty turn and river slots, a win and lose equity bar and every out as a mini card. Exact numbers over all 990 run-outs. Built with wind_kit className utilities.
