Tüm ö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.
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WText(
'€',
className: 'w-10 h-10 rounded-xl bg-blue-700 dark:bg-blue-600 text-center text-xl font-bold text-white pt-[6px]'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Euro Notes',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Europa series, true scale',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-blue-50 dark:bg-blue-900/40 px-3 py-1',
child: WText(
'6 notes',
className: 'text-xs font-bold text-blue-700 dark:text-blue-300'
)
),
]
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-4',
child: WDiv(
className: 'relative w-[291px] h-[228px]',
children: [
WDiv(
className: 'absolute left-[0px] top-[0px] w-[291px] h-[146px] rounded-lg border border-white/30 bg-[#b8892f] dark:bg-[#b8892f] shadow-md',
child: WDiv(
className: 'flex flex-col w-full h-full px-3 pt-[4px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€200',
className: 'text-[12px] font-bold text-white'
),
WText(
'153 × 77 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
)
]
)
),
WDiv(
className: 'absolute left-[0px] top-[22px] w-[279px] h-[146px] rounded-lg border border-white/30 bg-[#3d9256] dark:bg-[#3d9256] shadow-md',
child: WDiv(
className: 'flex flex-col w-full h-full px-3 pt-[4px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€100',
className: 'text-[12px] font-bold text-white'
),
WText(
'147 × 77 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
)
]
)
),
WDiv(
className: 'absolute left-[0px] top-[44px] w-[266px] h-[146px] rounded-lg border border-white/30 bg-[#e0832b] dark:bg-[#e0832b] shadow-md',
child: WDiv(
className: 'flex flex-col w-full h-full px-3 pt-[4px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€50',
className: 'text-[12px] font-bold text-white'
),
WText(
'140 × 77 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
)
]
)
),
WDiv(
className: 'absolute left-[0px] top-[66px] w-[253px] h-[137px] rounded-lg border border-white/30 bg-[#3d6db3] dark:bg-[#3d6db3] shadow-md',
child: WDiv(
className: 'flex flex-col w-full h-full px-3 pt-[4px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€20',
className: 'text-[12px] font-bold text-white'
),
WText(
'133 × 72 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
)
]
)
),
WDiv(
className: 'absolute left-[0px] top-[88px] w-[241px] h-[127px] rounded-lg border border-white/30 bg-[#c9473d] dark:bg-[#c9473d] shadow-md',
child: WDiv(
className: 'flex flex-col w-full h-full px-3 pt-[4px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€10',
className: 'text-[12px] font-bold text-white'
),
WText(
'127 × 67 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
)
]
)
),
WDiv(
className: 'absolute left-[0px] top-[110px] w-[228px] h-[118px] rounded-lg border border-white/30 bg-[#7f8a96] dark:bg-[#7f8a96] shadow-md',
child: WDiv(
className: 'flex flex-col justify-between w-full h-full px-3 pt-[4px] pb-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'€5',
className: 'text-[12px] font-bold text-white'
),
WText(
'120 × 62 mm',
className: 'text-[10px] font-medium text-white/80'
)
]
),
WDiv(
className: 'flex flex-row items-end gap-2',
children: [
WText(
'5',
className: 'text-5xl font-bold text-white'
),
WText(
'Classical style',
className: 'text-[11px] font-medium text-white/80 pb-2'
)
]
)
]
)
)
]
)
),
WText(
'Each step up adds 6 or 7 mm of width; from €50 up the height stays 77 mm.',
className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
),
WDiv(
className: 'flex flex-row justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'120 mm',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'NARROW',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'153 mm',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'WIDE',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
),
WDiv(
className: 'flex flex-col w-[94px] rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'77 mm',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'TALLEST',
className: 'text-[9px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
)
]
)
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-blue-700 dark:bg-blue-600 py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Check a note',
className: 'text-sm font-bold text-white'
),
WIcon(
Icons.arrow_forward,
className: 'text-white text-base'
),
]
)
)
),
]
)
253 satır
Playground'da aç
Benzer örnekler
-
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.
-
Flutter Portfolio Allocation Card with Weighted Treemap Tiles
A holdings breakdown where every tile is sized by its share of the portfolio, so the biggest position is literally the biggest rectangle. Nine positions tile edge to edge across three weighted rows, with asset class totals below and a drift warning strip. Each tile is a fixed size Wind div, no chart library involved.
