Tüm örnekler
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(
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'
)
),
],
),
),
),
],
)
219 satır
Playground'da aç
Benzer örnekler
-
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
-
Flutter Seven Segment Display Card with Lit LED Digits and Register Byte Decoder
A seven segment LED card for embedded, IoT and maker apps: a four digit red display reading 12.45 with unlit segments still glowing faintly, an enlarged digit with segments A to G and the decimal point labelled, its MAX7219 no-decode register byte 0xED in hex and binary, and a DP to G bit strip from D7 to D0.
-
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums
A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
