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.
by Anılcan Çakır
12 views
0 stars
6 days ago
Rev 1
main.dart
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',
),
],
),
],
),
],
),
],
)
Stats
- Views
- 12
- Stars
- 0
- Revisions
- 1
- Size
- 7,308 chars
- Created
- Jun 18, 2026