Flutter Box Model Inspector Card with Nested Spacing Layers
A DevTools style inspector panel that unpacks a single Wind className into its real geometry: nested margin, border, padding and content layers, each labelled with the utility that produced it. The whole diagram is plain WDiv nesting with Tailwind syntax classNames, no custom painter and no layout maths in Dart.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5 border border-gray-200 dark:border-gray-800',
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-10 h-10 rounded-xl bg-indigo-500 dark:bg-indigo-600',
child: WIcon(
Icons.code,
className: 'text-lg text-white dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'ProductTile',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Container, depth 12',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-indigo-50 dark:bg-indigo-900 px-3 py-1',
child: WText(
'SELECTED',
className: 'text-[9px] font-bold tracking-wide text-indigo-600 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2 mt-4',
child: WText(
'm-4 border-2 p-3 rounded-xl',
className: 'text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'flex flex-col items-center w-[300px] h-[170px] rounded-xl bg-rose-100 dark:bg-rose-900 pt-1',
children: [
WText(
'm-4',
className: 'text-[9px] font-bold tracking-wide text-rose-600 dark:text-rose-300'
),
WDiv(
className: 'flex flex-col items-center w-[248px] h-[128px] rounded-xl bg-amber-200 dark:bg-amber-900 pt-1 mt-1',
children: [
WText(
'border-2',
className: 'text-[9px] font-bold tracking-wide text-amber-700 dark:text-amber-200'
),
WDiv(
className: 'flex flex-col items-center w-[204px] h-[86px] rounded-lg bg-emerald-200 dark:bg-emerald-900 pt-1 mt-1',
children: [
WText(
'p-3',
className: 'text-[9px] font-bold tracking-wide text-emerald-700 dark:text-emerald-200'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[152px] h-[44px] rounded-md bg-indigo-500 dark:bg-indigo-600 mt-1',
child: WText(
'296 x 48',
className: 'text-[11px] font-bold text-white dark:text-white'
),
),
],
),
],
),
],
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'328',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'WIDTH',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'96',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'HEIGHT',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
children: [
WText(
'12',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'DEPTH',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-xl bg-sky-50 dark:bg-sky-900 px-3 py-2 mt-3',
children: [
WIcon(
Icons.info,
className: 'text-base text-sky-500 dark:text-sky-300'
),
WDiv(
className: 'ml-2',
child: WText(
'p-3 resolves to 12 logical pixels',
className: 'text-[11px] font-medium text-sky-700 dark:text-sky-200'
),
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WText(
'Copy className',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Benzer örnekler
-
Flutter File Permission Card with rwx Grid and Octal Mode Readout
A Flutter file permission card for DevOps dashboards, hosting panels and learning apps: a terminal-style grid of owner, group and other against read, write and execute, bits worth 4, 2 and 1 summing to the octal digits of mode 755, plus the chmod command and the -rwxr-xr-x listing. Built with wind_kit.
-
Flutter Contrast Checker Card with WCAG AA and AAA Pass Badges
A WCAG 2.2 colour contrast card for design system and accessibility apps: text and background swatches, a live preview of body and large text, the 3.74:1 ratio on a threshold scale, AA and AAA pass or fail tiles for normal and large text, and a one-tap fix to the nearest passing shade.
-
Flutter Subnet Calculator Card with 32 Bit Network and Host Grid
A Flutter subnet calculator card for network and developer tools: an IPv4 address with its CIDR prefix, all 32 bits by octet with network and host bits in two colours, plus network, mask, first and last host, broadcast and usable hosts. A correct /21 worked example built with wind_kit.
