Flutter Year in Review Recap Card with Top Artists
A bold year-in-review recap card built with Wind: a violet-to-fuchsia gradient, an oversized minutes-listened stat, a ranked top-artists list with proportional progress bars, and a top-genre plus listening-rank footer. Dark-mode ready.
by Anılcan Çakır
69 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'mx-auto w-full max-w-sm flex flex-col gap-6 rounded-3xl p-6 bg-gradient-to-br from-violet-600 to-fuchsia-500 shadow-xl dark:from-violet-700 dark:to-fuchsia-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'2025 WRAPPED',
className: 'text-xs font-bold tracking-widest text-violet-100 dark:text-violet-100'
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-white dark:bg-white',
children: [
WIcon(
Icons.play_arrow,
className: 'text-sm text-violet-700 dark:text-violet-700'
),
WText(
'Recap',
className: 'text-xs font-bold text-violet-700 dark:text-violet-700'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'12,480',
className: 'text-5xl font-black text-white dark:text-white'
),
WText(
'minutes of music this year',
className: 'text-sm text-violet-100 dark:text-violet-100'
),
],
),
WDiv(
className: 'flex flex-col gap-4 w-full rounded-2xl p-4 bg-violet-700 dark:bg-violet-900',
children: [
WText(
'YOUR TOP ARTISTS',
className: 'text-xs font-semibold tracking-wide text-violet-200 dark:text-violet-200'
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'1',
className: 'text-sm font-black text-fuchsia-300 dark:text-fuchsia-300'
),
WText(
'Tame Impala',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WText(
'842 plays',
className: 'text-xs text-violet-200 dark:text-violet-200'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-violet-500 dark:bg-violet-700',
children: [
WDiv(
className: 'h-2 w-[300px] rounded-full bg-white dark:bg-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'2',
className: 'text-sm font-black text-fuchsia-300 dark:text-fuchsia-300'
),
WText(
'Bonobo',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WText(
'613 plays',
className: 'text-xs text-violet-200 dark:text-violet-200'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-violet-500 dark:bg-violet-700',
children: [
WDiv(
className: 'h-2 w-[220px] rounded-full bg-white dark:bg-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'3',
className: 'text-sm font-black text-fuchsia-300 dark:text-fuchsia-300'
),
WText(
'Khruangbin',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WText(
'455 plays',
className: 'text-xs text-violet-200 dark:text-violet-200'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-violet-500 dark:bg-violet-700',
children: [
WDiv(
className: 'h-2 w-[164px] rounded-full bg-white dark:bg-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'4',
className: 'text-sm font-black text-fuchsia-300 dark:text-fuchsia-300'
),
WText(
'Men I Trust',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WText(
'318 plays',
className: 'text-xs text-violet-200 dark:text-violet-200'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-violet-500 dark:bg-violet-700',
children: [
WDiv(
className: 'h-2 w-[116px] rounded-full bg-white dark:bg-white'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Top Genre',
className: 'text-xs text-violet-100 dark:text-violet-100'
),
WText(
'Psychedelic',
className: 'text-base font-bold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'Listening Rank',
className: 'text-xs text-violet-100 dark:text-violet-100'
),
WText(
'Top 2%',
className: 'text-base font-bold text-white dark:text-white'
),
],
),
],
),
],
)
Stats
- Views
- 69
- Stars
- 0
- Revisions
- 1
- Size
- 7,270 chars
- Created
- Jul 10, 2026