Flutter Beehive Inspection Card with Stacked Box Layers
A hive record card built as the hive itself: outer cover, honey supers, queen excluder, brood box, and bottom board rendered as overlapping layers, each carrying its own frame count and status pill. Negative margins do the stacking, styled with Wind utility classes and full dark-mode pairs.
by Anılcan Çakır
63 views
0 stars
2 weeks 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-amber-500 dark:bg-amber-500',
child: WText(
'07',
className: 'text-base font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Hive 07',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Apiary North | Checked today',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-emerald-100 dark:bg-emerald-500 px-2.5 py-1',
child: WText(
'Strong',
className: 'text-[11px] font-bold text-emerald-700 dark:text-gray-900'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-6',
children: [
WText(
'HIVE STACK',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'3 boxes | 30 frames',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full h-6 rounded-t-xl border-2 border-amber-800 dark:border-amber-700 bg-amber-700 dark:bg-amber-800 mt-2.5',
child: WText(
'OUTER COVER',
className: 'text-[9px] font-bold tracking-wide text-amber-100 dark:text-amber-100'
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full h-14 rounded-md border-2 border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-gray-800 px-3 -mt-1',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Super 2',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'6 of 10 drawn',
className: 'text-[11px] text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
WDiv(
className: 'rounded-full bg-amber-200 dark:bg-amber-600 px-2 py-0.5',
child: WText(
'Building',
className: 'text-[10px] font-bold text-amber-800 dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full h-14 rounded-md border-2 border-emerald-400 dark:border-emerald-500 bg-emerald-50 dark:bg-gray-800 px-3 -mt-1',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Super 1',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'10 of 10 capped, 18.4 kg',
className: 'text-[11px] text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-emerald-500 dark:bg-emerald-500 px-2 py-0.5',
children: [
WIcon(
Icons.check_circle,
className: 'text-white dark:text-white text-xs'
),
WText(
'Pull',
className: 'text-[10px] font-bold text-white dark:text-white ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full h-5 border-2 border-gray-400 dark:border-gray-500 bg-gray-200 dark:bg-gray-700 -mt-1',
child: WText(
'QUEEN EXCLUDER',
className: 'text-[9px] font-bold tracking-wide text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full h-16 rounded-md border-2 border-amber-500 dark:border-amber-500 bg-amber-100 dark:bg-gray-800 px-3 -mt-1',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Brood Box',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'9 of 10 frames | brood on 7',
className: 'text-[11px] text-gray-500 dark:text-gray-400 mt-0.5'
),
],
),
WDiv(
className: 'rounded-full bg-amber-500 dark:bg-amber-500 px-2 py-0.5',
child: WText(
'Queen seen',
className: 'text-[10px] font-bold text-white dark:text-gray-900'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full h-6 rounded-b-xl border-2 border-amber-800 dark:border-amber-700 bg-amber-700 dark:bg-amber-800 -mt-1',
child: WText(
'BOTTOM BOARD | ENTRANCE REDUCER ON',
className: 'text-[9px] font-bold tracking-wide text-amber-100 dark:text-amber-100'
),
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-3 mt-5',
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.trending_up,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Up 4.8 kg this week',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'Nectar flow strong, add Super 3',
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-amber-500 dark:bg-amber-500 py-3.5',
child: WText(
'Log This Inspection',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-3',
child: WText(
'Queen marked yellow, 2025 | Varroa 2 per 100',
className: 'text-[11px] text-gray-400 dark:text-gray-500'
),
),
],
)
Stats
- Views
- 63
- Stars
- 0
- Revisions
- 1
- Size
- 6,949 chars
- Created
- Aug 5, 2026