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.
by Anılcan Çakır
74 views
0 stars
2 weeks ago
Rev 1
main.dart
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'
),
]
)
)
),
]
)
Stats
- Views
- 74
- Stars
- 0
- Revisions
- 1
- Size
- 8,934 chars
- Created
- Oct 14, 2026