Flutter Savings Goal Progress Card
A premium dark savings goal card: goal name with a wallet icon badge and milestone flag, an oversized saved amount against the target, a left-filled progress bar with percentage and next-milestone labels, and a bold Add Funds button. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gray-900 shadow-xl dark:bg-gray-950',
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 items-center justify-center w-11 h-11 rounded-2xl bg-amber-500/20 dark:bg-amber-500/20',
child: WIcon(
Icons.account_balance_wallet,
className: 'text-amber-400 text-xl dark:text-amber-400'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Bali Trip 2026',
className: 'text-base font-bold text-white'
),
WText(
'Travel fund',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WIcon(
Icons.flag,
className: 'text-amber-400 text-lg dark:text-amber-400'
),
],
),
WDiv(
className: 'flex flex-row items-baseline gap-2',
children: [
WText(
'$1,840',
className: 'text-4xl font-extrabold text-white'
),
WText(
'of $4,500',
className: 'text-sm font-medium text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center w-full h-3 rounded-full bg-gray-800 dark:bg-gray-800',
child: WDiv(
className: 'h-3 w-[138px] rounded-full bg-gradient-to-r from-amber-400 to-amber-500 dark:from-amber-400 dark:to-amber-500',
child: WSpacer(
className: 'w-[138px] h-3'
),
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'41% saved',
className: 'text-xs font-semibold text-amber-400 dark:text-amber-400'
),
WText(
'Next milestone $2,000',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl px-5 py-3 bg-amber-500 hover:bg-amber-400 shadow-lg dark:bg-amber-500 dark:hover:bg-amber-400',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WIcon(
Icons.add,
className: 'text-gray-900 text-lg'
),
WText(
'Add Funds',
className: 'text-base font-bold text-gray-900'
),
],
),
),
],
)
Benzer örnekler
-
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.
