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.
by Anılcan Çakır
127 views
0 stars
1 month ago
Rev 1
main.dart
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'
)
)
),
],
)
Stats
- Views
- 127
- Stars
- 0
- Revisions
- 1
- Size
- 10,759 chars
- Created
- Sep 21, 2026