Flutter Liquid Glass Music Player with Now Playing Card
A Liquid Glass now-playing card where vivid album art bleeds its color through a translucent surface, in the spirit of the iOS 26 design language. Built with Wind UI: gradient cover art, a glass play overlay, a progress track, and a full transport control row.
main.dart
WDiv(
className: '''
relative w-[420px] h-[600px] overflow-hidden rounded-[44px]
bg-gradient-to-br from-slate-900 via-purple-900 to-fuchsia-900
dark:from-slate-950 dark:via-purple-950 dark:to-fuchsia-950
''',
children: [
WDiv(
className: 'absolute -top-12 -right-10 w-56 h-56 rounded-full bg-fuchsia-500/40 dark:bg-fuchsia-500/30',
),
WDiv(
className: 'absolute bottom-0 -left-16 w-64 h-64 rounded-full bg-indigo-500/40 dark:bg-indigo-500/30',
),
WDiv(
className: 'absolute top-44 left-24 w-40 h-40 rounded-full bg-amber-400/30 dark:bg-amber-400/20',
),
WDiv(
className: 'absolute inset-0 flex flex-col justify-center items-center p-6',
children: [
WDiv(
className: '''
w-[360px] flex flex-col gap-5 p-6 rounded-3xl
border border-white/25 dark:border-white/15
bg-white/10 dark:bg-white/5
shadow-2xl shadow-black/40 dark:shadow-black/60
''',
children: [
WDiv(
className: '''
w-full h-44 rounded-2xl
bg-gradient-to-br from-amber-400 via-rose-500 to-fuchsia-600
dark:from-amber-500 dark:via-rose-600 dark:to-fuchsia-700
border border-white/30 dark:border-white/20
flex flex-row items-center justify-center
''',
child: WDiv(
className: '''
w-16 h-16 rounded-full
border border-white/40 dark:border-white/30
bg-white/25 dark:bg-white/20
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.play_arrow,
className: 'text-3xl text-white dark:text-white',
),
),
),
WText(
'Midnight Refraction',
className: 'text-2xl font-bold text-white dark:text-white',
),
WText(
'Aurora Glass',
className: 'text-sm font-medium text-white/70 dark:text-white/70',
),
WDiv(
className: 'w-full h-2 rounded-full bg-white/20 dark:bg-white/15',
child: WDiv(
className: 'h-2 w-[230px] rounded-full bg-white dark:bg-white',
),
),
WDiv(
className: 'w-full flex flex-row items-center justify-between',
children: [
WText(
'2:18',
className: 'text-xs font-medium text-white/60 dark:text-white/60',
),
WText(
'3:54',
className: 'text-xs font-medium text-white/60 dark:text-white/60',
),
],
),
WDiv(
className: 'w-full flex flex-row items-center justify-between',
children: [
WIcon(
Icons.volume_up,
className: 'text-xl text-white/70 dark:text-white/70',
),
WIcon(
Icons.skip_previous,
className: 'text-3xl text-white dark:text-white',
),
WDiv(
className: '''
w-16 h-16 rounded-full
bg-white/90 dark:bg-white/90
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.play_arrow,
className: 'text-3xl text-fuchsia-900 dark:text-fuchsia-900',
),
),
WIcon(
Icons.skip_next,
className: 'text-3xl text-white dark:text-white',
),
WIcon(
Icons.favorite,
className: 'text-xl text-rose-300 dark:text-rose-300',
),
],
),
],
),
],
),
],
)
Stats
- Views
- 31
- Stars
- 0
- Revisions
- 1
- Size
- 4,069 chars
- Created
- Jun 11, 2026