Flutter Notification Center Stack Panel
A grouped notification center panel with colored icon containers, sender and message previews, timestamps, unread dots, and a mark-all-read action. Built with Wind utility classes and full dark-mode pairs.
WDiv(
className: 'flex flex-col max-w-sm w-full rounded-2xl p-5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-4',
children: [
WText(
'Notifications',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'rounded-full px-2 py-1 bg-blue-500 dark:bg-blue-600',
child: WText(
'3 new',
className: 'text-xs font-bold text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-3 border-t border-gray-100 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-950 mr-3',
child: WIcon(
Icons.mail,
className: 'text-base text-blue-600 dark:text-blue-400'
),
),
WDiv(
className: 'flex flex-col w-44',
children: [
WText(
'Sarah Lin',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Sent you a project invite',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'2m',
className: 'text-xs text-gray-400 dark:text-gray-500 mb-2'
),
WDiv(
className: 'w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400',
child: WSpacer(),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-3 border-t border-gray-100 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-amber-50 dark:bg-amber-950 mr-3',
child: WIcon(
Icons.bolt,
className: 'text-base text-amber-600 dark:text-amber-400'
),
),
WDiv(
className: 'flex flex-col w-44',
children: [
WText(
'Deploy succeeded',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Build 482 is now live',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'1h',
className: 'text-xs text-gray-400 dark:text-gray-500 mb-2'
),
WDiv(
className: 'w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400',
child: WSpacer(),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-3 border-t border-gray-100 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-full bg-rose-50 dark:bg-rose-950 mr-3',
child: WIcon(
Icons.favorite,
className: 'text-base text-rose-600 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-col w-44',
children: [
WText(
'Marco Reyes',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Liked your latest snippet',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'3h',
className: 'text-xs text-gray-400 dark:text-gray-500 mb-2'
),
WDiv(
className: 'w-2 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WSpacer(),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full pt-4 mt-1 border-t border-gray-100 dark:border-gray-800',
child: WText(
'Mark all as read',
className: 'text-sm font-semibold text-blue-600 dark:text-blue-400'
),
),
],
)
Benzer örnekler
-
Flutter Video Call Card with Participant Tile Grid
A live meeting panel with a six tile participant grid, an active speaker ring, per person mute and camera state, connection stats, and a round control bar. Pure Wind className layout, no video plugin needed for the design pass.
-
Flutter Poll Results Card with Vote Percentage Bars
A live poll results card built with Wind: a question header, ranked answer options each with a horizontal percentage fill bar, a highlighted winning choice, and a vote-count footer. Pure linear bars, no charts, dark-mode ready.
-
Flutter Voice Message Bubble with Waveform Player
A chat voice message bubble built with Wind utility classes: a sender avatar, a two tone waveform that shows playback progress, a play control, and the clip duration. Dark mode pairs are included on every color token.
