Flutter Family Tree Card with Generation Branch Connectors
A genealogy card that draws three generations as a real pedigree: spouse pairs joined by marriage bars, a drop line into the next generation, and a distribution rule that branches down into each child. Every connector is a fixed-pixel Wind div, so the whole tree is className strings with no custom painter and no canvas.
by Anılcan Çakır
48 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Family Tree',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Hayes lineage, 3 generations',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-indigo-50 dark:bg-indigo-500 px-2 py-1',
child: WText(
'7 people',
className: 'text-[10px] font-bold text-indigo-600 dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center w-[140px] rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-full bg-slate-500 dark:bg-slate-400',
child: WText(
'RH',
className: 'text-[9px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Robert Hayes',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'1938 - 2011',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'w-5 h-[2px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'flex flex-row items-center w-[140px] rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-full bg-rose-400 dark:bg-rose-500',
child: WText(
'MH',
className: 'text-[9px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Margaret Hayes',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'1941 - 2019',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WDiv(
className: 'w-[2px] h-4 bg-gray-400 dark:bg-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
children: [
WDiv(
className: 'flex flex-row items-center w-[140px] rounded-lg border border-indigo-200 dark:border-indigo-500 bg-indigo-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'DH',
className: 'text-[9px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Daniel Hayes',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'b. 1968 (you)',
className: 'text-[9px] font-semibold text-indigo-600 dark:text-indigo-300'
),
],
),
],
),
WDiv(
className: 'w-5 h-[2px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'flex flex-row items-center w-[140px] rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-full bg-teal-500 dark:bg-teal-400',
child: WText(
'CH',
className: 'text-[9px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Clara Hayes',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'b. 1971',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WDiv(
className: 'w-[2px] h-4 bg-gray-400 dark:bg-gray-500'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WDiv(
className: 'w-[216px] h-[2px] bg-gray-400 dark:bg-gray-500'
),
),
WDiv(
className: 'flex flex-row items-start justify-center w-full gap-2',
children: [
WDiv(
className: 'flex flex-col items-center w-[100px]',
children: [
WDiv(
className: 'w-[2px] h-3 bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'flex flex-row items-center w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-5 h-5 rounded-full bg-amber-500 dark:bg-amber-400',
child: WText(
'N',
className: 'text-[8px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Noah',
className: 'text-[10px] font-bold text-gray-900 dark:text-white'
),
WText(
'b. 1996',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-col items-center w-[100px]',
children: [
WDiv(
className: 'w-[2px] h-3 bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'flex flex-row items-center w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-5 h-5 rounded-full bg-sky-500 dark:bg-sky-400',
child: WText(
'E',
className: 'text-[8px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Elif',
className: 'text-[10px] font-bold text-gray-900 dark:text-white'
),
WText(
'b. 1999',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-col items-center w-[100px]',
children: [
WDiv(
className: 'w-[2px] h-3 bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'flex flex-row items-center w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-2 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-5 h-5 rounded-full bg-violet-500 dark:bg-violet-400',
child: WText(
'M',
className: 'text-[8px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Mia',
className: 'text-[10px] font-bold text-gray-900 dark:text-white'
),
WText(
'b. 2003',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-xl bg-indigo-600 dark:bg-indigo-500 py-3 flex flex-row items-center justify-center',
child: WText(
'View full pedigree',
className: 'text-sm font-bold text-white'
),
),
),
],
)
Stats
- Views
- 48
- Stars
- 0
- Revisions
- 1
- Size
- 9,729 chars
- Created
- Aug 10, 2026