All snippets
Flutter Sprint Board Card with Kanban Status Columns
A kanban board squeezed into one card: three status columns side by side, each holding its own stack of task tiles, so the uneven column heights show where the work is piling up. Label chips, assignee avatars, struck-through done items and a WIP limit footer, all in Wind className strings.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Sprint Board',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Mobile squad, 9 tasks',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1',
child: WText(
'Week 32',
className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-start justify-center w-full gap-2 mt-4',
children: [
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-xl bg-gray-100 dark:bg-gray-800 p-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'ml-1',
child: WText(
'To Do',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WText(
'4',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Token refresh',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center mt-2',
child: WDiv(
className: 'rounded bg-rose-100 dark:bg-rose-500 px-1 py-1',
child: WText(
'auth',
className: 'text-[8px] font-bold text-rose-600 dark:text-white'
),
),
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Empty states',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Retry queue',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center mt-2',
child: WDiv(
className: 'rounded bg-sky-100 dark:bg-sky-500 px-1 py-1',
child: WText(
'infra',
className: 'text-[8px] font-bold text-sky-600 dark:text-white'
),
),
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Icon set',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-xl bg-gray-100 dark:bg-gray-800 p-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'ml-1',
child: WText(
'In Progress',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WText(
'2',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Dark mode',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'rounded bg-violet-100 dark:bg-violet-500 px-1 py-1',
child: WText(
'ui',
className: 'text-[8px] font-bold text-violet-600 dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'AC',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WText(
'Rate limits',
className: 'text-[9px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'rounded bg-amber-100 dark:bg-amber-500 px-1 py-1',
child: WText(
'api',
className: 'text-[8px] font-bold text-amber-600 dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded-full bg-rose-500 dark:bg-rose-400',
child: WText(
'MK',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-xl bg-gray-100 dark:bg-gray-800 p-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Done',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WText(
'3',
className: 'text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check,
className: 'text-[11px] text-emerald-500 dark:text-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Audit log',
className: 'text-[9px] font-semibold text-gray-400 dark:text-gray-500 line-through'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check,
className: 'text-[11px] text-emerald-500 dark:text-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'CSV export',
className: 'text-[9px] font-semibold text-gray-400 dark:text-gray-500 line-through'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-2 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check,
className: 'text-[11px] text-emerald-500 dark:text-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Webhooks',
className: 'text-[9px] font-semibold text-gray-400 dark:text-gray-500 line-through'
),
),
],
),
],
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-800 mt-4'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WText(
'Updated 5 minutes ago',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'WIP limit 3',
className: 'text-[10px] font-semibold text-indigo-600 dark:text-indigo-400'
),
],
),
],
)
313 lines
Open in the playground
More like this
-
Flutter Time Zone Meeting Planner Card with Work Hour Tracks
A meeting planner card for Flutter team apps, built with Wind: one 24 hour UTC track per city showing work, awake and asleep hours, a highlighted best slot column, local times with an after hours flag, a legend and an invite button. Every block is computed from the real September UTC offsets.
-
Flutter SLA Scorecard Card with Bullet Chart Target Markers
A Flutter SLA scorecard card for support desk dashboards: bullet charts with qualitative bands, a thick actual-value bar and a vertical target tick, so a missed target shows at a glance instead of hiding in a percentage. Built with wind_kit utility classes, dark mode pairs, no chart package.
-
Flutter Audience Overlap Card with Three Circle Venn Segments
A Flutter audience overlap card for marketing and growth dashboards: three translucent circles form a real Venn diagram, so shared regions darken by themselves and each lobe shows its count, with a segment legend, reach and overlap tiles and a suppression action. wind_kit only, no chart library.
