All snippets
Flutter Soroban Abacus Card with Heaven and Earth Bead Rods
A Flutter soroban trainer card for maths and education apps: seven rods with heaven beads worth 5 and earth beads worth 1 set against the reckoning beam, unit dots, the digit under each rod and a streak, accuracy and pace row. Bead positions are computed from the number. Built with wind_kit.
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-amber-600 dark:bg-amber-500',
child: WDiv(
className: 'flex flex-col items-center gap-[3px]',
children: [
WDiv(
className: 'w-[18px] h-[7px] rounded-full bg-white dark:bg-amber-50'
),
WDiv(
className: 'w-[18px] h-[2px] bg-amber-200 dark:bg-amber-300'
),
WDiv(
className: 'w-[18px] h-[7px] rounded-full bg-white dark:bg-amber-50'
)
]
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Soroban Trainer',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Flash anzan, level 6',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-emerald-50 dark:bg-emerald-900/40 px-3 py-1',
child: WText(
'Correct',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-300'
)
),
]
),
WText(
'Set the number on the rods',
className: 'text-xs font-medium text-gray-500 dark:text-gray-400 mt-4'
),
WText(
'3,905,274',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white mt-1'
),
WDiv(
className: 'flex flex-col items-center w-full mt-4',
children: [
WDiv(
className: 'rounded-xl bg-amber-900 dark:bg-amber-950 p-[4px]',
child: WDiv(
className: 'relative w-[272px] h-[168px] rounded-lg bg-amber-50 dark:bg-stone-900',
children: [
WDiv(
className: 'absolute left-[21px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[59px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[97px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[135px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[173px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[211px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[249px] top-[0px] w-[2px] h-[168px] bg-amber-800/40 dark:bg-amber-200/30'
),
WDiv(
className: 'absolute left-[0px] top-[54px] w-[272px] h-[6px] bg-amber-900 dark:bg-amber-800'
),
WDiv(
className: 'absolute left-[7px] top-[4px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[7px] top-[61px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[7px] top-[76px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[7px] top-[91px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[7px] top-[150px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[45px] top-[39px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[45px] top-[61px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[45px] top-[76px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[45px] top-[91px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[45px] top-[106px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[83px] top-[4px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[83px] top-[105px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[83px] top-[120px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[83px] top-[135px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[83px] top-[150px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[121px] top-[39px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[121px] top-[105px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[121px] top-[120px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[121px] top-[135px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[121px] top-[150px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[159px] top-[4px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[159px] top-[61px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[159px] top-[76px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[159px] top-[135px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[159px] top-[150px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[197px] top-[39px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[197px] top-[61px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[197px] top-[76px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[197px] top-[135px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[197px] top-[150px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[235px] top-[4px] w-[30px] h-[14px] rounded-full bg-amber-200 dark:bg-amber-900'
),
WDiv(
className: 'absolute left-[235px] top-[61px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[235px] top-[76px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[235px] top-[91px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[235px] top-[106px] w-[30px] h-[14px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WDiv(
className: 'absolute left-[20px] top-[55px] w-[4px] h-[4px] rounded-full bg-white dark:bg-amber-100'
),
WDiv(
className: 'absolute left-[134px] top-[55px] w-[4px] h-[4px] rounded-full bg-white dark:bg-amber-100'
),
WDiv(
className: 'absolute left-[248px] top-[55px] w-[4px] h-[4px] rounded-full bg-white dark:bg-amber-100'
)
]
)
),
WDiv(
className: 'flex flex-row items-center w-[280px] mt-2',
children: [
WDiv(
className: 'w-[7px] h-[4px]'
),
WText(
'3',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
),
WText(
'9',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
),
WText(
'0',
className: 'w-[38px] text-center text-lg font-bold text-gray-300 dark:text-gray-600'
),
WText(
'5',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
),
WText(
'2',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
),
WText(
'7',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
),
WText(
'4',
className: 'w-[38px] text-center text-lg font-bold text-amber-700 dark:text-amber-400'
)
]
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center gap-2 rounded-full bg-amber-50 dark:bg-amber-900/30 px-3 py-1',
children: [
WDiv(
className: 'w-[18px] h-[8px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WText(
'Heaven bead = 5',
className: 'text-[11px] font-medium text-amber-800 dark:text-amber-200'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2 rounded-full bg-amber-50 dark:bg-amber-900/30 px-3 py-1',
children: [
WDiv(
className: 'w-[18px] h-[8px] rounded-full bg-amber-600 dark:bg-amber-500'
),
WText(
'Earth bead = 1',
className: 'text-[11px] font-medium text-amber-800 dark:text-amber-200'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[92px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'Streak',
className: 'text-[11px] font-medium text-gray-400 dark:text-gray-500'
),
WText(
'12',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'flex flex-col w-[92px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'Accuracy',
className: 'text-[11px] font-medium text-gray-400 dark:text-gray-500'
),
WText(
'94%',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'flex flex-col w-[92px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'Average',
className: 'text-[11px] font-medium text-gray-400 dark:text-gray-500'
),
WText(
'3.8 s',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-amber-600 dark:bg-amber-500 py-3 flex flex-row items-center justify-center',
child: WText(
'Next number',
className: 'text-sm font-semibold text-white'
)
)
),
],
)
330 lines
Open in the playground
More like this
-
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.
