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.
by Anılcan Çakır
46 views
0 stars
2 weeks ago
Rev 1
main.dart
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'
),
],
),
],
)
Stats
- Views
- 46
- Stars
- 0
- Revisions
- 1
- Size
- 11,891 chars
- Created
- Aug 10, 2026