Tüm örnekler
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.
WDiv(
className: 'flex flex-col w-[340px] p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-emerald-500 dark:bg-emerald-400',
child: WIcon(
Icons.trending_up,
className: 'text-xl text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Acme Cloud',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Recurring revenue, Q3 to Q4',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
child: WText(
'CLOSED',
className: 'text-[10px] font-bold tracking-wide text-emerald-700 dark:text-emerald-200'
),
),
],
),
WDiv(
className: 'flex flex-row items-end w-full mt-5',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'$4.62M',
className: 'text-3xl font-bold text-gray-900 dark:text-white'
),
WText(
'CLOSING ARR',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col ml-4',
children: [
WDiv(
className: 'flex flex-row items-center',
child: WDiv(
className: 'rounded-md bg-emerald-50 dark:bg-emerald-900 px-2 py-1',
child: WText(
'+$470K',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-200'
),
),
),
WText(
'net new',
className: 'text-[10px] text-gray-500 dark:text-gray-400 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WText(
'ARR BRIDGE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'BASELINE 3.60',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'relative w-[300px] h-[120px] mt-2',
children: [
WDiv(
className: 'flex flex-row items-start w-[300px] h-[120px]',
children: [
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[76px]'
),
WDiv(
className: 'w-[40px] h-[44px] rounded-t bg-slate-400 dark:bg-slate-500'
),
],
),
WDiv(
className: 'w-[12px] h-[120px]'
),
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[26px]'
),
WDiv(
className: 'w-[40px] h-[50px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'w-[12px] h-[120px]'
),
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[7px]'
),
WDiv(
className: 'w-[40px] h-[19px] rounded-sm bg-emerald-400 dark:bg-emerald-300'
),
],
),
WDiv(
className: 'w-[12px] h-[120px]'
),
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[7px]'
),
WDiv(
className: 'w-[40px] h-[17px] rounded-sm bg-rose-400 dark:bg-rose-300'
),
],
),
WDiv(
className: 'w-[12px] h-[120px]'
),
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[24px]'
),
WDiv(
className: 'w-[40px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'w-[12px] h-[120px]'
),
WDiv(
className: 'flex flex-col justify-start w-[40px] h-[120px]',
children: [
WDiv(
className: 'w-[40px] h-[38px]'
),
WDiv(
className: 'w-[40px] h-[82px] rounded-t bg-indigo-500 dark:bg-indigo-400'
),
],
),
],
),
WDiv(
className: 'absolute left-[0px] top-[119px] w-[300px] h-[1px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[40px] top-[76px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'absolute left-[92px] top-[26px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'absolute left-[144px] top-[7px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'absolute left-[196px] top-[24px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
),
WDiv(
className: 'absolute left-[248px] top-[38px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-start w-[300px] mt-2',
children: [
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'4.15',
className: 'text-[10px] font-bold text-gray-900 dark:text-white'
),
WText(
'Q3',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'w-[12px] h-[4px]'
),
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'+0.62',
className: 'text-[10px] font-bold text-emerald-600 dark:text-emerald-300'
),
WText(
'NEW',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'w-[12px] h-[4px]'
),
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'+0.24',
className: 'text-[10px] font-bold text-emerald-600 dark:text-emerald-300'
),
WText(
'EXP',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'w-[12px] h-[4px]'
),
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'-0.21',
className: 'text-[10px] font-bold text-rose-600 dark:text-rose-300'
),
WText(
'CONTR',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'w-[12px] h-[4px]'
),
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'-0.18',
className: 'text-[10px] font-bold text-rose-600 dark:text-rose-300'
),
WText(
'CHURN',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'w-[12px] h-[4px]'
),
WDiv(
className: 'flex flex-col items-center w-[40px]',
children: [
WText(
'4.62',
className: 'text-[10px] font-bold text-gray-900 dark:text-white'
),
WText(
'Q4',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900',
children: [
WIcon(
Icons.trending_up,
className: 'text-base text-emerald-600 dark:text-emerald-300'
),
WDiv(
className: 'ml-2',
child: WText(
'Expansion outran churn for a third straight quarter',
className: 'text-[11px] font-medium text-emerald-800 dark:text-emerald-100'
),
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full py-3 rounded-xl bg-gray-900 dark:bg-white',
child: WText(
'Open revenue report',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
325 satır
Playground'da aç
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.
