Flutter Subnet Calculator Card with 32 Bit Network and Host Grid
A subnet calculator card for Flutter developer and network tools, built with Wind utility classes: an IPv4 address with its CIDR prefix, all 32 bits laid out by octet with network bits and host bits in two colours, and the derived network, mask, first and last host, broadcast and usable host count. Every value is computed from the address, so the card is a correct /21 worked example.
by Anılcan Çakır
90 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
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-indigo-600 dark:bg-indigo-500',
child: WIcon(
Icons.public,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Subnet Calculator',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'IPv4 with CIDR prefix',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-indigo-50 dark:bg-indigo-900/40 px-3 py-1',
child: WText(
'Private',
className: 'text-xs font-bold text-indigo-600 dark:text-indigo-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-3',
children: [
WText(
'10.42.17.200',
className: 'text-xl font-bold text-gray-900 dark:text-white'
),
WText(
'/ 21',
className: 'text-xl font-bold text-indigo-600 dark:text-indigo-400'
),
]
),
WDiv(
className: 'flex flex-col w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col w-[142px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WText(
'Octet 1',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'10',
className: 'text-xs font-bold text-gray-800 dark:text-gray-100'
)
]
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
)
]
)
]
),
WDiv(
className: 'flex flex-col w-[142px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WText(
'Octet 2',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'42',
className: 'text-xs font-bold text-gray-800 dark:text-gray-100'
)
]
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
)
]
)
]
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-col w-[142px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WText(
'Octet 3',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'17',
className: 'text-xs font-bold text-gray-800 dark:text-gray-100'
)
]
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-indigo-500 dark:bg-indigo-500 text-white'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
)
]
)
]
),
WDiv(
className: 'flex flex-col w-[142px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-1',
children: [
WText(
'Octet 4',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'200',
className: 'text-xs font-bold text-gray-800 dark:text-gray-100'
)
]
),
WDiv(
className: 'flex flex-row gap-[2px]',
children: [
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'1',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
),
WText(
'0',
className: 'w-[16px] h-[22px] rounded-[4px] text-center text-[11px] font-bold pt-[3px] bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200'
)
]
)
]
)
]
)
]
),
WDiv(
className: 'flex flex-row items-center gap-4 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[3px] bg-indigo-500 dark:bg-indigo-500'
),
WText(
'21 network bits',
className: 'text-[11px] font-medium text-gray-600 dark:text-gray-300'
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-[3px] bg-emerald-200 dark:bg-emerald-800'
),
WText(
'11 host bits',
className: 'text-[11px] font-medium text-gray-600 dark:text-gray-300'
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-4 rounded-2xl border border-gray-200 dark:border-gray-700 px-4 py-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'Network',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'10.42.16.0',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'Subnet mask',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'255.255.248.0',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'First host',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'10.42.16.1',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'Last host',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'10.42.23.254',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'Broadcast',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'10.42.23.255',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
)
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-1',
children: [
WText(
'Usable hosts',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'2,046',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-400'
)
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3 flex flex-row items-center justify-center',
child: WText(
'Copy subnet summary',
className: 'text-sm font-semibold text-white'
)
)
),
],
)
Stats
- Views
- 90
- Stars
- 0
- Revisions
- 1
- Size
- 16,846 chars
- Created
- Oct 6, 2026