Tüm örnekler
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.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5 border border-gray-200 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-emerald-500 dark:bg-emerald-600',
child: WIcon(
Icons.bolt,
className: 'text-lg text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Pack A, 12S1P',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'BMS firmware 4.2.1',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-amber-50 dark:bg-amber-900 px-3 py-1',
child: WText(
'BALANCING',
className: 'text-[9px] font-bold tracking-wide text-amber-700 dark:text-amber-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'44.18 V',
className: 'text-2xl font-bold text-gray-900 dark:text-white'
),
WText(
'PACK VOLTAGE',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WDiv(
className: 'flex flex-row items-center rounded-lg bg-emerald-500 dark:bg-emerald-600 px-2 py-1',
child: WText(
'87%',
className: 'text-sm font-bold text-white dark:text-white'
),
),
WDiv(
className: 'mt-1',
child: WText(
'state of charge',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'CELL 1 TO 12',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'3.64 to 3.72 V',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-end gap-2 w-[316px]',
children: [
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.68',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[23px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.67',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[19px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.69',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[27px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-rose-300 dark:border-rose-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.65',
className: 'text-[9px] font-bold text-rose-600 dark:text-rose-300'
),
WDiv(
className: 'w-[42px] h-[10px] rounded-b-md bg-rose-400 dark:bg-rose-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.68',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[23px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.70',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[32px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end gap-2 w-[316px] mt-2',
children: [
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.69',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[27px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.66',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[14px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.68',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[23px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-amber-400 dark:border-amber-500 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.71',
className: 'text-[9px] font-bold text-amber-700 dark:text-amber-300'
),
WDiv(
className: 'w-[42px] h-[36px] rounded-b-md bg-amber-400 dark:bg-amber-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.69',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[27px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-col items-center justify-between w-[46px] h-[56px] rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 pt-1',
children: [
WText(
'3.68',
className: 'text-[9px] font-bold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'w-[42px] h-[23px] rounded-b-md bg-emerald-400 dark:bg-emerald-500'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'60 mV',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'DELTA',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'31 C',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'TEMP',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'412',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'CYCLES',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-xl bg-amber-50 dark:bg-amber-900 px-3 py-2 mt-3',
children: [
WIcon(
Icons.warning,
className: 'text-base text-amber-500 dark:text-amber-300'
),
WDiv(
className: 'ml-2',
child: WText(
'Bleeding cell 10 at 1.8 A to close the delta',
className: 'text-[11px] font-medium text-amber-800 dark:text-amber-200'
),
),
],
),
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 py-3',
child: WText(
'Open pack diagnostics',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
321 satır
Playground'da aç
Benzer örnekler
-
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 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.
-
Flutter Grain Storage Card with Silo Fill Level Gauges
A Flutter grain storage card for farm monitoring apps: each bin drawn as a silo with a bottom-anchored fill level, a 90 percent overfill line across every silo and a flag on the bin that crossed it. Fixed-pixel wind_kit divs, no chart library, no custom painter.
