Flutter Seven Segment Display Card with Lit LED Digits and Register Byte Decoder
A seven segment LED card for embedded, IoT and maker apps: a four digit red display reading 12.45 with unlit segments still glowing faintly, an enlarged digit with segments A to G and the decimal point labelled, its MAX7219 no-decode register byte 0xED in hex and binary, and a DP to G bit strip from D7 to D0.
by Anılcan Çakır
73 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
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-10 h-10 rounded-xl bg-red-500 dark:bg-red-500',
child: WIcon(
Icons.code,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Segment Decoder',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'MAX7219 no-decode mode',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-red-50 dark:bg-red-900/40 px-3 py-1',
child: WText(
'4 digits',
className: 'text-xs font-bold text-red-600 dark:text-red-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4 rounded-2xl bg-[#160909] dark:bg-[#160909] py-5',
child: WDiv(
className: 'relative w-[196px] h-[77px]',
children: [
WDiv(
className: 'absolute left-[7px] top-[0px] w-[22px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[0px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[30px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[7px] top-[30px] w-[22px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[0px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[30px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[7px] top-[60px] w-[22px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[40px] top-[60px] w-[6px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[57px] top-[0px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[50px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[80px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[57px] top-[30px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[50px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[80px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[57px] top-[60px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[90px] top-[60px] w-[6px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[107px] top-[0px] w-[22px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[100px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[130px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[107px] top-[30px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[100px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[130px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[107px] top-[60px] w-[22px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[140px] top-[60px] w-[6px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[157px] top-[0px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[150px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[180px] top-[7px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[157px] top-[30px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[150px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[180px] top-[37px] w-[6px] h-[22px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[157px] top-[60px] w-[22px] h-[6px] rounded-full bg-[#ff3b30] dark:bg-[#ff3b30]'
),
WDiv(
className: 'absolute left-[190px] top-[60px] w-[6px] h-[6px] rounded-full bg-[#4a1c1c] dark:bg-[#4a1c1c]'
),
WDiv(
className: 'absolute left-[50px] top-[74px] w-[36px] h-[3px] rounded-full bg-amber-400 dark:bg-amber-400'
)
]
)
),
WDiv(
className: 'flex flex-row items-center gap-6 w-full mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800 px-5 py-4',
children: [
WDiv(
className: 'relative w-[92px] h-[130px]',
children: [
WText(
'A',
className: 'absolute left-[16px] top-[0px] w-[40px] h-[14px] rounded-full text-center text-[10px] font-bold bg-red-500 dark:bg-red-500 text-white'
),
WDiv(
className: 'absolute left-[0px] top-[16px] w-[14px] h-[40px] rounded-full flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-700',
child: WText(
'F',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'absolute left-[58px] top-[16px] w-[14px] h-[40px] rounded-full flex flex-col items-center justify-center bg-red-500 dark:bg-red-500',
child: WText(
'B',
className: 'text-[10px] font-bold text-white'
)
),
WText(
'G',
className: 'absolute left-[16px] top-[58px] w-[40px] h-[14px] rounded-full text-center text-[10px] font-bold bg-red-500 dark:bg-red-500 text-white'
),
WDiv(
className: 'absolute left-[0px] top-[74px] w-[14px] h-[40px] rounded-full flex flex-col items-center justify-center bg-red-500 dark:bg-red-500',
child: WText(
'E',
className: 'text-[10px] font-bold text-white'
)
),
WDiv(
className: 'absolute left-[58px] top-[74px] w-[14px] h-[40px] rounded-full flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-700',
child: WText(
'C',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
)
),
WText(
'D',
className: 'absolute left-[16px] top-[116px] w-[40px] h-[14px] rounded-full text-center text-[10px] font-bold bg-red-500 dark:bg-red-500 text-white'
),
WDiv(
className: 'absolute left-[78px] top-[116px] w-[14px] h-[14px] rounded-full bg-red-500 dark:bg-red-500'
)
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'DIGIT 2 BYTE',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'0xED',
className: 'text-3xl font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'1110 1101',
className: 'text-sm font-medium text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row items-center mt-3',
child: WDiv(
className: 'rounded-full bg-red-100 dark:bg-red-900/40 px-2 py-1',
child: WText(
'5 segments + DP',
className: 'text-[11px] font-bold text-red-700 dark:text-red-300'
)
)
),
]
),
]
),
WDiv(
className: 'flex flex-col items-center w-full mt-4',
children: [
WDiv(
className: 'flex flex-row gap-[3px]',
children: [
WText(
'DP',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'A',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'B',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'C',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'D',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'E',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'F',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
WText(
'G',
className: 'w-[34px] text-center text-[10px] font-bold text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-row gap-[3px] mt-1',
children: [
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
),
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
),
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
),
WText(
'0',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
),
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
),
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
),
WText(
'0',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
),
WText(
'1',
className: 'w-[34px] h-[28px] rounded-md border text-center text-sm font-bold pt-[5px] bg-red-500 dark:bg-red-500 border-red-500 dark:border-red-500 text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-[293px] mt-1',
children: [
WText(
'D7',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'MSB first',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'D0',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Write register',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
WIcon(
Icons.arrow_forward,
className: 'text-white dark:text-gray-900 text-base'
),
]
)
)
),
]
)
Stats
- Views
- 73
- Stars
- 0
- Revisions
- 1
- Size
- 14,264 chars
- Created
- Oct 14, 2026