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.
by Anılcan Çakır
35 views
0 stars
1 week ago
Rev 1
main.dart
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'
),
),
),
],
)
Stats
- Views
- 35
- Stars
- 0
- Revisions
- 1
- Size
- 6,749 chars
- Created
- Aug 12, 2026