Flutter Invoice Payment Due Card with Line Items and Total
A Flutter invoice card for freelance and B2B billing apps: invoice number, due-date badge, itemised line rows with quantity and rate, subtotal, tax and an emphasised total above a pay button. Built with wind_kit className utilities 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-indigo-50 dark:bg-indigo-900 flex flex-row items-center justify-center',
child: WText(
'$',
className: 'text-indigo-600 dark:text-indigo-300 text-xl font-bold'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Invoice #INV-2043',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Billed to Northwind Ltd',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
children: [
WIcon(
Icons.schedule,
className: 'text-amber-600 dark:text-amber-200 text-sm'
),
WText(
'Due in 4 days',
className: 'text-xs font-semibold text-amber-700 dark:text-amber-100 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'UX Design Retainer',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
WText(
'40 hrs | $95 / hr',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WText(
'$3,800.00',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Design System Setup',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
WText(
'Fixed scope',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WText(
'$1,200.00',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Prototype Revisions',
className: 'text-sm font-medium text-gray-900 dark:text-white'
),
WText(
'12 hrs | $95 / hr',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WText(
'$1,140.00',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
),
WDiv(
className: 'flex flex-col gap-2 w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Subtotal',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$6,140.00',
className: 'text-sm text-gray-700 dark:text-gray-200'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Tax (8%)',
className: 'text-sm text-gray-500 dark:text-gray-400'
),
WText(
'$491.20',
className: 'text-sm text-gray-700 dark:text-gray-200'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-1',
children: [
WText(
'Total due',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'$6,631.20',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WButton(
className: 'w-full mt-6 rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3',
child: WText(
'Pay $6,631.20',
className: 'text-white text-center font-semibold text-sm'
),
),
],
)
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 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.
-
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.
