Flutter A/B Test Results Card with Mirrored Variant Bars
An experiment readout where control and variant grow away from a shared centre axis, one metric per row, so which side wins is obvious before you read a single number. Ends with the projected revenue lift and a ship decision.
by Anılcan Çakır
37 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 CTA Test',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Day 14 of 14, 24,800 sessions',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'rounded-full bg-emerald-50 dark:bg-emerald-500 px-3 py-1',
child: WText(
'96% confident',
className: 'text-[10px] font-bold text-emerald-600 dark:text-white'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-lg bg-indigo-500 dark:bg-indigo-400',
child: WText(
'A',
className: 'text-[11px] font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Control',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'Inline button',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-col items-end mr-2',
children: [
WText(
'Variant',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'Sticky bottom bar',
className: 'text-[9px] text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-6 h-6 rounded-lg bg-emerald-500 dark:bg-emerald-400',
child: WText(
'B',
className: 'text-[11px] font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700 mt-4'
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WText(
'Conversion rate',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-end w-[44px] pr-1',
child: WText(
'4.2%',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-end w-[122px] pr-1',
child: WDiv(
className: 'h-[14px] w-[80px] rounded-l-md bg-indigo-400 dark:bg-indigo-500'
),
),
WDiv(
className: 'w-[2px] h-[18px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'flex flex-row items-center w-[122px] pl-1',
child: WDiv(
className: 'h-[14px] w-[110px] rounded-r-md bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-row items-center w-[44px] pl-1',
child: WText(
'5.8%',
className: 'text-[11px] font-bold text-emerald-600 dark:text-emerald-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WText(
'Add to cart',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-end w-[44px] pr-1',
child: WText(
'22%',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-end w-[122px] pr-1',
child: WDiv(
className: 'h-[14px] w-[90px] rounded-l-md bg-indigo-400 dark:bg-indigo-500'
),
),
WDiv(
className: 'w-[2px] h-[18px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'flex flex-row items-center w-[122px] pl-1',
child: WDiv(
className: 'h-[14px] w-[110px] rounded-r-md bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-row items-center w-[44px] pl-1',
child: WText(
'27%',
className: 'text-[11px] font-bold text-emerald-600 dark:text-emerald-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WText(
'Average order value',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-end w-[44px] pr-1',
child: WText(
'$68',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-end w-[122px] pr-1',
child: WDiv(
className: 'h-[14px] w-[101px] rounded-l-md bg-indigo-400 dark:bg-indigo-500'
),
),
WDiv(
className: 'w-[2px] h-[18px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'flex flex-row items-center w-[122px] pl-1',
child: WDiv(
className: 'h-[14px] w-[110px] rounded-r-md bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-row items-center w-[44px] pl-1',
child: WText(
'$74',
className: 'text-[11px] font-bold text-emerald-600 dark:text-emerald-400'
),
),
],
),
],
),
WDiv(
className: 'flex flex-col w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-full',
child: WText(
'Bounce rate, lower wins',
className: 'text-[10px] font-semibold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-end w-[44px] pr-1',
child: WText(
'38%',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-end w-[122px] pr-1',
child: WDiv(
className: 'h-[14px] w-[110px] rounded-l-md bg-indigo-400 dark:bg-indigo-500'
),
),
WDiv(
className: 'w-[2px] h-[18px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'flex flex-row items-center w-[122px] pl-1',
child: WDiv(
className: 'h-[14px] w-[90px] rounded-r-md bg-emerald-500 dark:bg-emerald-400'
),
),
WDiv(
className: 'flex flex-row items-center w-[44px] pl-1',
child: WText(
'31%',
className: 'text-[11px] font-bold text-emerald-600 dark:text-emerald-400'
),
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700 mt-4'
),
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-emerald-50 dark:bg-emerald-500',
child: WIcon(
Icons.trending_up,
className: 'text-sm text-emerald-600 dark:text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Variant B lifts revenue 38%',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
),
WText(
'Projected $41,200 extra per month',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-xl bg-emerald-500 dark:bg-emerald-400 py-3 flex flex-row items-center justify-center',
child: WText(
'Ship variant B',
className: 'text-sm font-bold text-white'
),
),
),
],
)
Stats
- Views
- 37
- Stars
- 0
- Revisions
- 1
- Size
- 10,381 chars
- Created
- Aug 12, 2026