Flutter Nutrition Facts Card with Macro Breakdown
A meal nutrition card showing total calories against a daily goal, protein/carbs/fat macro bars, and a micronutrient breakdown with percentage badges. Built with Wind's Tailwind-style className strings and full dark-mode pairs.
WDiv(
className: 'flex flex-col max-w-sm w-full rounded-3xl p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-5',
children: [
WDiv(
children: [
WText(
'Grilled Salmon Bowl',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'1 bowl · 320 g',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full px-3 py-1 bg-emerald-50 dark:bg-emerald-950',
children: [
WIcon(
Icons.check,
className: 'text-sm text-emerald-600 dark:text-emerald-400 mr-1'
),
WText(
'Healthy',
className: 'text-xs font-semibold text-emerald-700 dark:text-emerald-300'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end mb-1',
children: [
WText(
'520',
className: 'text-5xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'kcal',
className: 'text-base font-semibold text-gray-400 dark:text-gray-500 ml-2 mb-2'
),
],
),
WText(
'26% of your 2,000 kcal daily goal',
className: 'text-xs text-gray-500 dark:text-gray-400 mb-3'
),
WDiv(
className: 'flex flex-row w-full h-2 rounded-full bg-gray-100 dark:bg-gray-800 mb-6',
child: WDiv(
className: 'h-2 rounded-full bg-emerald-500 dark:bg-emerald-400 w-24',
child: WSpacer(),
),
),
WDiv(
className: 'flex flex-row justify-between w-full mb-6',
children: [
WDiv(
className: 'flex flex-col w-24',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-2',
children: [
WText(
'Protein',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'42g',
className: 'text-xs font-bold text-blue-600 dark:text-blue-400'
),
],
),
WDiv(
className: 'flex flex-row w-full h-1 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-1 rounded-full bg-blue-500 dark:bg-blue-400 w-20',
child: WSpacer(),
),
),
],
),
WDiv(
className: 'flex flex-col w-24',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-2',
children: [
WText(
'Carbs',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'38g',
className: 'text-xs font-bold text-amber-600 dark:text-amber-400'
),
],
),
WDiv(
className: 'flex flex-row w-full h-1 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-1 rounded-full bg-amber-500 dark:bg-amber-400 w-16',
child: WSpacer(),
),
),
],
),
WDiv(
className: 'flex flex-col w-24',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-2',
children: [
WText(
'Fat',
className: 'text-xs font-medium text-gray-600 dark:text-gray-300'
),
WText(
'18g',
className: 'text-xs font-bold text-rose-600 dark:text-rose-400'
),
],
),
WDiv(
className: 'flex flex-row w-full h-1 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-1 rounded-full bg-rose-500 dark:bg-rose-400 w-10',
child: WSpacer(),
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2 border-t border-gray-100 dark:border-gray-800',
children: [
WText(
'Fiber',
className: 'text-sm text-gray-600 dark:text-gray-300'
),
WDiv(
className: 'rounded-full px-2 py-1 bg-gray-100 dark:bg-gray-800',
child: WText(
'9g · 32%',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2 border-t border-gray-100 dark:border-gray-800',
children: [
WText(
'Sugar',
className: 'text-sm text-gray-600 dark:text-gray-300'
),
WDiv(
className: 'rounded-full px-2 py-1 bg-gray-100 dark:bg-gray-800',
child: WText(
'6g · 7%',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2 border-t border-gray-100 dark:border-gray-800',
children: [
WText(
'Sodium',
className: 'text-sm text-gray-600 dark:text-gray-300'
),
WDiv(
className: 'rounded-full px-2 py-1 bg-gray-100 dark:bg-gray-800',
child: WText(
'480mg · 21%',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200'
),
),
],
),
],
)
More like this
-
Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands
A Flutter hearing test card for health apps: a pure tone audiogram with red circles for the right ear and blue crosses for the left, dotted threshold lines from 250 Hz to 8 kHz, severity bands, per-ear averages and a noise notch callout. Fixed-pixel wind_kit layout that scales cleanly.
-
Flutter Barbell Plate Loader Card with IPF Colour Coded Plates
A Flutter barbell plate loader card for gym and powerlifting apps: a side-on barbell with IPF colour-coded plates stacked heaviest first, competition collars, a per-side breakdown and an attempt strip. Exact maths: 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Built with wind_kit.
-
Flutter Eye Test Card with Snellen Acuity Chart
A vision check card for health and optician apps, built with Wind in Flutter. A real Snellen letter chart shrinks line by line from 20/200 to 20/15, the 20/20 line is highlighted as the last line read, and acuity tiles summarise each eye above a book-an-exam action.
