Flutter Cloud Storage Quota Card with Category Breakdown Bar
A Flutter cloud storage card that splits a 15 GB plan into photos, videos, documents and app backups: segmented capacity bar, legend rows with size and share, billing footnote and an upgrade button. Built with wind_kit utility classes, fixed-width segments and dark mode pairs.
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-sky-50 dark:bg-sky-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.cloud,
className: 'text-sky-600 dark:text-sky-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Cloud Storage',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Pro plan | 15 GB',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
child: WText(
'85% full',
className: 'text-xs font-semibold text-amber-700 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-5',
children: [
WText(
'12.7 GB',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
WText(
'of 15 GB used',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-2'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 w-full mt-4',
children: [
WDiv(
className: 'w-[130px] h-2.5 rounded-full bg-violet-500 dark:bg-violet-400'
),
WDiv(
className: 'w-[81px] h-2.5 rounded-full bg-sky-500 dark:bg-sky-400'
),
WDiv(
className: 'w-[40px] h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[19px] h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'w-[49px] h-2.5 rounded-full bg-gray-200 dark:bg-gray-700'
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-violet-500 dark:bg-violet-400'
),
WText(
'Photos',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'6.1 GB',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'41%',
className: 'text-xs text-gray-400 dark:text-gray-500 ml-2'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-sky-500 dark:bg-sky-400'
),
WText(
'Videos',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'3.8 GB',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'25%',
className: 'text-xs text-gray-400 dark:text-gray-500 ml-2'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WText(
'Documents',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'1.9 GB',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'13%',
className: 'text-xs text-gray-400 dark:text-gray-500 ml-2'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
WText(
'App backups',
className: 'text-sm font-medium text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'0.9 GB',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'6%',
className: 'text-xs text-gray-400 dark:text-gray-500 ml-2'
),
],
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
),
WDiv(
className: 'flex flex-row items-center w-full mt-4',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-400 dark:text-gray-500 text-sm'
),
WText(
'Only 2.3 GB left, next billing Aug 3',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-sky-600 dark:bg-sky-500 py-3',
child: WText(
'Upgrade to 2 TB',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
More like this
-
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
-
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums
A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
-
Flutter Git Commit Graph Card with Branch Lanes and Merge Lines
A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
