Flutter Transaction Activity List for Fintech Apps
A fintech activity feed listing recent transactions with category icons, merchant labels, and color-coded signed amounts. Styled entirely with Wind UI utility classes and dark mode ready.
WDiv(
className: 'mx-auto max-w-sm flex flex-col rounded-2xl border bg-white border-gray-200 shadow-lg overflow-hidden dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between px-5 pt-5 pb-3',
children: [
WText(
'Recent Activity',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'See all',
className: 'text-sm font-semibold text-indigo-600 dark:text-indigo-400'
),
],
),
WDiv(
className: 'flex flex-col gap-1 px-3 pb-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900',
child: WIcon(
Icons.trending_up,
className: 'text-emerald-600 dark:text-emerald-400 text-lg'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Salary Deposit',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Acme Corp · Today',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'+$4,200',
className: 'text-sm font-bold text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900',
child: WIcon(
Icons.shopping_bag,
className: 'text-violet-600 dark:text-violet-400 text-lg'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Apple Store',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Electronics · Yesterday',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'-$129',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-full bg-sky-100 dark:bg-sky-900',
child: WIcon(
Icons.local_cafe,
className: 'text-sky-600 dark:text-sky-400 text-lg'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Blue Bottle Coffee',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Dining · Mon',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'-$8.50',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
],
),
],
),
],
)
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.
