All snippets
Flutter Portfolio Allocation Card with Weighted Treemap Tiles
A holdings breakdown where every tile is sized by its share of the portfolio, so the biggest position is literally the biggest rectangle. Nine positions tile edge to edge across three weighted rows, with asset class totals below and a drift warning strip. Each tile is a fixed size Wind div, no chart library involved.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-6',
children: [
WDiv(
className: 'flex flex-row items-start justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'PORTFOLIO ALLOCATION',
className: 'text-[10px] font-bold tracking-wide text-indigo-500 dark:text-indigo-400'
),
WText(
'$248,930',
className: 'text-2xl font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-emerald-50 dark:bg-emerald-500/20 px-3 py-1',
children: [
WIcon(
Icons.trending_up,
className: 'text-sm text-emerald-500 dark:text-emerald-400'
),
WDiv(
className: 'ml-1',
child: WText(
'1.8% today',
className: 'text-[11px] font-semibold text-emerald-600 dark:text-emerald-300'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'flex flex-col w-[320px]',
children: [
WDiv(
className: 'flex flex-row items-start w-[320px]',
children: [
WDiv(
className: 'flex flex-col justify-between w-[134px] h-[96px] rounded-lg bg-indigo-600 dark:bg-indigo-500 p-2',
children: [
WText(
'NVDA',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'24%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col justify-between w-[100px] h-[96px] rounded-lg bg-indigo-500 dark:bg-indigo-400 ml-1 p-2',
children: [
WText(
'AAPL',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'18%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col justify-between w-[78px] h-[96px] rounded-lg bg-indigo-400 dark:bg-indigo-300 ml-1 p-2',
children: [
WText(
'MSFT',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'14%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start w-[320px] mt-1',
children: [
WDiv(
className: 'flex flex-col justify-between w-[123px] h-[48px] rounded-lg bg-emerald-500 dark:bg-emerald-400 p-2',
children: [
WText(
'Cash',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'11%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col justify-between w-[100px] h-[48px] rounded-lg bg-violet-500 dark:bg-violet-400 ml-1 p-2',
children: [
WText(
'AMZN',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'9%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col justify-between w-[89px] h-[48px] rounded-lg bg-violet-400 dark:bg-violet-300 ml-1 p-2',
children: [
WText(
'GOOGL',
className: 'text-[11px] font-bold text-white dark:text-white'
),
WText(
'8%',
className: 'text-[11px] font-semibold text-white dark:text-white'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start w-[320px] mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-[136px] h-[28px] rounded-lg bg-amber-500 dark:bg-amber-400 px-2',
children: [
WText(
'Bonds',
className: 'text-[10px] font-bold text-white dark:text-white'
),
WText(
'7%',
className: 'text-[10px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[98px] h-[28px] rounded-lg bg-rose-500 dark:bg-rose-400 ml-1 px-2',
children: [
WText(
'TSLA',
className: 'text-[10px] font-bold text-white dark:text-white'
),
WText(
'5%',
className: 'text-[10px] font-semibold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[78px] h-[28px] rounded-lg bg-gray-400 dark:bg-gray-500 ml-1 px-2',
children: [
WText(
'Other',
className: 'text-[10px] font-bold text-white dark:text-white'
),
WText(
'4%',
className: 'text-[10px] font-semibold text-white dark:text-white'
),
],
),
],
),
],
),
),
WDiv(
className: 'flex flex-row items-start w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'Equities',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'78%',
className: 'text-sm font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-col w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2 ml-2',
children: [
WText(
'Cash',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'11%',
className: 'text-sm font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-col w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2 ml-2',
children: [
WText(
'Fixed income',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
WText(
'7%',
className: 'text-sm font-bold text-gray-900 dark:text-white mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-amber-50 dark:bg-amber-500/20 px-4 py-3 mt-4',
children: [
WIcon(
Icons.warning,
className: 'text-base text-amber-500 dark:text-amber-400'
),
WDiv(
className: 'ml-2',
child: WText(
'Tech weight is 6 points over target',
className: 'text-[11px] font-semibold text-amber-700 dark:text-amber-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(
'Rebalance portfolio',
className: 'text-sm font-semibold text-white dark:text-gray-900'
),
),
),
],
)
249 lines
Open in the playground
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 Euro Banknote Card with True Scale Note Stack and Denomination Colours
A euro banknote card for banking, travel and currency apps: all six Europa series notes from €5 to €200 drawn to true scale in their official grey, red, blue, orange, green and yellow-brown, each tagged with its millimetre size, plus width and height stats showing how every step up adds 6 or 7 mm.
-
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.
