Flutter Class Schedule Card with Time Blocked Day Columns
A week view that puts real time on the vertical axis: five day columns, each holding class blocks whose offset and height come straight from start time and duration. Colour coded by class type with a legend, an hour axis on the left, and a next class strip with remaining spots. Pure Wind className layout, no charting package.
by Anılcan Çakır
30 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 border border-gray-100 dark:border-gray-800 p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'STUDIO SCHEDULE',
className: 'text-[10px] font-bold tracking-wide text-indigo-500 dark:text-indigo-400'
),
WText(
'This week',
className: 'text-lg font-semibold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1',
children: [
WIcon(
Icons.calendar_today,
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Mar 10 to 14',
className: 'text-[11px] font-semibold text-gray-600 dark:text-gray-300'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4',
children: [
WDiv(
className: 'w-[34px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[54px] ml-1',
child: WText(
'MON',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[54px] ml-1',
child: WText(
'TUE',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[54px] ml-1',
child: WText(
'WED',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[54px] ml-1',
child: WText(
'THU',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[54px] ml-1',
child: WText(
'FRI',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-1',
children: [
WDiv(
className: 'flex flex-col w-[34px] h-[160px]',
children: [
WDiv(
className: 'flex flex-row items-start justify-end w-[34px] h-[40px]',
child: WText(
'7:00',
className: 'text-[9px] font-medium text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-start justify-end w-[34px] h-[40px]',
child: WText(
'9:00',
className: 'text-[9px] font-medium text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-start justify-end w-[34px] h-[40px]',
child: WText(
'11:00',
className: 'text-[9px] font-medium text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-start justify-end w-[34px] h-[40px]',
child: WText(
'13:00',
className: 'text-[9px] font-medium text-gray-400 dark:text-gray-500'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[54px] h-[160px] rounded-xl bg-gray-50 dark:bg-gray-800 ml-1 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[30px] rounded-md bg-emerald-500 dark:bg-emerald-400',
child: WText(
'Yoga',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[70px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-indigo-500 dark:bg-indigo-400',
child: WText(
'Pilates',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[54px] h-[160px] rounded-xl bg-gray-50 dark:bg-gray-800 ml-1 mt-2',
children: [
WDiv(
className: 'w-[46px] h-[40px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-rose-500 dark:bg-rose-400',
child: WText(
'HIIT',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[60px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-amber-500 dark:bg-amber-400',
child: WText(
'Spin',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[54px] h-[160px] rounded-xl bg-gray-50 dark:bg-gray-800 ml-1 mt-2',
children: [
WDiv(
className: 'w-[46px] h-[20px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-violet-500 dark:bg-violet-400',
child: WText(
'Barre',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[40px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[30px] rounded-md bg-emerald-500 dark:bg-emerald-400',
child: WText(
'Yoga',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[54px] h-[160px] rounded-xl bg-gray-50 dark:bg-gray-800 ml-1 mt-2',
children: [
WDiv(
className: 'w-[46px] h-[10px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-amber-500 dark:bg-amber-400',
child: WText(
'Spin',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[30px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-rose-500 dark:bg-rose-400',
child: WText(
'HIIT',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[60px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[20px] rounded-md bg-indigo-500 dark:bg-indigo-400',
child: WText(
'Pilates',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-[54px] h-[160px] rounded-xl bg-gray-50 dark:bg-gray-800 ml-1 mt-2',
children: [
WDiv(
className: 'w-[46px] h-[40px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[30px] rounded-md bg-emerald-500 dark:bg-emerald-400',
child: WText(
'Yoga',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'w-[46px] h-[60px]'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[46px] h-[30px] rounded-md bg-violet-500 dark:bg-violet-400',
child: WText(
'Barre',
className: 'text-[9px] font-bold text-white dark:text-white'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Yoga',
className: 'text-[10px] font-medium text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center ml-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Pilates',
className: 'text-[10px] font-medium text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center ml-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'ml-1',
child: WText(
'HIIT',
className: 'text-[10px] font-medium text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center ml-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Spin',
className: 'text-[10px] font-medium text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center ml-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-violet-500 dark:bg-violet-400'
),
WDiv(
className: 'ml-1',
child: WText(
'Barre',
className: 'text-[10px] font-medium text-gray-500 dark:text-gray-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-emerald-50 dark:bg-emerald-500/20 px-4 py-3 mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'NEXT CLASS',
className: 'text-[10px] font-bold tracking-wide text-emerald-600 dark:text-emerald-300'
),
WText(
'Vinyasa Yoga, Studio 2',
className: 'text-sm font-semibold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'09:00',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'4 spots left',
className: 'text-[10px] font-medium text-emerald-600 dark:text-emerald-300'
),
],
),
],
),
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(
'Book a class',
className: 'text-sm font-semibold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 30
- Stars
- 0
- Revisions
- 1
- Size
- 12,767 chars
- Created
- Aug 14, 2026