Flutter EV Charging Status Card with Battery Progress
An EV charging status card showing battery percentage, a gradient progress bar, energy added, time remaining, and session cost, with a stop-charging action. Wind-styled with dark-mode support.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-100 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-row items-center gap-3',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-emerald-50 dark:bg-emerald-500/15 flex flex-row items-center justify-center',
child: WIcon(
Icons.directions_car,
className: 'text-xl text-emerald-500 dark:text-emerald-400'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Model Y',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Garage charger',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1.5 rounded-full px-3 py-1 bg-emerald-50 dark:bg-emerald-500/15',
children: [
WIcon(
Icons.bolt,
className: 'text-xs text-emerald-500 dark:text-emerald-400'
),
WText(
'Charging',
className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end gap-1 w-full',
children: [
WText(
'72',
className: 'text-5xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'%',
className: 'text-2xl font-bold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-3 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-3 w-[242px] rounded-full bg-gradient-to-r from-emerald-400 to-green-500',
child: WSpacer(
className: 'w-[242px] h-3'
),
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col gap-0.5',
children: [
WText(
'Added',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'34 kWh',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-0.5',
children: [
WText(
'Time left',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'42 min',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-0.5',
children: [
WText(
'Cost',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'$6.80',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl py-3.5 bg-gray-900 dark:bg-white flex flex-row items-center justify-center',
child: WText(
'Stop charging',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
],
)
Benzer örnekler
-
Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A Flutter navigation lights card for boating and marine apps: a night panel with a top-down hull ringed by the COLREGs Rule 21 arcs, red port and green starboard sidelights at 112.5 degrees, a 225 degree masthead ring, a 135 degree sternlight and Rule 22 visibility ranges. Built with wind_kit.
-
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point
A Flutter runway markings card for aviation and flight training apps: the approach end of runway 27 drawn to scale, with eight threshold stripes, the designator from a 268 degree heading, a dashed centreline and twin aiming point bars, each called out. Absolute positioning in wind_kit.
-
Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A Flutter container ship bay plan card for logistics and terminal apps: a row-by-tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover, a tapered hold, slots coloured by discharge port, plugged reefers and a stowage legend. Built with wind_kit.
