Flutter Dashboard Stat Cards with Trend Badges

Three dashboard metric cards showing a value, label, and up or down trend badge with icons. A compact KPI row built with Wind UI utility classes and dark mode.

Anılcan Çakır by Anılcan Çakır 25 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Dashboard Stat Cards with Trend Badges preview
main.dart 
WDiv(
  className: 'mx-auto max-w-3xl flex flex-row gap-4',
  children: [
    WDiv(
      className: 'flex-1 flex flex-col gap-3 rounded-2xl border p-5 bg-white border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-800',
      children: [
        WDiv(className: 'flex flex-row items-center justify-between', children: [WText('Revenue', className: 'text-sm font-medium text-gray-500 dark:text-gray-400'), WIcon(Icons.insights, className: 'text-indigo-500 text-lg dark:text-indigo-400')]),
        WText('$48.2k', className: 'text-3xl font-extrabold text-gray-900 dark:text-white'),
        WDiv(className: 'flex flex-row items-center gap-1', children: [WIcon(Icons.trending_up, className: 'text-emerald-500 text-sm dark:text-emerald-400'), WText('12.5%', className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400')]),
      ],
    ),
    WDiv(
      className: 'flex-1 flex flex-col gap-3 rounded-2xl border p-5 bg-white border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-800',
      children: [
        WDiv(className: 'flex flex-row items-center justify-between', children: [WText('Users', className: 'text-sm font-medium text-gray-500 dark:text-gray-400'), WIcon(Icons.people, className: 'text-sky-500 text-lg dark:text-sky-400')]),
        WText('9,310', className: 'text-3xl font-extrabold text-gray-900 dark:text-white'),
        WDiv(className: 'flex flex-row items-center gap-1', children: [WIcon(Icons.trending_up, className: 'text-emerald-500 text-sm dark:text-emerald-400'), WText('4.2%', className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400')]),
      ],
    ),
    WDiv(
      className: 'flex-1 flex flex-col gap-3 rounded-2xl border p-5 bg-white border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-800',
      children: [
        WDiv(className: 'flex flex-row items-center justify-between', children: [WText('Churn', className: 'text-sm font-medium text-gray-500 dark:text-gray-400'), WIcon(Icons.speed, className: 'text-rose-500 text-lg dark:text-rose-400')]),
        WText('1.8%', className: 'text-3xl font-extrabold text-gray-900 dark:text-white'),
        WDiv(className: 'flex flex-row items-center gap-1', children: [WIcon(Icons.trending_down, className: 'text-rose-500 text-sm dark:text-rose-400'), WText('0.6%', className: 'text-xs font-semibold text-rose-600 dark:text-rose-400')]),
      ],
    ),
  ],
)
Stats
Views
25
Stars
0
Revisions
2
Size
2,389 chars
Created
Jun 9, 2026
Revisions