Flutter Conversion Funnel Card with Narrowing Stage Bars
A checkout funnel card where each stage is a centred bar scaled to its true share of traffic, so the drop off is visible as a shape rather than a number. Between the bars sit the exact losses, and the footer calls out the biggest leak in the flow.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Checkout Funnel',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Last 30 days, all channels',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col items-end rounded-xl bg-indigo-50 dark:bg-indigo-500 px-3 py-2',
children: [
WText(
'19.6%',
className: 'text-sm font-bold text-indigo-600 dark:text-white'
),
WText(
'end to end',
className: 'text-[9px] font-semibold text-indigo-500 dark:text-indigo-100'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-center w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Product views',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'18,400',
className: 'text-[11px] font-bold text-indigo-600 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'w-[320px] h-[26px] rounded-md bg-indigo-300 dark:bg-indigo-700 mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-1',
child: WText(
'8,740 dropped, 47.5%',
className: 'text-[9px] font-medium text-rose-500 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-col items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Added to cart',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'9,660',
className: 'text-[11px] font-bold text-indigo-600 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'w-[168px] h-[26px] rounded-md bg-indigo-400 dark:bg-indigo-600 mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-1',
child: WText(
'3,540 dropped, 36.6%',
className: 'text-[9px] font-medium text-rose-500 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-col items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Checkout started',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'6,120',
className: 'text-[11px] font-bold text-indigo-600 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'w-[106px] h-[26px] rounded-md bg-indigo-500 dark:bg-indigo-500 mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-1',
child: WText(
'1,640 dropped, 26.8%',
className: 'text-[9px] font-medium text-rose-500 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-col items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Payment details',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'4,480',
className: 'text-[11px] font-bold text-indigo-600 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'w-[78px] h-[26px] rounded-md bg-indigo-600 dark:bg-indigo-400 mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-1',
child: WText(
'870 dropped, 19.4%',
className: 'text-[9px] font-medium text-rose-500 dark:text-rose-400'
),
),
WDiv(
className: 'flex flex-col items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'Purchased',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'ml-2',
child: WText(
'3,610',
className: 'text-[11px] font-bold text-emerald-600 dark:text-emerald-400'
),
),
],
),
WDiv(
className: 'w-[63px] h-[26px] rounded-md bg-emerald-500 dark:bg-emerald-400 mt-1'
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700 mt-5'
),
WDiv(
className: 'flex flex-row items-center w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-8 h-8 rounded-lg bg-rose-50 dark:bg-rose-500',
child: WIcon(
Icons.warning,
className: 'text-sm text-rose-500 dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Biggest leak: view to cart',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'8,740 shoppers left without adding an item',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-xl bg-indigo-600 dark:bg-indigo-500 py-3 flex flex-row items-center justify-center',
child: WText(
'Open funnel report',
className: 'text-sm font-bold text-white'
),
),
),
],
)
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 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.
-
Flutter Git Commit Graph Card with Branch Lanes and Merge Lines
A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
