Flutter Factory Andon Board Card with Line Station Status
A shop floor Andon board for an industrial operations app: shift output against target on a progress bar, an OEE badge, five station rows with running, idle and stopped colour coding, cycle times, and a status legend with total downtime. A good example of Wind status colour semantics carried by a square station tile plus a two-line label.
by Anılcan Çakır
89 views
0 stars
4 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-amber-50 dark:bg-amber-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.settings,
className: 'text-amber-600 dark:text-amber-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Assembly Line 3',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Shift B | 14:20',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center px-3 py-1 rounded-full bg-rose-100 dark:bg-rose-800',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-rose-500 dark:bg-rose-300'
),
WText(
'1 stopped',
className: 'text-xs font-semibold text-rose-700 dark:text-rose-100 ml-1.5'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'1,842',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'of 2,100 target',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-2'
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-sky-100 dark:bg-sky-800',
child: WText(
'OEE 87%',
className: 'text-xs font-bold text-sky-700 dark:text-sky-100'
),
),
],
),
WDiv(
className: 'w-full h-3 rounded-full bg-gray-100 dark:bg-gray-800 mt-3',
child: WDiv(
className: 'w-[295px] h-3 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-xl bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'ST1',
className: 'text-[10px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Frame Press',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Running | 42 s cycle',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WText(
'418',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-xl bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'ST2',
className: 'text-[10px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Weld Cell',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Running | 38 s cycle',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WText(
'402',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-xl bg-amber-500 dark:bg-amber-400 flex flex-row items-center justify-center',
child: WText(
'ST3',
className: 'text-[10px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Paint Booth',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Idle | waiting on ST2',
className: 'text-xs font-medium text-amber-600 dark:text-amber-400'
),
],
),
],
),
WText(
'361',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-xl bg-rose-500 dark:bg-rose-400 flex flex-row items-center justify-center',
child: WText(
'ST4',
className: 'text-[10px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Torque Station',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Stopped 6 min | tool fault',
className: 'text-xs font-medium text-rose-600 dark:text-rose-400'
),
],
),
],
),
WText(
'329',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-xl bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'ST5',
className: 'text-[10px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Final Inspection',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Running | 2 rework',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WText(
'332',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WText(
'3 running',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
WText(
'1 idle',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-rose-500 dark:bg-rose-400'
),
WText(
'12 min downtime',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Acknowledge Andon Call',
className: 'text-white dark:text-gray-900 text-center font-semibold text-sm'
),
),
),
],
)
Stats
- Views
- 89
- Stars
- 0
- Revisions
- 1
- Size
- 10,231 chars
- Created
- Jul 27, 2026