Flutter Habit Streak Tracker Card
A warm gradient habit card that gamifies a daily routine with a bold streak count, a seven-day completion dot row, and a one-tap log action. A health and productivity pattern built with Tailwind-style className utilities in Flutter.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gradient-to-br from-orange-500 via-rose-500 to-rose-600 shadow-xl dark:from-orange-600 dark:via-rose-600 dark:to-rose-700',
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 items-center justify-center w-11 h-11 rounded-2xl bg-white/20 dark:bg-white/20',
child: WIcon(
Icons.water_drop,
className: 'text-white text-xl'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Hydration',
className: 'text-base font-bold text-white'
),
WText(
'Daily goal: 8 glasses',
className: 'text-xs text-orange-100 dark:text-orange-100'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-white/20 dark:bg-white/20',
children: [
WIcon(
Icons.bolt,
className: 'text-amber-200 text-sm dark:text-amber-200'
),
WText(
'On fire',
className: 'text-xs font-bold text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-baseline gap-2',
children: [
WText(
'24',
className: 'text-5xl font-extrabold text-white'
),
WText(
'day streak',
className: 'text-sm font-medium text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-white',
child: WIcon(
Icons.check,
className: 'text-rose-500 text-sm dark:text-rose-500'
),
),
WText(
'M',
className: 'text-xs font-semibold text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-white',
child: WIcon(
Icons.check,
className: 'text-rose-500 text-sm dark:text-rose-500'
),
),
WText(
'T',
className: 'text-xs font-semibold text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-white',
child: WIcon(
Icons.check,
className: 'text-rose-500 text-sm dark:text-rose-500'
),
),
WText(
'W',
className: 'text-xs font-semibold text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-white',
child: WIcon(
Icons.check,
className: 'text-rose-500 text-sm dark:text-rose-500'
),
),
WText(
'T',
className: 'text-xs font-semibold text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-white',
child: WIcon(
Icons.check,
className: 'text-rose-500 text-sm dark:text-rose-500'
),
),
WText(
'F',
className: 'text-xs font-semibold text-orange-100 dark:text-orange-100'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white/25 ring-2 ring-white dark:bg-white/25 dark:ring-white',
child: WIcon(
Icons.water_drop,
className: 'text-white text-sm'
),
),
WText(
'S',
className: 'text-xs font-bold text-white'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WDiv(
className: 'flex items-center justify-center w-9 h-9 rounded-full bg-white/15 dark:bg-white/15',
child: WSpacer(
className: 'w-9 h-9'
),
),
WText(
'S',
className: 'text-xs font-medium text-orange-100 dark:text-orange-100'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl px-5 py-3 bg-white hover:bg-orange-50 shadow-lg dark:bg-white dark:hover:bg-orange-50',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.add,
className: 'text-rose-500 text-lg dark:text-rose-500'
),
WText(
'Log today',
className: 'text-base font-bold text-rose-500 dark:text-rose-500'
),
],
),
),
],
)
More like this
-
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.
