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.
by Anılcan Çakır
31 views
0 stars
1 week ago
Rev 1
main.dart
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'
),
),
),
],
)
Stats
- Views
- 31
- Stars
- 0
- Revisions
- 1
- Size
- 8,882 chars
- Created
- Aug 14, 2026