# Flutter Moon Phase Card with Carved Gibbous Disc and Night Sky Panel A Flutter moon phase card for astronomy apps: a cream disc on a night sky panel, carved into a gibbous shape by a second offset disc, the eight-step phase cycle with the current phase ringed, moon age, rise and set tiles and the next full moon. Two circles, no image, built with wind_kit. `WDiv`, `WText`, `WIcon`, `WButton` ```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' ) ), ], ), ), ), ], ) ```