Flutter Glucose Monitor Card with Continuous Trend Line
A continuous glucose monitoring card for health and wearable apps: a 24 hour dot trend line plotted over a shaded target range, amber markers on every reading above 180 mg/dL, time in range and average tiles, and a spike callout. Built with Wind utility classes, complete dark mode pairs and no charting package.
by Anılcan Çakır
14 views
0 stars
6 days ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col items-start w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'GLUCOSE MONITOR',
className: 'text-[11px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-600 dark:text-emerald-300 text-xs'
),
WText(
'In range',
className: 'text-[10px] font-bold text-emerald-700 dark:text-emerald-200 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end w-full mt-2',
children: [
WText(
'112',
className: 'text-4xl font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'mg/dL',
className: 'text-sm font-semibold text-gray-500 dark:text-gray-400'
)
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-indigo-50 dark:bg-indigo-950 px-2 py-1 ml-3',
children: [
WIcon(
Icons.trending_up,
className: 'text-indigo-600 dark:text-indigo-300 text-xs'
),
WText(
'Steady',
className: 'text-[10px] font-bold text-indigo-700 dark:text-indigo-200 ml-1'
),
],
),
],
),
WDiv(
className: 'relative w-[320px] h-[132px] mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'absolute left-[0px] top-[33px] w-[320px] h-[79px] bg-emerald-50 dark:bg-emerald-950'
),
WDiv(
className: 'absolute left-[0px] top-[33px] w-[320px] h-[1px] bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'absolute left-[0px] top-[112px] w-[320px] h-[1px] bg-emerald-300 dark:bg-emerald-700'
),
WDiv(
className: 'absolute left-[5px] top-[94px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[13px] top-[96px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[21px] top-[99px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[29px] top-[98px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[37px] top-[95px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[45px] top-[91px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[53px] top-[93px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[61px] top-[96px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[69px] top-[83px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[77px] top-[62px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[84px] top-[42px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[92px] top-[37px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[100px] top-[47px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[108px] top-[63px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[116px] top-[76px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[124px] top-[83px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[132px] top-[87px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[140px] top-[80px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[148px] top-[55px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[156px] top-[34px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[164px] top-[26px] w-[6px] h-[6px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[172px] top-[40px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[180px] top-[58px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[188px] top-[73px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[196px] top-[82px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[204px] top-[85px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[212px] top-[87px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[220px] top-[78px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[228px] top-[55px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[236px] top-[39px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[243px] top-[32px] w-[6px] h-[6px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[251px] top-[44px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[259px] top-[62px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[267px] top-[73px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[275px] top-[79px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[283px] top-[82px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[291px] top-[83px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[299px] top-[82px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[307px] top-[85px] w-[6px] h-[6px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[311px] top-[78px] w-[14px] h-[14px] rounded-full bg-indigo-600 dark:bg-indigo-300 border-2 border-white dark:border-gray-900'
),
WDiv(
className: 'absolute left-[8px] top-[17px] flex flex-row items-center',
child: WText(
'180',
className: 'text-[10px] font-semibold text-emerald-600 dark:text-emerald-400'
)
),
WDiv(
className: 'absolute left-[8px] top-[115px] flex flex-row items-center',
child: WText(
'70',
className: 'text-[10px] font-semibold text-emerald-600 dark:text-emerald-400'
)
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[320px] mt-2',
children: [
WText(
'12 AM',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'6 AM',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'12 PM',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'6 PM',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'Now',
className: 'text-[10px] font-bold text-indigo-600 dark:text-indigo-300'
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3',
children: [
WText(
'IN RANGE',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'78%',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'of last 24 h',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'AVERAGE',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'118',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'mg/dL',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'SPIKES',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'2',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'over 180',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-amber-50 dark:bg-amber-950 px-3 py-3 mt-4',
children: [
WIcon(
Icons.schedule,
className: 'text-amber-600 dark:text-amber-300 text-base'
),
WText(
'Lunch spike hit 190 mg/dL at 1:20 PM',
className: 'text-xs font-semibold text-amber-800 dark:text-amber-200 ml-2'
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white px-4 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'View full day report',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
WDiv(
className: 'ml-2',
child: WIcon(
Icons.arrow_forward,
className: 'text-white dark:text-gray-900 text-base'
)
),
],
),
),
),
],
)
Stats
- Views
- 14
- Stars
- 0
- Revisions
- 1
- Size
- 12,205 chars
- Created
- Aug 19, 2026