Flutter Air Quality Index Panel for Smart Home
A dark smart-home panel with a bold air quality index, a color-coded status pill, a teal-to-red gradient scale with a position marker, and humidity, CO2, and temperature sensor chips. 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-slate-900 shadow-xl dark:bg-slate-950',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WIcon(
Icons.home,
className: 'text-teal-400 text-base dark:text-teal-400'
),
WText(
'LIVING ROOM',
className: 'text-xs font-semibold uppercase tracking-widest text-slate-400 dark:text-slate-500'
),
],
),
WIcon(
Icons.cloud,
className: 'text-slate-500 text-base dark:text-slate-500'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-2',
children: [
WText(
'47',
className: 'text-6xl font-extrabold text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-teal-500/15 dark:bg-teal-500/15',
children: [
WIcon(
Icons.check,
className: 'text-teal-400 text-sm dark:text-teal-400'
),
WText(
'Good air quality',
className: 'text-xs font-bold text-teal-400 dark:text-teal-400'
),
],
),
],
),
WDiv(
className: 'relative w-full',
children: [
WDiv(
className: 'w-full h-2 rounded-full bg-gradient-to-r from-teal-400 via-amber-400 to-red-500 dark:from-teal-400 dark:via-amber-400 dark:to-red-500',
child: WSpacer(
className: 'w-[300px] h-2'
),
),
WDiv(
className: 'absolute -top-1 left-[40px] w-4 h-4 rounded-full bg-white border-2 border-slate-900 dark:bg-white dark:border-slate-900',
child: WSpacer(
className: 'w-4 h-4'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full pt-1',
children: [
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WIcon(
Icons.water_drop,
className: 'text-blue-400 text-lg dark:text-blue-400'
),
WText(
'62%',
className: 'text-sm font-bold text-white'
),
WText(
'Humidity',
className: 'text-xs text-slate-400 dark:text-slate-500'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WIcon(
Icons.air,
className: 'text-slate-300 text-lg dark:text-slate-300'
),
WText(
'412 ppm',
className: 'text-sm font-bold text-white'
),
WText(
'CO2',
className: 'text-xs text-slate-400 dark:text-slate-500'
),
],
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WIcon(
Icons.ac_unit,
className: 'text-cyan-300 text-lg dark:text-cyan-300'
),
WText(
'21°C',
className: 'text-sm font-bold text-white'
),
WText(
'Temp',
className: 'text-xs text-slate-400 dark:text-slate-500'
),
],
),
],
),
],
)
More like this
-
Flutter Bubble Level Card with Bullseye and Tilt Vials
A spirit level card for Flutter tool apps, built with Wind: a bullseye vial with target rings and crosshair, vertical and horizontal tube vials with tolerance marks, a big total tilt readout, roll and pitch tiles and a set reference button. Every bubble sits where the stated tilt puts it.
-
Flutter Battery Cell Balancing Card with Per Cell Voltage Gauges
A battery management panel that gives every cell in the pack its own vertical gauge, so a low cell and the one being bled off both stand out at a glance against the pack voltage and delta. Each gauge is a fixed height cell with a bottom anchored fill, which is the vertical twin of the classNames progress bar pattern.
-
Flutter Borehole Log Card with Proportional Soil Strata Column
A Flutter borehole log card for geotechnical and ground investigation apps: soil strata as coloured bands proportional to true thickness, a shared depth rail, SPT blow counts beside each layer and the groundwater strike marked across the column. Aligned wind_kit divs, no chart package.
