Flutter Home Energy Usage Panel with Room Breakdown
A smart-home energy dashboard with today's total kWh, a savings trend badge, and per-room consumption bars. Built for home automation and utility apps.
WDiv(
className: 'mx-auto 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',
children: [
WText(
'Energy Today',
className: 'text-base font-bold text-gray-900 dark:text-white',
),
WText(
'Updated 2 min ago',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-emerald-100 dark:bg-emerald-500/20',
children: [
WIcon(
Icons.trending_up,
className: 'text-emerald-600 text-sm dark:text-emerald-300',
),
WText(
'12% less',
className: 'text-xs font-bold text-emerald-700 dark:text-emerald-300',
),
],
),
],
),
WDiv(
className: 'flex flex-row items-baseline gap-2',
children: [
WText(
'8.4',
className: 'text-4xl font-extrabold text-gray-900 dark:text-white',
),
WText(
'kWh used today',
className: 'text-sm font-medium text-gray-500 dark:text-gray-400',
),
],
),
WDiv(
className: 'flex flex-col gap-4 w-full',
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-9 h-9 rounded-xl bg-amber-100 dark:bg-amber-500/20',
child: WIcon(
Icons.home,
className: 'text-amber-600 text-base dark:text-amber-300',
),
),
WText(
'Living Room',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center w-24 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'h-2 w-[78px] rounded-full bg-amber-500 dark:bg-amber-500',
child: WSpacer(
className: 'w-[78px] h-2',
),
),
),
WText(
'2.1',
className: 'text-sm font-bold text-gray-900 dark:text-white',
),
],
),
],
),
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-9 h-9 rounded-xl bg-rose-100 dark:bg-rose-500/20',
child: WIcon(
Icons.bolt,
className: 'text-rose-600 text-base dark:text-rose-300',
),
),
WText(
'Kitchen',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center w-24 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'h-2 w-[60px] rounded-full bg-rose-500 dark:bg-rose-500',
child: WSpacer(
className: 'w-[60px] h-2',
),
),
),
WText(
'1.6',
className: 'text-sm font-bold text-gray-900 dark:text-white',
),
],
),
],
),
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-9 h-9 rounded-xl bg-sky-100 dark:bg-sky-500/20',
child: WIcon(
Icons.ac_unit,
className: 'text-sky-600 text-base dark:text-sky-300',
),
),
WText(
'Bedroom',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center w-24 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'h-2 w-[34px] rounded-full bg-sky-500 dark:bg-sky-500',
child: WSpacer(
className: 'w-[34px] h-2',
),
),
),
WText(
'0.9',
className: 'text-sm font-bold text-gray-900 dark:text-white',
),
],
),
],
),
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-9 h-9 rounded-xl bg-violet-100 dark:bg-violet-500/20',
child: WIcon(
Icons.wifi,
className: 'text-violet-600 text-base dark:text-violet-300',
),
),
WText(
'Office',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center w-24 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'h-2 w-[48px] rounded-full bg-violet-500 dark:bg-violet-500',
child: WSpacer(
className: 'w-[48px] h-2',
),
),
),
WText(
'1.3',
className: 'text-sm font-bold text-gray-900 dark:text-white',
),
],
),
],
),
],
),
],
)
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.
