Flutter Sprint Timeline Card with Offset Gantt Task Bars
A project schedule card where each task bar starts on a different day and runs a different length against one shared date axis, so overlap and slack are visible without a chart library. Five staggered bars plus a release milestone marker, positioned with fixed-pixel spacers inside a Wind row.
by Anılcan Çakır
42 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 24 Timeline',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Mar 4 to Mar 9, 6 working days',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-emerald-50 dark:bg-emerald-500 px-2 py-1',
child: WText(
'On track',
className: 'text-[10px] font-bold text-emerald-600 dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-4',
children: [
WDiv(
className: 'w-[76px]'
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Mon',
className: 'text-[8px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Tue',
className: 'text-[8px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Wed',
className: 'text-[8px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Thu',
className: 'text-[8px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Fri',
className: 'text-[8px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-start w-[42px]',
child: WText(
'Sat',
className: 'text-[8px] font-bold text-amber-500 dark:text-amber-400'
),
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-800 mt-1'
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'Design review',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px] rounded-md bg-gray-100 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-center h-[18px] w-[84px] rounded-md bg-indigo-500 dark:bg-indigo-400',
child: WText(
'2d',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'API contract',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px] rounded-md bg-gray-100 dark:bg-gray-800',
children: [
WDiv(
className: 'w-[42px]'
),
WDiv(
className: 'flex flex-row items-center justify-center h-[18px] w-[126px] rounded-md bg-sky-500 dark:bg-sky-400',
child: WText(
'3d',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'Migration',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px] rounded-md bg-gray-100 dark:bg-gray-800',
children: [
WDiv(
className: 'w-[84px]'
),
WDiv(
className: 'flex flex-row items-center justify-center h-[18px] w-[84px] rounded-md bg-violet-500 dark:bg-violet-400',
child: WText(
'2d',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'Client wiring',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px] rounded-md bg-gray-100 dark:bg-gray-800',
children: [
WDiv(
className: 'w-[126px]'
),
WDiv(
className: 'flex flex-row items-center justify-center h-[18px] w-[126px] rounded-md bg-emerald-500 dark:bg-emerald-400',
child: WText(
'3d',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'QA pass',
className: 'text-[9px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px] rounded-md bg-gray-100 dark:bg-gray-800',
children: [
WDiv(
className: 'w-[210px]'
),
WDiv(
className: 'flex flex-row items-center justify-center h-[18px] w-[42px] rounded-md bg-amber-500 dark:bg-amber-400',
child: WText(
'1d',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-2 mt-2',
children: [
WDiv(
className: 'w-[76px]',
child: WText(
'Release',
className: 'text-[9px] font-bold text-rose-600 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-row items-center w-[252px] h-[18px]',
children: [
WDiv(
className: 'w-[224px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[18px] h-[18px] rounded-full bg-rose-500 dark:bg-rose-400',
child: WText(
'R',
className: 'text-[8px] font-bold text-white'
),
),
],
),
],
),
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(
'5 tasks, 1 milestone',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'Ships Saturday',
className: 'text-[10px] font-semibold text-rose-600 dark:text-rose-400'
),
],
),
],
)
Stats
- Views
- 42
- Stars
- 0
- Revisions
- 1
- Size
- 8,015 chars
- Created
- Aug 10, 2026