Flutter Braille Learning Card with Six Dot Letter Cells
A Braille learning card built with Wind: the name Louis spelled in six dot cells with the capital sign, raised and flat dots, the matching Unicode Braille line, a numbered dot key that explains the letter in focus, and alphabet progress. Every cell follows Unified English Braille. Pure Tailwind-style className utilities, ready for accessibility, education and language learning apps.
by Anılcan Çakır
101 views
0 stars
3 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: 'relative w-10 h-10 rounded-xl bg-indigo-600 dark:bg-indigo-500',
children: [
WDiv(
className: 'absolute left-[13px] top-[10px] w-[6px] h-[6px] rounded-full bg-white'
),
WDiv(
className: 'absolute left-[13px] top-[17px] w-[6px] h-[6px] rounded-full bg-white'
),
WDiv(
className: 'absolute left-[13px] top-[24px] w-[6px] h-[6px] rounded-full bg-white'
),
WDiv(
className: 'absolute left-[21px] top-[10px] w-[6px] h-[6px] rounded-full bg-white'
),
WDiv(
className: 'absolute left-[21px] top-[17px] w-[6px] h-[6px] rounded-full bg-white'
),
WDiv(
className: 'absolute left-[21px] top-[24px] w-[6px] h-[6px] rounded-full bg-white'
)
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Braille basics',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Unified English Braille',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-indigo-50 dark:bg-indigo-900 px-3 py-1',
child: WText(
'Lesson 4',
className: 'text-xs font-bold text-indigo-700 dark:text-indigo-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'Spell “Louis”',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'⠠⠇⠕⠥⠊⠎',
className: 'text-xl text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-start justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
)
]
),
WText(
'Cap',
className: 'text-xs text-gray-500 dark:text-gray-400 font-semibold'
)
]
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
)
]
),
WText(
'L',
className: 'text-xs text-gray-500 dark:text-gray-400 font-semibold'
)
]
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
)
]
),
WText(
'O',
className: 'text-xs text-gray-500 dark:text-gray-400 font-semibold'
)
]
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
)
]
),
WText(
'U',
className: 'text-xs text-indigo-600 dark:text-indigo-400 font-bold'
)
]
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
)
]
),
WText(
'I',
className: 'text-xs text-gray-500 dark:text-gray-400 font-semibold'
)
]
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WDiv(
className: 'relative w-[44px] h-[62px] rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950',
children: [
WDiv(
className: 'absolute left-[8px] top-[8px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[8px] top-[24px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[8px] top-[40px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[8px] w-[10px] h-[10px] rounded-full bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[22px] top-[24px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[22px] top-[40px] w-[10px] h-[10px] rounded-full border border-gray-300 dark:border-gray-600'
)
]
),
WText(
'S',
className: 'text-xs text-gray-500 dark:text-gray-400 font-semibold'
)
]
)
]
),
WDiv(
className: 'flex flex-row items-center gap-4 w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-3 mt-4',
children: [
WDiv(
className: 'relative w-[58px] h-[80px] rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700',
children: [
WText(
'1',
className: 'absolute left-[6px] top-[6px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white'
),
WText(
'2',
className: 'absolute left-[6px] top-[30px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] border border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
),
WText(
'3',
className: 'absolute left-[6px] top-[54px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white'
),
WText(
'4',
className: 'absolute left-[32px] top-[6px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] border border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
),
WText(
'5',
className: 'absolute left-[32px] top-[30px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] border border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
),
WText(
'6',
className: 'absolute left-[32px] top-[54px] w-[20px] h-[20px] rounded-full text-center text-[11px] font-bold pt-[2px] bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white'
)
]
),
WDiv(
className: 'flex flex-col w-[190px]',
children: [
WText(
'U is dots 1, 3 and 6',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Count 1, 2, 3 down the left column, then 4, 5, 6 down the right. U is K plus dot 6.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-1'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'Alphabet progress',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'12 of 26 letters',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-gray-200 dark:bg-gray-700 mt-2',
child: WDiv(
className: 'w-[138px] h-2 rounded-full bg-indigo-600 dark:bg-indigo-500'
)
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3',
child: WText(
'Start the tactile quiz',
className: 'text-sm font-semibold text-center text-white'
)
)
),
],
)
Stats
- Views
- 101
- Stars
- 0
- Revisions
- 1
- Size
- 14,742 chars
- Created
- Oct 4, 2026