Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
An electromagnetic spectrum card for science, physics and education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands laid on a log wavelength axis from 10 m to 0.1 pm using NASA band edges, a connector that zooms the thin visible slice into a 700 to 400 nm rainbow strip, and stats for bands and decades.
by Anılcan Çakır
71 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-violet-600 dark:bg-violet-500',
child: WIcon(
Icons.visibility,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'EM Spectrum',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Wavelength, log scale',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-violet-50 dark:bg-violet-900/40 px-3 py-1',
child: WText(
'10 m to 0.1 pm',
className: 'text-xs font-bold text-violet-700 dark:text-violet-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-5',
child: WDiv(
className: 'relative w-[294px] h-[126px]',
children: [
WDiv(
className: 'absolute left-[0px] top-[0px] w-[42px] h-[36px] rounded-l-lg flex flex-row items-center justify-center bg-[#1e1b4b] dark:bg-[#1e1b4b]',
child: WText(
'Radio',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[42px] top-[0px] w-[42px] h-[36px] flex flex-row items-center justify-center bg-[#3730a3] dark:bg-[#3730a3]',
child: WText(
'Micro',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[84px] top-[0px] w-[66px] h-[36px] flex flex-row items-center justify-center bg-[#b91c1c] dark:bg-[#b91c1c]',
child: WText(
'Infrared',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[150px] top-[0px] w-[5px] h-[36px] bg-gradient-to-b from-red-500 via-yellow-300 to-violet-500'
),
WDiv(
className: 'absolute left-[155px] top-[0px] w-[34px] h-[36px] flex flex-row items-center justify-center bg-[#7c3aed] dark:bg-[#7c3aed]',
child: WText(
'UV',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[189px] top-[0px] w-[63px] h-[36px] flex flex-row items-center justify-center bg-[#0284c7] dark:bg-[#0284c7]',
child: WText(
'X-ray',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[252px] top-[0px] w-[42px] h-[36px] rounded-r-lg flex flex-row items-center justify-center bg-[#059669] dark:bg-[#059669]',
child: WText(
'Gamma',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[42px] top-[36px] w-[1px] h-[5px] bg-gray-400 dark:bg-gray-500'
),
WText(
'10 cm',
className: 'absolute left-[20px] top-[42px] w-[44px] text-center text-[9px] font-medium text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'absolute left-[84px] top-[36px] w-[1px] h-[5px] bg-gray-400 dark:bg-gray-500'
),
WText(
'1 mm',
className: 'absolute left-[62px] top-[42px] w-[44px] text-center text-[9px] font-medium text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'absolute left-[189px] top-[36px] w-[1px] h-[5px] bg-gray-400 dark:bg-gray-500'
),
WText(
'10 nm',
className: 'absolute left-[167px] top-[42px] w-[44px] text-center text-[9px] font-medium text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'absolute left-[252px] top-[36px] w-[1px] h-[5px] bg-gray-400 dark:bg-gray-500'
),
WText(
'0.01 nm',
className: 'absolute left-[230px] top-[42px] w-[44px] text-center text-[9px] font-medium text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'absolute left-[151px] top-[36px] w-[2px] h-[36px] bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[0px] top-[72px] w-[294px] h-[2px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[0px] top-[78px] w-[21px] h-[30px] rounded-l-lg bg-[#ff0000] dark:bg-[#ff0000]'
),
WDiv(
className: 'absolute left-[21px] top-[78px] w-[21px] h-[30px] bg-[#ff0000] dark:bg-[#ff0000]'
),
WDiv(
className: 'absolute left-[42px] top-[78px] w-[21px] h-[30px] bg-[#ff0000] dark:bg-[#ff0000]'
),
WDiv(
className: 'absolute left-[63px] top-[78px] w-[21px] h-[30px] bg-[#ff6300] dark:bg-[#ff6300]'
),
WDiv(
className: 'absolute left-[84px] top-[78px] w-[21px] h-[30px] bg-[#ffb200] dark:bg-[#ffb200]'
),
WDiv(
className: 'absolute left-[105px] top-[78px] w-[21px] h-[30px] bg-[#fff800] dark:bg-[#fff800]'
),
WDiv(
className: 'absolute left-[126px] top-[78px] w-[21px] h-[30px] bg-[#c5ff00] dark:bg-[#c5ff00]'
),
WDiv(
className: 'absolute left-[147px] top-[78px] w-[21px] h-[30px] bg-[#7fff00] dark:bg-[#7fff00]'
),
WDiv(
className: 'absolute left-[168px] top-[78px] w-[21px] h-[30px] bg-[#2cff00] dark:bg-[#2cff00]'
),
WDiv(
className: 'absolute left-[189px] top-[78px] w-[21px] h-[30px] bg-[#00ffbb] dark:bg-[#00ffbb]'
),
WDiv(
className: 'absolute left-[210px] top-[78px] w-[21px] h-[30px] bg-[#00c0ff] dark:bg-[#00c0ff]'
),
WDiv(
className: 'absolute left-[231px] top-[78px] w-[21px] h-[30px] bg-[#005aff] dark:bg-[#005aff]'
),
WDiv(
className: 'absolute left-[252px] top-[78px] w-[21px] h-[30px] bg-[#3200ff] dark:bg-[#3200ff]'
),
WDiv(
className: 'absolute left-[273px] top-[78px] w-[21px] h-[30px] rounded-r-lg bg-[#7d00dd] dark:bg-[#7d00dd]'
),
WText(
'700 nm',
className: 'absolute left-[0px] top-[112px] w-[60px] text-left text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
WText(
'550 nm',
className: 'absolute left-[117px] top-[112px] w-[60px] text-center text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
WText(
'400 nm',
className: 'absolute left-[234px] top-[112px] w-[60px] text-right text-[10px] font-bold text-gray-600 dark:text-gray-300'
)
]
)
),
WText(
'Visible light, zoomed: the thin band between infrared and UV spans just 0.24 of the 14 decades above.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
WDiv(
className: 'flex flex-row justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'7',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'BANDS',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'14',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'DECADES',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'0.24',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'VISIBLE',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
)
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-violet-600 dark:bg-violet-500 py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Explore bands',
className: 'text-sm font-bold text-white'
),
WIcon(
Icons.arrow_forward,
className: 'text-white text-base'
),
]
)
)
),
]
)
Stats
- Views
- 71
- Stars
- 0
- Revisions
- 1
- Size
- 9,728 chars
- Created
- Oct 14, 2026