Flutter Appointment Booking Card with Date and Time Slots
A scheduling card for services and healthcare: a provider header with rating, a horizontal date selector, a wrapping grid of time slots with selected and booked states, and a confirm button echoing the chosen slot. Pure Wind utility styling, dark-mode ready.
WDiv(
className: 'flex flex-col gap-4 w-full max-w-sm p-5 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-400 to-emerald-600 dark:from-teal-500 dark:to-emerald-700',
child: WText(
'DR',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Dr. Elena Rossi',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Dermatology . in-person',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 px-2 py-1 rounded-lg bg-emerald-50 dark:bg-emerald-500/15',
children: [
WIcon(
Icons.star,
className: 'text-xs text-emerald-500 dark:text-emerald-400'
),
WText(
'4.9 . 320 reviews',
className: 'text-xs font-medium text-emerald-700 dark:text-emerald-300'
),
],
),
WText(
'Select a date',
className: 'text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'wrap gap-2 w-full',
children: [
WDiv(
className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
children: [
WText(
'Mon',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'12',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col items-center w-16 py-2 rounded-xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
children: [
WText(
'Tue',
className: 'text-xs text-indigo-100 dark:text-indigo-100'
),
WText(
'13',
className: 'text-base font-bold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
children: [
WText(
'Wed',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'14',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col items-center w-16 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
children: [
WText(
'Thu',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'15',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WText(
'Available times',
className: 'text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'wrap gap-2 w-full',
children: [
WDiv(
className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
child: WText(
'9:00 AM',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
),
),
WDiv(
className: 'flex flex-row items-center gap-1 px-4 py-2 rounded-xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
children: [
WIcon(
Icons.check,
className: 'text-sm text-white dark:text-white'
),
WText(
'10:30 AM',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800',
child: WText(
'12:00 PM',
className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-600'
),
),
WDiv(
className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
child: WText(
'1:30 PM',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
),
),
WDiv(
className: 'px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700',
child: WText(
'3:00 PM',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
),
),
WDiv(
className: 'px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800',
child: WText(
'4:30 PM',
className: 'text-sm font-medium line-through text-gray-400 dark:text-gray-600'
),
),
],
),
WButton(
className: 'flex flex-row items-center justify-center gap-2 w-full py-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500 shadow-lg',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.calendar_today,
className: 'text-base text-white dark:text-white'
),
WText(
'Confirm . Tue 13, 10:30 AM',
className: 'text-sm font-semibold text-white dark:text-white'
),
],
),
),
],
)
Benzer örnekler
-
Flutter Time Zone Meeting Planner Card with Work Hour Tracks
A meeting planner card for Flutter team apps, built with Wind: one 24 hour UTC track per city showing work, awake and asleep hours, a highlighted best slot column, local times with an after hours flag, a legend and an invite button. Every block is computed from the real September UTC offsets.
-
Flutter Class Schedule Card with Time Blocked Day Columns
A Flutter weekly class schedule card with time on the vertical axis: five day columns, class blocks sized by start time and duration, colour-coded types with a legend, an hour axis and a next-class strip with spots left. Pure wind_kit className layout, no charting package.
-
Flutter Focus Timer Card with Radial Minute Dial
A deep-work session card that turns the remaining minutes into a ring of 25 dots, one per minute, with the countdown in the middle. Round pills track the pomodoro cycle and two tiles summarise focused time and streak. Built with Wind className utilities, so the whole dial is plain divs.
