Flutter Habit Streak Card with Contribution Heatmap Grid
A habit tracker card built with Wind: a flame streak counter, a contribution-style heatmap grid with four intensity shades across five weeks, and a Less-to-More legend. Dark-mode ready.
by Anılcan Çakır
64 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'mx-auto w-full max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Meditation',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Daily habit tracker',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1.5 rounded-full px-3 py-1.5 bg-orange-50 dark:bg-orange-950',
children: [
WIcon(
Icons.local_fire_department,
className: 'text-base text-orange-500 dark:text-orange-400'
),
WText(
'42',
className: 'text-sm font-bold text-orange-600 dark:text-orange-400'
),
WText(
'day streak',
className: 'text-xs font-medium text-orange-500 dark:text-orange-300'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-200 dark:bg-emerald-900'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-gray-100 dark:bg-gray-800'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-200 dark:bg-emerald-900'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-200 dark:bg-emerald-900'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-200 dark:bg-emerald-900'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-200 dark:bg-emerald-900'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-gray-100 dark:bg-gray-800'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-9 h-9 rounded-md bg-emerald-500 dark:bg-emerald-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Last 5 weeks',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row items-center gap-1.5',
children: [
WText(
'Less',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'w-3 h-3 rounded-sm bg-emerald-200 dark:bg-emerald-900'
),
WDiv(
className: 'w-3 h-3 rounded-sm bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'w-3 h-3 rounded-sm bg-emerald-400 dark:bg-emerald-600'
),
WDiv(
className: 'w-3 h-3 rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WText(
'More',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
],
)
Stats
- Views
- 64
- Stars
- 0
- Revisions
- 1
- Size
- 7,077 chars
- Created
- Jul 10, 2026