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.
by Anılcan Çakır
79 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
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 flex-row items-center justify-center w-[40px] h-[40px] rounded-xl bg-gray-900 dark:bg-gray-800',
child: WIcon(
Icons.build,
className: 'text-lg text-lime-300 dark:text-lime-300'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Surface level',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Floating shelf, living room',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-amber-100 dark:bg-amber-500/20 px-3 py-1',
child: WText(
'NOT LEVEL',
className: 'text-[10px] font-bold tracking-wide text-amber-700 dark:text-amber-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-end gap-3 mt-4',
children: [
WText(
'2.4°',
className: 'text-5xl font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-col mb-1',
children: [
WText(
'TOTAL TILT',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'Back left corner sits high',
className: 'text-sm font-medium text-gray-700 dark:text-gray-300'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center gap-[24px] w-full mt-4',
children: [
WDiv(
className: 'relative w-[200px] h-[200px] rounded-full bg-gray-800 dark:bg-gray-700',
children: [
WDiv(
className: 'absolute left-[6px] top-[6px] w-[188px] h-[188px] rounded-full bg-lime-200 dark:bg-lime-300'
),
WDiv(
className: 'absolute left-[99px] top-[6px] w-[2px] h-[188px] bg-lime-700/30 dark:bg-lime-900/40'
),
WDiv(
className: 'absolute left-[6px] top-[99px] w-[188px] h-[2px] bg-lime-700/30 dark:bg-lime-900/40'
),
WDiv(
className: 'absolute left-[63px] top-[60px] w-[36px] h-[36px] rounded-full bg-white/70 dark:bg-white/70 border border-lime-500 dark:border-lime-600'
),
WDiv(
className: 'absolute left-[72px] top-[67px] w-[10px] h-[6px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[76px] top-[76px] w-[48px] h-[48px] rounded-full border-2 border-lime-700/50 dark:border-lime-900/60'
),
WDiv(
className: 'absolute left-[44px] top-[44px] w-[112px] h-[112px] rounded-full border-2 border-lime-700/50 dark:border-lime-900/60'
),
WDiv(
className: 'absolute left-[14px] top-[14px] w-[172px] h-[172px] rounded-full border-2 border-lime-700/50 dark:border-lime-900/60'
),
]
),
WDiv(
className: 'relative w-[32px] h-[200px] rounded-full bg-lime-200 dark:bg-lime-300 border-2 border-gray-800 dark:border-gray-700',
children: [
WDiv(
className: 'absolute left-[6px] top-[44px] w-[20px] h-[40px] rounded-full bg-white/70 dark:bg-white/70 border border-lime-500 dark:border-lime-600'
),
WDiv(
className: 'absolute left-[11px] top-[50px] w-[6px] h-[10px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[2px] top-[75px] w-[28px] h-[2px] bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[2px] top-[123px] w-[28px] h-[2px] bg-gray-800 dark:bg-gray-900'
),
]
),
]
),
WDiv(
className: 'relative w-[300px] h-[32px] rounded-full bg-lime-200 dark:bg-lime-300 border-2 border-gray-800 dark:border-gray-700 mt-4',
children: [
WDiv(
className: 'absolute left-[98px] top-[6px] w-[40px] h-[20px] rounded-full bg-white/70 dark:bg-white/70 border border-lime-500 dark:border-lime-600'
),
WDiv(
className: 'absolute left-[106px] top-[10px] w-[10px] h-[6px] rounded-full bg-white dark:bg-white'
),
WDiv(
className: 'absolute left-[125px] top-[2px] w-[2px] h-[28px] bg-gray-800 dark:bg-gray-900'
),
WDiv(
className: 'absolute left-[173px] top-[2px] w-[2px] h-[28px] bg-gray-800 dark:bg-gray-900'
),
]
),
WDiv(
className: 'flex flex-row gap-2 w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'-1.6°',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'ROLL',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'+1.8°',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'PITCH',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-lime-50 dark:bg-lime-500/10 px-3 py-2',
children: [
WText(
'±0.5°',
className: 'text-base font-bold text-lime-700 dark:text-lime-300'
),
WText(
'TARGET',
className: 'text-[9px] font-bold tracking-widest text-lime-600 dark:text-lime-400'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Set as reference',
className: 'text-sm font-semibold text-center text-white dark:text-gray-900'
)
)
),
],
)
Stats
- Views
- 79
- Stars
- 0
- Revisions
- 1
- Size
- 6,914 chars
- Created
- Sep 21, 2026