Tüm ö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.
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
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-[#0b1733] dark:bg-[#0b1733]',
child: WIcon(
Icons.dark_mode,
className: 'text-amber-100 text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Navigation Lights',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'COLREGs Rule 21 arcs',
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(
'Night',
className: 'text-xs font-bold text-slate-700 dark:text-slate-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4 rounded-2xl bg-[#0b1733] dark:bg-[#0b1733] py-3',
child: WDiv(
className: 'relative w-[232px] h-[232px]',
children: [
WDiv(
className: 'absolute left-[16px] top-[116px] w-[200px] h-[1px] bg-white/20'
),
WDiv(
className: 'absolute left-[121px] top-[11px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[120px] top-[37px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[140px] top-[15px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[135px] top-[40px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[158px] top-[23px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[148px] top-[45px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[174px] top-[34px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[161px] top-[54px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[188px] top-[48px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[171px] top-[64px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[199px] top-[64px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[180px] top-[77px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[207px] top-[82px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[185px] top-[90px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[211px] top-[101px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[188px] top-[105px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[211px] top-[121px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[188px] top-[120px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[207px] top-[140px] w-[10px] h-[10px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[185px] top-[135px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[199px] top-[158px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[188px] top-[174px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[174px] top-[188px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[158px] top-[199px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[140px] top-[207px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[121px] top-[211px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[101px] top-[211px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[82px] top-[207px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[64px] top-[199px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[48px] top-[188px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[34px] top-[174px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[23px] top-[158px] w-[10px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[15px] top-[140px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[40px] top-[135px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[11px] top-[121px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[37px] top-[120px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[11px] top-[101px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[37px] top-[105px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[15px] top-[82px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[40px] top-[90px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[23px] top-[64px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[45px] top-[77px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[34px] top-[48px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[54px] top-[64px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[48px] top-[34px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[64px] top-[54px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[64px] top-[23px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[77px] top-[45px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[82px] top-[15px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[90px] top-[40px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[101px] top-[11px] w-[10px] h-[10px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[105px] top-[37px] w-[7px] h-[7px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[102px] top-[70px] w-[28px] h-[92px] rounded-t-full rounded-b-lg bg-slate-500 dark:bg-slate-500 border border-slate-400 dark:border-slate-400'
),
WDiv(
className: 'absolute left-[113px] top-[88px] w-[6px] h-[6px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[100px] top-[100px] w-[6px] h-[6px] rounded-full bg-red-500 dark:bg-red-500'
),
WDiv(
className: 'absolute left-[126px] top-[100px] w-[6px] h-[6px] rounded-full bg-green-400 dark:bg-green-400'
),
WDiv(
className: 'absolute left-[113px] top-[154px] w-[6px] h-[6px] rounded-full bg-white dark:bg-white'
),
WText(
'AHEAD',
className: 'absolute left-[86px] top-[48px] w-[60px] text-center text-[9px] font-bold tracking-widest text-white/60'
)
]
)
),
WDiv(
className: 'flex flex-col w-full mt-4',
children: [
WDiv(
className: 'flex flex-row justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2 w-[140px]',
children: [
WDiv(
className: 'rounded-full w-[10px] h-[10px] bg-red-500 dark:bg-red-500'
),
WText(
'Port',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'112.5°',
className: 'text-xs font-bold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-[140px]',
children: [
WDiv(
className: 'rounded-full w-[10px] h-[10px] bg-green-400 dark:bg-green-400'
),
WText(
'Starboard',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'112.5°',
className: 'text-xs font-bold text-gray-900 dark:text-white'
)
]
)
]
),
WDiv(
className: 'flex flex-row justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-2 w-[140px]',
children: [
WDiv(
className: 'rounded-full w-[8px] h-[8px] mx-[1px] bg-white dark:bg-white border border-gray-400 dark:border-gray-500'
),
WText(
'Masthead',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'225°',
className: 'text-xs font-bold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-[140px]',
children: [
WDiv(
className: 'rounded-full w-[10px] h-[10px] bg-white dark:bg-white border border-gray-400 dark:border-gray-500'
),
WText(
'Stern',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'135°',
className: 'text-xs font-bold text-gray-900 dark:text-white'
)
]
)
]
)
]
),
WText(
'Vessels of 50 m or more: masthead seen at 6 miles, sidelights and sternlight at 3.',
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-[#0b1733] dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Identify a vessel',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
WIcon(
Icons.arrow_forward,
className: 'text-white dark:text-gray-900 text-base'
),
]
)
)
),
]
)
330 satır
Playground'da aç
Benzer örnekler
-
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 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.
-
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.
