Flutter Moon Phase Card with Carved Gibbous Disc and Night Sky Panel
An astronomy card whose moon is not an image or an icon. A cream disc sits on a night sky panel and a second disc, painted in the exact panel colour, is offset to carve the terminator, so the gibbous shape comes free from two circles and nothing else. Under it runs the eight step phase cycle with the current phase ringed, then moon age, rise and set tiles and a next full moon note. Built from Wind className strings only.
by Anılcan Çakır
10 views
0 stars
1 day ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'TONIGHT',
className: 'text-[9px] font-bold tracking-widest text-indigo-600 dark:text-indigo-400'
),
WText(
'Waxing gibbous',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'24 August, Whitby',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-indigo-50 dark:bg-indigo-900 px-3 py-1',
children: [
WText(
'78%',
className: 'text-sm font-bold text-indigo-600 dark:text-indigo-300'
),
WText(
'lit',
className: 'text-[10px] font-semibold text-indigo-400 dark:text-indigo-400 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'relative w-[306px] h-[140px] rounded-2xl bg-slate-900 dark:bg-slate-950',
children: [
WDiv(
className: 'absolute left-[10px] top-[22px] w-[4px] h-[4px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[8px] top-[100px] w-[3px] h-[3px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[136px] top-[8px] w-[3px] h-[3px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[200px] top-[20px] w-[4px] h-[4px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[232px] top-[46px] w-[3px] h-[3px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[268px] top-[24px] w-[4px] h-[4px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[250px] top-[100px] w-[3px] h-[3px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[286px] top-[74px] w-[4px] h-[4px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[160px] top-[128px] w-[3px] h-[3px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[206px] top-[116px] w-[4px] h-[4px] rounded-full bg-slate-400 dark:bg-slate-500'
),
WDiv(
className: 'absolute left-[98px] top-[15px] w-[110px] h-[110px] rounded-full bg-amber-50 dark:bg-amber-100'
),
WDiv(
className: 'absolute left-[16px] top-[15px] w-[110px] h-[110px] rounded-full bg-slate-900 dark:bg-slate-950'
),
],
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'w-4 h-4 rounded-full bg-slate-700 dark:bg-slate-800'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-slate-500 dark:bg-slate-600'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-slate-300 dark:bg-slate-400'
),
WDiv(
className: 'w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-200 border border-amber-300 dark:border-amber-400 border-2 border-indigo-500 dark:border-indigo-400'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-amber-50 dark:bg-amber-100 border border-amber-300 dark:border-amber-400'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-amber-100 dark:bg-amber-200 border border-amber-300 dark:border-amber-400'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-slate-300 dark:bg-slate-400'
),
WDiv(
className: 'w-4 h-4 rounded-full bg-slate-500 dark:bg-slate-600'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'AGE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'11.2',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'd',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'RISE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'16:48',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'SET',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'04:22',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-indigo-50 dark:bg-indigo-900 px-3 py-2 mt-3',
children: [
WIcon(
Icons.schedule,
className: 'text-indigo-500 dark:text-indigo-300 text-base'
),
WText(
'Full moon in 3 days, 384,912 km away',
className: 'text-[11px] font-semibold text-indigo-700 dark:text-indigo-200 ml-2'
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-slate-900 dark:bg-slate-800 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Open sky chart',
className: 'text-sm font-bold text-white dark:text-white'
),
WDiv(
className: 'ml-2',
child: WIcon(
Icons.arrow_forward,
className: 'text-white dark:text-white text-base'
)
),
],
),
),
),
],
)
Stats
- Views
- 10
- Stars
- 0
- Revisions
- 1
- Size
- 7,837 chars
- Created
- Aug 23, 2026