Flutter Dental Chart Card with FDI Tooth Grid
An odontogram card where position is the data: two arches of numbered tooth tiles in FDI notation, colour-coded for crowns, caries, and missing teeth, split by a midline. A legend and a finding note carry the diagnosis, styled with Wind utility classes and full dark-mode pairs.
by Anılcan Çakır
15 views
0 stars
3 days ago
Rev 1
main.dart
WDiv(
className: 'max-w-sm rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-11 h-11 rounded-2xl bg-teal-600 dark:bg-teal-500',
child: WIcon(
Icons.person,
className: 'text-white text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Ayse Demir',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Exam 4 Aug | FDI notation',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-rose-100 dark:bg-rose-500 px-2.5 py-1',
child: WText(
'1 caries',
className: 'text-[11px] font-bold text-rose-700 dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-6',
children: [
WText(
'UPPER ARCH',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'RIGHT | LEFT',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full gap-0.5 mt-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'15',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-amber-100 dark:bg-amber-900 border-2 border-amber-400 dark:border-amber-400',
child: WText(
'14',
className: 'text-[10px] font-bold text-amber-700 dark:text-amber-200'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'13',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'12',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'11',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'w-1'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'21',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'22',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'23',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'24',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'25',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'w-full border-t border-dashed border-gray-200 dark:border-gray-700 mt-3'
),
WDiv(
className: 'flex flex-row items-center w-full gap-0.5 mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-white dark:bg-gray-900 border-2 border-dashed border-gray-300 dark:border-gray-600',
child: WText(
'x',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'44',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'43',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'42',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'41',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'w-1'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'31',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'32',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'33',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-rose-500 dark:bg-rose-500',
child: WText(
'34',
className: 'text-[10px] font-bold text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[29px] h-9 rounded-md bg-gray-100 dark:bg-gray-800',
child: WText(
'35',
className: 'text-[10px] font-bold text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WText(
'LOWER ARCH',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'wrap gap-2 w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-sm bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600'
),
WText(
'Sound',
className: 'text-[10px] font-semibold 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-sm bg-amber-400 dark:bg-amber-400'
),
WText(
'Crown',
className: 'text-[10px] font-semibold 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-sm bg-rose-500 dark:bg-rose-500'
),
WText(
'Caries',
className: 'text-[10px] font-semibold 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-sm bg-white dark:bg-gray-900 border border-dashed border-gray-400 dark:border-gray-500'
),
WText(
'Missing',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-rose-50 dark:bg-gray-800 border border-rose-200 dark:border-rose-500 p-3 mt-4',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-9 h-9 rounded-full bg-white dark:bg-gray-900',
child: WIcon(
Icons.warning,
className: 'text-rose-500 dark:text-rose-400 text-sm'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Tooth 34: occlusal caries',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'Composite filling, 40 min chair time',
className: 'text-[11px] text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-teal-600 dark:bg-teal-500 py-3.5',
child: WText(
'View Treatment Plan',
className: 'text-sm font-bold text-white dark:text-white'
),
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-3',
child: WText(
'Dr. Kaan Yavuz | Riverside Dental',
className: 'text-[11px] text-gray-400 dark:text-gray-500'
),
),
],
)
Stats
- Views
- 15
- Stars
- 0
- Revisions
- 1
- Size
- 11,246 chars
- Created
- Aug 5, 2026