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.
by Anılcan Çakır
157 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-center justify-center w-[40px] h-[40px] rounded-xl bg-indigo-500 dark:bg-indigo-500',
child: WIcon(
Icons.language,
className: 'text-xl text-white dark:text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Team sync',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Tuesday, 4 cities, 45 min',
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(
'BEST SLOT',
className: 'text-[10px] font-bold tracking-wide text-emerald-700 dark:text-emerald-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center gap-3 w-full rounded-2xl bg-amber-50 dark:bg-amber-500/10 px-4 py-3 mt-4',
children: [
WText(
'16:00',
className: 'text-3xl font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'UTC, TUESDAY',
className: 'text-[10px] font-bold tracking-widest text-amber-700 dark:text-amber-300'
),
WText(
'Inside work hours for 3 of 4',
className: 'text-sm font-medium text-gray-700 dark:text-gray-300'
),
]
),
]
),
WDiv(
className: 'relative w-[298px] h-[14px] mt-4',
children: [
WText(
'00',
className: 'absolute left-[0px] top-[0px] text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
WText(
'06',
className: 'absolute left-[68px] top-[0px] text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
WText(
'12',
className: 'absolute left-[143px] top-[0px] text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
WText(
'18',
className: 'absolute left-[218px] top-[0px] text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
WText(
'24',
className: 'absolute left-[286px] top-[0px] text-[9px] font-bold text-gray-400 dark:text-gray-500'
),
]
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'San Francisco',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'UTC-7',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
]
),
WText(
'09:00',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'relative w-[298px] h-[20px] bg-slate-700 dark:bg-slate-800',
children: [
WDiv(
className: 'absolute left-[161px] top-[0px] w-[137px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[0px] top-[0px] w-[62px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[199px] top-[0px] w-[99px] h-[20px] bg-indigo-500 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[0px] top-[0px] w-[12px] h-[20px] bg-indigo-500 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[197px] top-[0px] w-[16px] h-[20px] rounded-[3px] border-2 border-amber-400 dark:border-amber-300'
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'New York',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'UTC-4',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
]
),
WText(
'12:00',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'relative w-[298px] h-[20px] bg-slate-700 dark:bg-slate-800',
children: [
WDiv(
className: 'absolute left-[124px] top-[0px] w-[174px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[0px] top-[0px] w-[25px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[161px] top-[0px] w-[112px] h-[20px] bg-indigo-500 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[197px] top-[0px] w-[16px] h-[20px] rounded-[3px] border-2 border-amber-400 dark:border-amber-300'
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'London',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'UTC+1',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
]
),
WText(
'17:00',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'relative w-[298px] h-[20px] bg-slate-700 dark:bg-slate-800',
children: [
WDiv(
className: 'absolute left-[62px] top-[0px] w-[199px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[99px] top-[0px] w-[112px] h-[20px] bg-indigo-500 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[197px] top-[0px] w-[16px] h-[20px] rounded-[3px] border-2 border-amber-400 dark:border-amber-300'
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'Istanbul',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'UTC+3',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
]
),
WText(
'19:00 after hours',
className: 'text-xs font-bold text-amber-600 dark:text-amber-400'
),
]
),
WDiv(
className: 'relative w-[298px] h-[20px] bg-slate-700 dark:bg-slate-800',
children: [
WDiv(
className: 'absolute left-[37px] top-[0px] w-[199px] h-[20px] bg-indigo-100 dark:bg-indigo-900'
),
WDiv(
className: 'absolute left-[74px] top-[0px] w-[112px] h-[20px] bg-indigo-500 dark:bg-indigo-500'
),
WDiv(
className: 'absolute left-[197px] top-[0px] w-[16px] h-[20px] rounded-[3px] border-2 border-amber-400 dark:border-amber-300'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center gap-4 w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[2px] bg-indigo-500 dark:bg-indigo-500'
),
WText(
'Work',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[2px] bg-indigo-100 dark:bg-indigo-900'
),
WText(
'Awake',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[2px] bg-slate-700 dark:bg-slate-800'
),
WText(
'Asleep',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Send invite for 16:00 UTC',
className: 'text-sm font-semibold text-center text-white dark:text-gray-900'
)
)
),
],
)
Stats
- Views
- 157
- Stars
- 0
- Revisions
- 1
- Size
- 10,526 chars
- Created
- Sep 21, 2026