Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate

A fintech card that turns a UK income tax bill into a staircase: the personal allowance, basic and higher rate bands for 2026/27 drawn to scale for a 60,000 pound salary, the tax collected in each band above its step, and tiles for the total, the effective rate and the marginal rate. Built with Wind baseline aligned bars, ready for payroll, budgeting and personal finance apps.

by Anılcan Çakır 94 views 0 stars 2 weeks ago Rev 1

Open in Playground Fork

Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate preview

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.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'
        )
      )
    ),
  ]
)

Stats

Views: 94
Stars: 0
Revisions: 1
Size: 5,565 chars
Created: Oct 11, 2026