Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A ship navigation lights card for boating, sailing and marine apps: a night panel with a top down hull ringed by the COLREGs Rule 21 light arcs, red port and green starboard sidelights at 112.5 degrees each, a 225 degree white masthead ring and a 135 degree sternlight, the beam line for reference, and the Rule 22 visibility ranges.
by Anılcan Çakır
72 views
0 stars
2 weeks ago
Rev 1
main.dart
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'
),
]
)
)
),
]
)
Stats
- Views
- 72
- Stars
- 0
- Revisions
- 1
- Size
- 13,564 chars
- Created
- Oct 14, 2026