All snippets
Flutter Bookshelf Card with Book Spine Shelves and Reading Goal
A reading tracker card for Flutter book apps, built with Wind: two wooden shelves of book spines in varied heights, colours and foil bands, a flat stack, a bookmark ribbon on the current read, a reading challenge badge and a page progress bar. The spine counts match the goal it reports.
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
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-end justify-center gap-[2px] w-[40px] h-[40px] rounded-xl bg-amber-100 dark:bg-amber-500/20 pb-[9px]',
children: [
WDiv(
className: 'w-[5px] h-[20px] rounded-[1px] bg-rose-700 dark:bg-rose-400'
),
WDiv(
className: 'w-[6px] h-[16px] rounded-[1px] bg-amber-600 dark:bg-amber-400'
),
WDiv(
className: 'w-[5px] h-[22px] rounded-[1px] bg-sky-800 dark:bg-sky-400'
),
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'My bookshelf',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'2026 reading challenge',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-emerald-100 dark:bg-emerald-500/20 px-3 py-1',
child: WText(
'11 OF 16',
className: 'text-[10px] font-bold tracking-wide text-emerald-700 dark:text-emerald-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4 mb-2',
children: [
WText(
'READ IN 2026',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'11 books',
className: 'text-xs font-medium text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col w-[300px] rounded-t-xl bg-amber-50 dark:bg-amber-950/40 pt-3',
children: [
WDiv(
className: 'flex flex-row items-end gap-[2px] h-[114px] px-[10px]',
children: [
WDiv(
className: 'flex flex-col justify-between w-[22px] h-[104px] rounded-[2px] bg-rose-800 dark:bg-rose-800 py-[8px]',
children: [
WDiv(
className: 'w-[22px] h-[2px] bg-amber-300 dark:bg-amber-300'
),
WDiv(
className: 'w-[22px] h-[2px] bg-amber-300 dark:bg-amber-300'
)
]
),
WDiv(
className: 'w-[16px] h-[90px] rounded-[2px] bg-stone-300 dark:bg-stone-300'
),
WDiv(
className: 'flex flex-col items-center justify-center w-[26px] h-[112px] rounded-[2px] bg-sky-900 dark:bg-sky-900',
child: WDiv(
className: 'w-[20px] h-[22px] rounded-[1px] bg-sky-100 dark:bg-sky-100'
)
),
WDiv(
className: 'flex flex-col justify-between w-[18px] h-[96px] rounded-[2px] bg-amber-500 dark:bg-amber-500 py-[8px]',
children: [
WDiv(
className: 'w-[18px] h-[2px] bg-amber-800 dark:bg-amber-800'
),
WDiv(
className: 'w-[18px] h-[2px] bg-amber-800 dark:bg-amber-800'
)
]
),
WDiv(
className: 'w-[14px] h-[82px] rounded-[2px] bg-emerald-700 dark:bg-emerald-700'
),
WDiv(
className: 'flex flex-col justify-between w-[24px] h-[108px] rounded-[2px] bg-gray-900 dark:bg-gray-900 py-[8px]',
children: [
WDiv(
className: 'w-[24px] h-[2px] bg-amber-300 dark:bg-amber-300'
),
WDiv(
className: 'w-[24px] h-[2px] bg-amber-300 dark:bg-amber-300'
)
]
),
WDiv(
className: 'flex flex-col items-center justify-center w-[20px] h-[98px] rounded-[2px] bg-orange-600 dark:bg-orange-600',
child: WDiv(
className: 'w-[14px] h-[22px] rounded-[1px] bg-orange-100 dark:bg-orange-100'
)
),
WDiv(
className: 'flex flex-col justify-between w-[28px] h-[114px] rounded-[2px] bg-indigo-900 dark:bg-indigo-900 py-[8px]',
children: [
WDiv(
className: 'w-[28px] h-[2px] bg-indigo-300 dark:bg-indigo-300'
),
WDiv(
className: 'w-[28px] h-[2px] bg-indigo-300 dark:bg-indigo-300'
)
]
),
WDiv(
className: 'w-[18px] h-[86px] rounded-[2px] bg-teal-600 dark:bg-teal-600'
),
WDiv(
className: 'flex flex-col items-start ml-[4px]',
children: [
WDiv(
className: 'w-[50px] h-[14px] rounded-[2px] bg-cyan-700 dark:bg-cyan-700'
),
WDiv(
className: 'w-[56px] h-[16px] rounded-[2px] bg-stone-500 dark:bg-stone-500'
)
]
),
]
),
WDiv(
className: 'w-[300px] h-[10px] rounded-[2px] bg-amber-800 dark:bg-amber-700'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4 mb-2',
children: [
WText(
'UP NEXT',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'1 reading, 5 queued',
className: 'text-xs font-medium text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col w-[300px] rounded-t-xl bg-amber-50 dark:bg-amber-950/40 pt-3',
children: [
WDiv(
className: 'flex flex-row items-end gap-[2px] h-[118px] px-[10px]',
children: [
WDiv(
className: 'flex flex-col items-center',
children: [
WDiv(
className: 'w-[5px] h-[12px] bg-rose-500 dark:bg-rose-500 ml-[8px]'
),
WDiv(
className: 'flex flex-col items-center justify-center w-[24px] h-[106px] rounded-[2px] bg-emerald-900 dark:bg-emerald-900',
child: WDiv(
className: 'w-[18px] h-[22px] rounded-[1px] bg-amber-100 dark:bg-amber-100'
)
)
]
),
WDiv(
className: 'flex flex-col justify-between w-[20px] h-[94px] rounded-[2px] bg-red-700 dark:bg-red-700 py-[8px]',
children: [
WDiv(
className: 'w-[20px] h-[2px] bg-red-200 dark:bg-red-200'
),
WDiv(
className: 'w-[20px] h-[2px] bg-red-200 dark:bg-red-200'
)
]
),
WDiv(
className: 'w-[16px] h-[84px] rounded-[2px] bg-yellow-400 dark:bg-yellow-400'
),
WDiv(
className: 'flex flex-col items-center justify-center w-[26px] h-[110px] rounded-[2px] bg-slate-700 dark:bg-slate-700',
child: WDiv(
className: 'w-[20px] h-[22px] rounded-[1px] bg-slate-200 dark:bg-slate-200'
)
),
WDiv(
className: 'w-[18px] h-[100px] rounded-[2px] bg-lime-700 dark:bg-lime-700'
),
WDiv(
className: 'flex flex-col justify-between w-[22px] h-[90px] rounded-[2px] bg-violet-800 dark:bg-violet-800 py-[8px]',
children: [
WDiv(
className: 'w-[22px] h-[2px] bg-violet-300 dark:bg-violet-300'
),
WDiv(
className: 'w-[22px] h-[2px] bg-violet-300 dark:bg-violet-300'
)
]
),
WDiv(
className: 'w-[8px] h-[56px] rounded-t-[3px] bg-gray-500 dark:bg-gray-500 ml-[6px]'
),
WDiv(
className: 'flex flex-col items-center ml-[44px]',
children: [
WDiv(
className: 'flex flex-row items-end gap-[2px]',
children: [
WDiv(
className: 'w-[10px] h-[20px] rounded-full bg-emerald-500 dark:bg-emerald-500'
),
WDiv(
className: 'w-[12px] h-[32px] rounded-full bg-emerald-600 dark:bg-emerald-600'
),
WDiv(
className: 'w-[10px] h-[24px] rounded-full bg-emerald-500 dark:bg-emerald-500'
)
]
),
WDiv(
className: 'w-[40px] h-[6px] rounded-[2px] bg-orange-500 dark:bg-orange-500'
),
WDiv(
className: 'w-[32px] h-[26px] rounded-b-xl bg-orange-400 dark:bg-orange-400'
)
]
),
]
),
WDiv(
className: 'w-[300px] h-[10px] rounded-[2px] bg-amber-800 dark:bg-amber-700'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Now reading: Piranesi',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Page 164 of 272',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
WText(
'60%',
className: 'text-sm font-bold text-emerald-700 dark:text-emerald-400'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-[6px] rounded-full bg-gray-200 dark:bg-gray-700 mt-2',
child: WDiv(
className: 'w-[180px] h-[6px] rounded-full bg-emerald-600 dark:bg-emerald-400'
)
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Log pages read today',
className: 'text-sm font-semibold text-center text-white dark:text-gray-900'
)
)
),
],
)
291 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.
