Flutter Crypto Portfolio Balance Card with Coin Holdings
A clean crypto portfolio card showing total balance, daily change, and per-coin holdings with gradient token avatars and color-coded price deltas. Built with Wind utility classes and full dark-mode pairing.
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-col',
children: [
WText(
'Portfolio',
className: 'text-gray-400 dark:text-gray-500 text-xs font-medium uppercase'
),
WText(
'Total Balance',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
],
),
WDiv(
className: 'flex flex-row items-center px-2 py-1 rounded-full bg-emerald-50 dark:bg-emerald-950',
children: [
WIcon(
Icons.trending_up,
className: 'text-emerald-600 dark:text-emerald-400 text-sm mr-1'
),
WText(
'+4.2%',
className: 'text-emerald-600 dark:text-emerald-400 text-xs font-bold'
),
],
),
],
),
WText(
'$48,250.30',
className: 'text-gray-900 dark:text-white text-3xl font-bold'
),
WText(
'+$1,940.50 today',
className: 'text-emerald-600 dark:text-emerald-400 text-sm font-medium mb-5'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-amber-500 flex flex-row items-center justify-center mr-3',
child: WText(
'B',
className: 'text-white dark:text-white text-base font-bold'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Bitcoin',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'0.62 BTC',
className: 'text-gray-400 dark:text-gray-500 text-xs'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'$29,480',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'+2.4%',
className: 'text-emerald-600 dark:text-emerald-400 text-xs font-medium'
),
],
),
],
),
WDiv(
className: 'h-px w-full bg-gray-100 dark:bg-gray-800',
children: []
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-blue-500 flex flex-row items-center justify-center mr-3',
child: WText(
'E',
className: 'text-white dark:text-white text-base font-bold'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Ethereum',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'4.10 ETH',
className: 'text-gray-400 dark:text-gray-500 text-xs'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'$12,300',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'+1.1%',
className: 'text-emerald-600 dark:text-emerald-400 text-xs font-medium'
),
],
),
],
),
WDiv(
className: 'h-px w-full bg-gray-100 dark:bg-gray-800',
children: []
),
WDiv(
className: 'flex flex-row items-center justify-between w-full py-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-fuchsia-500 flex flex-row items-center justify-center mr-3',
child: WText(
'S',
className: 'text-white dark:text-white text-base font-bold'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Solana',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'88.0 SOL',
className: 'text-gray-400 dark:text-gray-500 text-xs'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'$6,470',
className: 'text-gray-900 dark:text-white text-sm font-semibold'
),
WText(
'-0.8%',
className: 'text-rose-500 dark:text-rose-400 text-xs font-medium'
),
],
),
],
),
],
)
Benzer örnekler
-
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
-
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 Pascal Triangle Card with Odd Entry Pattern and Row Sums
A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
