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.
by Anılcan Çakır
49 views
0 stars
1 week ago
Rev 1
main.dart
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'
),
),
),
],
)
Stats
- Views
- 49
- Stars
- 0
- Revisions
- 1
- Size
- 12,172 chars
- Created
- Sep 2, 2026