Tüm örnekler
Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A Flutter container ship bay plan card for logistics and terminal apps: a row-by-tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover, a tapered hold, slots coloured by discharge port, plugged reefers and a stowage legend. Built with wind_kit.
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'
)
)
),
],
)
389 satır
Playground'da aç
Benzer örnekler
-
Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A Flutter navigation lights card for boating and marine apps: a night panel with a top-down hull ringed by the COLREGs Rule 21 arcs, red port and green starboard sidelights at 112.5 degrees, a 225 degree masthead ring, a 135 degree sternlight and Rule 22 visibility ranges. Built with wind_kit.
-
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point
A Flutter runway markings card for aviation and flight training apps: the approach end of runway 27 drawn to scale, with eight threshold stripes, the designator from a 268 degree heading, a dashed centreline and twin aiming point bars, each called out. Absolute positioning in wind_kit.
-
Flutter Hiking Trail Card with Elevation Profile and Waypoints
A Flutter hiking trail card for outdoor, trail running and cycling apps: a 34-step elevation profile with a ridge line, markers for trailhead, summit and lake, a distance axis, trip stat tiles, a snow advisory strip and a navigation button. Built with wind_kit className strings only.
