Flutter Periodic Element Card with Bohr Model Electron Shells
An element of the day card for chemistry and study apps, built with Wind in Flutter. A Bohr model places all 26 electrons of iron on four concentric shells with the valence pair highlighted, shell chips spell out the 2, 8, 14, 2 filling, and a periodic table tile sits beside the configuration, melting point and density.
by Anılcan Çakır
65 views
0 stars
2 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: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-sky-600 dark:bg-sky-500',
child: WIcon(
Icons.science,
className: 'text-xl text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Element of the day',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Transition metal, period 4',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-orange-100 dark:bg-orange-900 px-3 py-1',
child: WText(
'Group 8',
className: 'text-xs font-bold text-orange-700 dark:text-orange-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'relative w-[208px] h-[208px]',
children: [
WDiv(
className: 'absolute left-[70px] top-[70px] w-[68px] h-[68px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[48px] top-[48px] w-[112px] h-[112px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[26px] top-[26px] w-[156px] h-[156px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[4px] top-[4px] w-[200px] h-[200px] rounded-full border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'absolute left-[100px] top-[66px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[100px] top-[134px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[153px] top-[83px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[126px] top-[50px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[83px] top-[47px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[50px] top-[74px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[47px] top-[117px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[74px] top-[150px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[117px] top-[153px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[150px] top-[126px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[177px] top-[91px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[166px] top-[58px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[141px] top-[34px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[108px] top-[22px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[74px] top-[27px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[44px] top-[45px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[26px] top-[75px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[23px] top-[109px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[34px] top-[142px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[59px] top-[166px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[92px] top-[178px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[126px] top-[173px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[156px] top-[155px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[174px] top-[125px] w-[8px] h-[8px] rounded-full bg-sky-600 dark:bg-sky-400'
),
WDiv(
className: 'absolute left-[171px] top-[29px] w-[8px] h-[8px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[29px] top-[171px] w-[8px] h-[8px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[82px] top-[82px] flex flex-row items-center justify-center w-[44px] h-[44px] rounded-full bg-orange-600 dark:bg-orange-500',
child: WText(
'Fe',
className: 'text-base font-bold text-white'
)
),
]
)
),
WDiv(
className: 'flex flex-row items-center justify-center gap-2 w-full mt-4',
children: [
WDiv(
className: 'rounded-full bg-sky-50 dark:bg-sky-900 px-3 py-1',
child: WText(
'K 2',
className: 'text-[11px] font-bold text-sky-700 dark:text-sky-300'
)
),
WDiv(
className: 'rounded-full bg-sky-50 dark:bg-sky-900 px-3 py-1',
child: WText(
'L 8',
className: 'text-[11px] font-bold text-sky-700 dark:text-sky-300'
)
),
WDiv(
className: 'rounded-full bg-sky-50 dark:bg-sky-900 px-3 py-1',
child: WText(
'M 14',
className: 'text-[11px] font-bold text-sky-700 dark:text-sky-300'
)
),
WDiv(
className: 'rounded-full bg-amber-100 dark:bg-amber-900 px-3 py-1',
child: WText(
'N 2 valence',
className: 'text-[11px] font-bold text-amber-700 dark:text-amber-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center gap-4 w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[84px] rounded-xl border-2 border-orange-500 dark:border-orange-400 bg-orange-50 dark:bg-orange-900 px-2 py-2',
children: [
WText(
'26',
className: 'text-[11px] font-bold text-orange-700 dark:text-orange-300'
),
WText(
'Fe',
className: 'text-[30px] font-black text-gray-900 dark:text-white'
),
WText(
'Iron',
className: 'text-[11px] font-semibold text-gray-700 dark:text-gray-200'
),
WText(
'55.845',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-col gap-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'CONFIGURATION',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'[Ar] 3d⁶ 4s²',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'flex flex-row gap-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'MELTS',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'1538 °C',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'DENSITY',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'7.874 g/cm³',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
]
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-sky-600 dark:bg-sky-500 py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.add,
className: 'text-base text-white'
),
WText(
'Add iron to study deck',
className: 'text-sm font-semibold text-white'
),
]
)
)
),
],
)
Stats
- Views
- 65
- Stars
- 0
- Revisions
- 1
- Size
- 10,361 chars
- Created
- Sep 23, 2026