Flutter Fundraising Donation Progress Card with Donors
A fundraising campaign card with a goal progress bar, overlapping donor avatars, donor count, and a donate call-to-action. A marketing-ready donation UI using Wind utility classes.
WDiv(
className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-4',
children: [
WDiv(
className: 'flex flex-row items-center px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-950',
children: [
WIcon(
Icons.water_drop,
className: 'text-emerald-600 dark:text-emerald-400 text-sm mr-1'
),
WText(
'Clean Water',
className: 'text-emerald-600 dark:text-emerald-400 text-xs font-bold'
),
],
),
WText(
'62% funded',
className: 'text-gray-400 dark:text-gray-500 text-xs font-medium'
),
],
),
WText(
'Bring Water to Rural Villages',
className: 'text-gray-900 dark:text-white text-xl font-bold mb-1'
),
WText(
'Help 1,200 families access clean drinking water this year.',
className: 'text-gray-500 dark:text-gray-400 text-sm mb-5'
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mb-2',
children: [
WText(
'$24,800',
className: 'text-gray-900 dark:text-white text-2xl font-bold'
),
WText(
'of $40,000 goal',
className: 'text-gray-400 dark:text-gray-500 text-sm'
),
],
),
WDiv(
className: 'h-3 w-full rounded-full bg-gray-100 dark:bg-gray-800 mb-5',
child: WDiv(
className: 'h-3 w-3/5 rounded-full bg-gradient-to-r from-emerald-400 to-teal-500',
children: []
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-8 h-8 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center',
child: WText(
'A',
className: 'text-white dark:text-white text-xs font-bold'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-gradient-to-br from-indigo-400 to-blue-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'M',
className: 'text-white dark:text-white text-xs font-bold'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'K',
className: 'text-white dark:text-white text-xs font-bold'
),
),
WText(
'1,240 donors',
className: 'text-gray-500 dark:text-gray-400 text-xs font-medium ml-3'
),
],
),
],
),
WButton(
className: 'w-full py-3 rounded-2xl bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
child: WText(
'Donate Now',
className: 'text-white dark:text-white text-sm font-bold'
),
),
],
)
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.
