Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A container ship bay plan card built with Wind: a row by tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover and a tapered hold below, every slot coloured by discharge port, plugged reefers marked, and a stowage legend with live counts. Pure Tailwind-style className utilities, ready for logistics, shipping and terminal operations apps.
by Anılcan Çakır
99 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-slate-800 dark:bg-slate-200',
child: WIcon(
Icons.inventory,
className: 'text-xl text-white dark:text-slate-900'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Bay 14 stowage',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'MV Nordic Tern, voyage 412E',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-slate-100 dark:bg-slate-800 px-3 py-1',
child: WText(
'40 ft',
className: 'text-xs font-bold text-slate-700 dark:text-slate-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'ROW',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'42 of 46 slots loaded',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
]
),
WDiv(
className: 'flex flex-col gap-[3px] w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WDiv(
className: 'w-[22px]'
),
WText(
'08',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'06',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'04',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'02',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'01',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'03',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'05',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'07',
className: 'w-[30px] text-center text-[9px] font-semibold text-gray-400 dark:text-gray-500'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'86',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] border border-dashed border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] border border-dashed border-gray-300 dark:border-gray-600'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'84',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] border border-dashed border-gray-300 dark:border-gray-600'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'82',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500',
child: WIcon(
Icons.ac_unit,
className: 'text-xs text-white'
)
),
WDiv(
className: 'flex flex-row items-center justify-center w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500',
child: WIcon(
Icons.ac_unit,
className: 'text-xs text-white'
)
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[30px] h-[22px] rounded-[4px] bg-sky-600 dark:bg-sky-500',
child: WIcon(
Icons.ac_unit,
className: 'text-xs text-white'
)
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'',
className: 'w-[22px]'
),
WDiv(
className: 'w-[261px] h-[4px] rounded-full bg-slate-700 dark:bg-slate-300'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'06',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'04',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] border border-dashed border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-[3px]',
children: [
WText(
'02',
className: 'w-[22px] text-[9px] font-semibold text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-[30px] h-[22px]'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px] rounded-[4px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[30px] h-[22px]'
)
]
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[3px] bg-rose-500 dark:bg-rose-400'
),
WText(
'Felixstowe',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'9',
className: 'text-xs text-gray-400 dark:text-gray-500'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[3px] bg-sky-600 dark:bg-sky-500'
),
WText(
'Rotterdam',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'12',
className: 'text-xs text-gray-400 dark:text-gray-500'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[3px] bg-amber-500 dark:bg-amber-400'
),
WText(
'Hamburg',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'21',
className: 'text-xs text-gray-400 dark:text-gray-500'
)
]
)
]
),
WText(
'Stowed in discharge order, so Felixstowe boxes sit on top and Hamburg stays below the hatch.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-slate-900 dark:bg-white py-3',
child: WText(
'Send plan to terminal',
className: 'text-sm font-semibold text-center text-white dark:text-slate-900'
)
)
),
],
)
Stats
- Views
- 99
- Stars
- 0
- Revisions
- 1
- Size
- 13,711 chars
- Created
- Oct 4, 2026