Flutter Tire Pressure Card with Four Corner Wheel Readout
A TPMS panel that maps live psi onto the car itself: four corner tiles around a center chassis, the low tire flagged in amber with the exact top up amount, plus recommended pressure, tire temperature, and the nearest air pump.
by Anılcan Çakır
79 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-sky-50 dark:bg-sky-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.directions_car,
className: 'text-sky-600 dark:text-sky-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Tire pressure',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Nova EV | Read 6 min ago',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
child: WText(
'1 low',
className: 'text-xs font-semibold text-amber-700 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-6',
children: [
WDiv(
className: 'flex flex-col gap-3',
children: [
WDiv(
className: 'w-[132px] rounded-2xl bg-emerald-50 dark:bg-gray-800 border border-emerald-200 dark:border-emerald-700 p-3',
children: [
WText(
'FRONT LEFT',
className: 'text-[10px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'36 psi',
className: 'text-xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-xs'
),
WText(
'Normal',
className: 'text-xs font-medium text-emerald-600 dark:text-emerald-400 ml-1'
),
],
),
],
),
WDiv(
className: 'w-[132px] rounded-2xl bg-emerald-50 dark:bg-gray-800 border border-emerald-200 dark:border-emerald-700 p-3',
children: [
WText(
'REAR LEFT',
className: 'text-[10px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'35 psi',
className: 'text-xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-xs'
),
WText(
'Normal',
className: 'text-xs font-medium text-emerald-600 dark:text-emerald-400 ml-1'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-col items-center',
children: [
WDiv(
className: 'w-0.5 h-8 rounded-full bg-gray-200 dark:bg-gray-700'
),
WDiv(
className: 'w-11 h-11 rounded-full bg-gray-900 dark:bg-white flex flex-row items-center justify-center',
child: WIcon(
Icons.directions_car,
className: 'text-white dark:text-gray-900 text-xl'
),
),
WDiv(
className: 'w-0.5 h-8 rounded-full bg-gray-200 dark:bg-gray-700'
),
],
),
WDiv(
className: 'flex flex-col gap-3',
children: [
WDiv(
className: 'w-[132px] rounded-2xl bg-amber-50 dark:bg-gray-800 border border-amber-300 dark:border-amber-600 p-3',
children: [
WText(
'FRONT RIGHT',
className: 'text-[10px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'28 psi',
className: 'text-xl font-extrabold text-amber-600 dark:text-amber-400'
),
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.warning,
className: 'text-amber-500 dark:text-amber-400 text-xs'
),
WText(
'Add 8 psi',
className: 'text-xs font-medium text-amber-600 dark:text-amber-400 ml-1'
),
],
),
],
),
WDiv(
className: 'w-[132px] rounded-2xl bg-emerald-50 dark:bg-gray-800 border border-emerald-200 dark:border-emerald-700 p-3',
children: [
WText(
'REAR RIGHT',
className: 'text-[10px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'35 psi',
className: 'text-xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-xs'
),
WText(
'Normal',
className: 'text-xs font-medium text-emerald-600 dark:text-emerald-400 ml-1'
),
],
),
],
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-6'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'36 psi',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Recommended',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'21 C',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Tire temp',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'1,200 mi',
className: 'text-base font-bold text-sky-600 dark:text-sky-400'
),
WText(
'To rotation',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-4 mt-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.location_on,
className: 'text-gray-400 dark:text-gray-500 text-base'
),
WDiv(
className: 'flex flex-col ml-2.5',
children: [
WText(
'Air pump 0.6 mi away',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Shell on Bahar Street, open now',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WIcon(
Icons.chevron_right,
className: 'text-gray-300 dark:text-gray-600 text-base'
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-sky-600 dark:bg-sky-500 py-3',
child: WText(
'Start Guided Inflation',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
Stats
- Views
- 79
- Stars
- 0
- Revisions
- 1
- Size
- 9,105 chars
- Created
- Jul 30, 2026