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.
by Anılcan Çakır
22 views
0 stars
1 week ago
Rev 1
main.dart
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'
),
],
),
),
],
)
Stats
- Views
- 22
- Stars
- 0
- Revisions
- 1
- Size
- 6,223 chars
- Created
- Jun 14, 2026