Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate
A Flutter income tax card for payroll, budgeting and personal finance apps: UK 2026/27 personal allowance, basic and higher rate bands drawn to scale for a 60,000 pound salary, tax per band and tiles for total, effective rate and marginal rate. Baseline-aligned wind_kit bars.
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.account_balance_wallet,
className: 'text-white text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Income Tax',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'£60,000 salary, not Scotland',
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(
'2026/27',
className: 'text-xs font-bold text-indigo-700 dark:text-indigo-300'
)
),
]
),
WDiv(
className: 'flex flex-col w-full mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 pt-3 pb-3',
children: [
WText(
'Tax per band',
className: 'text-[11px] font-semibold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row mt-1',
children: [
WText(
'£0',
className: 'w-[57px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'£7,540',
className: 'w-[172px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
),
WText(
'£3,892',
className: 'w-[45px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
)
]
),
WDiv(
className: 'flex flex-row items-end h-[132px] mt-1',
children: [
WDiv(
className: 'w-[57px] h-[6px] rounded-t-md bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'flex flex-col items-center w-[172px] h-[64px] rounded-t-md bg-indigo-500 dark:bg-indigo-500 pt-2',
child: WText(
'20%',
className: 'text-xs font-bold text-white'
)
),
WDiv(
className: 'flex flex-col items-center w-[45px] h-[128px] rounded-t-md bg-violet-500 dark:bg-violet-500 pt-2',
child: WText(
'40%',
className: 'text-xs font-bold text-white'
)
)
]
),
WDiv(
className: 'w-[274px] h-[2px] bg-gray-700 dark:bg-gray-300'
),
WDiv(
className: 'flex flex-row mt-1',
children: [
WText(
'£0',
className: 'w-[57px] text-[10px] text-gray-500 dark:text-gray-400'
),
WText(
'£12,570',
className: 'w-[172px] text-[10px] text-gray-500 dark:text-gray-400'
),
WText(
'£50,270',
className: 'w-[45px] text-[10px] text-gray-500 dark:text-gray-400'
)
]
),
]
),
WDiv(
className: 'flex flex-row items-center gap-[11px] mt-3',
children: [
WDiv(
className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
children: [
WText(
'£11,432',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Total tax',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
children: [
WText(
'19.1%',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Effective',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
children: [
WText(
'40%',
className: 'text-lg font-bold text-violet-600 dark:text-white'
),
WText(
'Marginal',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
)
]
),
]
),
WText(
'Only the slice above £50,270 is taxed at 40%.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
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 gap-2',
child: WText(
'See full breakdown',
className: 'text-sm font-semibold text-white'
)
)
),
]
)
More like this
-
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 Revenue Bridge Card with Floating Waterfall Steps
A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.
-
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.
