Flutter Bowling Scoresheet Card with Frame by Frame Strike Marks
A league scoresheet that keeps the real ten frame table: each frame splits into two roll cells above a cumulative total, strikes and spares carry their traditional marks, and the frame in play is ringed in amber. The split cell grid is nested flex rows with fixed pixel widths, so the table stays aligned without a data grid widget.
by Anılcan Çakır
51 views
0 stars
1 week ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5 border border-gray-200 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-amber-500 dark:bg-amber-600',
child: WIcon(
Icons.local_fire_department,
className: 'text-lg text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'M. Okonjo',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Tuesday league, game 2',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-amber-50 dark:bg-amber-900 px-3 py-1',
child: WText(
'FRAME 8',
className: 'text-[9px] font-bold tracking-wide text-amber-700 dark:text-amber-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'125',
className: 'text-2xl font-bold text-gray-900 dark:text-white'
),
WText(
'THROUGH 6 FRAMES',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WDiv(
className: 'flex flex-row items-center rounded-lg bg-amber-500 dark:bg-amber-600 px-2 py-1',
child: WText(
'TURKEY',
className: 'text-[11px] font-bold tracking-wide text-white dark:text-white'
),
),
WDiv(
className: 'mt-1',
child: WText(
'frames 2 to 4',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'ROLLS',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'CUMULATIVE',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-2',
child: WDiv(
className: 'flex flex-row items-start w-[310px]',
children: [
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'8',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WText(
'/',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'20',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'X',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'50',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'X',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'77',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'X',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'96',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'7',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WText(
'2',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'105',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'9',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WText(
'/',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800',
child: WText(
'125',
className: 'text-[12px] font-bold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WText(
'X',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-amber-500 dark:border-amber-400',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'w-[8px] h-[8px]'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[30px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[26px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'w-[8px] h-[8px]'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'w-[26px] h-[28px] bg-gray-50 dark:bg-gray-800'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[40px] border-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'flex flex-row items-center justify-around w-[36px] h-[26px] border-b-2 border-gray-300 dark:border-gray-600',
children: [
WDiv(
className: 'w-[8px] h-[8px]'
),
WDiv(
className: 'w-[1px] h-[26px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'w-[8px] h-[8px]'
),
],
),
WDiv(
className: 'w-[36px] h-[28px] bg-gray-50 dark:bg-gray-800'
),
],
),
],
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'4',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'STRIKES',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'2',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'SPARES',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'1',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'OPEN',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-xl bg-emerald-50 dark:bg-emerald-900 px-3 py-2 mt-4',
children: [
WIcon(
Icons.trending_up,
className: 'text-base text-emerald-500 dark:text-emerald-300'
),
WDiv(
className: 'ml-2',
child: WText(
'On pace for 214, best of the season',
className: 'text-[11px] font-medium text-emerald-700 dark:text-emerald-200'
),
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Open full scoresheet',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 51
- Stars
- 0
- Revisions
- 1
- Size
- 15,548 chars
- Created
- Sep 2, 2026