Flutter Success Toast Notification

A floating success toast with an icon, a title, a message, and an action link. An ephemeral feedback pattern built with Wind UI className utilities and dark mode.

Anılcan Çakır by Anılcan Çakır 21 views 0 stars 2 weeks ago Rev 3
Open in Playground Fork
Flutter Success Toast Notification preview
main.dart 
WDiv(
  className: 'mx-auto max-w-sm flex flex-row items-center justify-between gap-3 rounded-2xl p-4 bg-gray-900 shadow-2xl dark:bg-gray-800',
  children: [
    WDiv(
      className: 'flex items-center justify-center w-9 h-9 rounded-full bg-emerald-500 dark:bg-emerald-600',
      child: WIcon(
        Icons.check,
        className: 'text-white text-lg'
      )
    ),
    WDiv(
      className: 'flex flex-col',
      children: [
        WText(
          'Changes saved',
          className: 'text-sm font-semibold text-white'
        ),
        WText(
          'Your snippet is now public.',
          className: 'text-xs text-gray-400 dark:text-gray-300'
        ),
      ],
    ),
    WButton(
      className: 'rounded-lg px-3 py-1.5 hover:bg-white/10',
      child: WText(
        'View',
        className: 'text-sm font-semibold text-emerald-400'
      )
    ),
  ],
)
Stats
Views
21
Stars
0
Revisions
3
Size
882 chars
Created
Jun 9, 2026
Revisions