Tüm ö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.
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'
)
)
),
],
)
313 satır
Playground'da aç
Benzer örnekler
-
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.
-
Flutter Sprint Board Card with Kanban Status Columns
A kanban board squeezed into one card: three status columns side by side, each holding its own stack of task tiles, so the uneven column heights show where the work is piling up. Label chips, assignee avatars, struck-through done items and a WIP limit footer, all in Wind className strings.
