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.
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'
),
),
],
)
Benzer örnekler
-
Flutter Bookshelf Card with Book Spine Shelves and Reading Goal
A reading tracker card for Flutter book apps, built with Wind: two wooden shelves of book spines in varied heights, colours and foil bands, a flat stack, a bookmark ribbon on the current read, a reading challenge badge and a page progress bar. The spine counts match the goal it reports.
-
Flutter Bubble Level Card with Bullseye and Tilt Vials
A spirit level card for Flutter tool apps, built with Wind: a bullseye vial with target rings and crosshair, vertical and horizontal tube vials with tolerance marks, a big total tilt readout, roll and pitch tiles and a set reference button. Every bubble sits where the stated tilt puts it.
-
Flutter Restaurant Floor Plan Card with Table Occupancy Status
A Flutter restaurant floor plan card for host stand apps: round tops, banquette booths, a communal eight-top and a bar with stools, each table coloured free, seated or held. Every table is a div at a fixed pixel coordinate in wind_kit over WDynamic, no canvas, no image.
