Flutter Audience Overlap Card with Three Circle Venn Segments
A customer data platform card that answers the question every growth team asks: how much of my paid audience already gets my email. Three translucent circles overlap into a real Venn diagram, so the shared regions darken on their own and each lobe carries its own count. Underneath sit a colour keyed segment legend, reach and overlap tiles, and a suppression action. Built from Wind className strings only, no chart library.
by Anılcan Çakır
8 views
0 stars
1 day ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'AUDIENCE BUILDER',
className: 'text-[9px] font-bold tracking-widest text-indigo-600 dark:text-indigo-400'
),
WText(
'Segment overlap',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1',
children: [
WIcon(
Icons.calendar_today,
className: 'text-gray-400 dark:text-gray-500 text-xs'
),
WText(
'30 days',
className: 'text-[11px] font-bold text-gray-600 dark:text-gray-300 ml-2'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-3',
child: WDiv(
className: 'relative w-[306px] h-[164px]',
children: [
WDiv(
className: 'absolute left-[70px] top-[4px] w-[104px] h-[104px] rounded-full bg-indigo-500/25 dark:bg-indigo-400/25'
),
WDiv(
className: 'absolute left-[132px] top-[4px] w-[104px] h-[104px] rounded-full bg-emerald-500/25 dark:bg-emerald-400/25'
),
WDiv(
className: 'absolute left-[101px] top-[58px] w-[104px] h-[104px] rounded-full bg-amber-500/25 dark:bg-amber-400/25'
),
WDiv(
className: 'absolute left-[76px] top-[34px] w-[40px] h-[16px] flex flex-row items-center justify-center',
child: WText(
'29.8k',
className: 'text-[11px] font-bold text-indigo-700 dark:text-indigo-200'
)
),
WDiv(
className: 'absolute left-[188px] top-[34px] w-[40px] h-[16px] flex flex-row items-center justify-center',
child: WText(
'17.5k',
className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-200'
)
),
WDiv(
className: 'absolute left-[132px] top-[126px] w-[40px] h-[16px] flex flex-row items-center justify-center',
child: WText(
'9.1k',
className: 'text-[11px] font-bold text-amber-700 dark:text-amber-200'
)
),
WDiv(
className: 'absolute left-[132px] top-[70px] w-[40px] h-[16px] flex flex-row items-center justify-center',
child: WText(
'2.1k',
className: 'text-[11px] font-bold text-gray-900 dark:text-white'
)
),
],
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WText(
'Email subscribers',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200 ml-2'
),
],
),
WText(
'42.6k',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-3 h-3 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WText(
'In-app active',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200 ml-2'
),
],
),
WText(
'31.2k',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-3 h-3 rounded-full bg-amber-500 dark:bg-amber-400'
),
WText(
'Paid social',
className: 'text-xs font-semibold text-gray-700 dark:text-gray-200 ml-2'
),
],
),
WText(
'18.9k',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'REACHED',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'78.4',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'k',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'OVERLAP',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'14.3',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'k',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'UNIQUE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'64.1',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'k',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.check_circle,
className: 'text-white dark:text-white text-base'
),
WText(
'Suppress 2,180 duplicates',
className: 'text-sm font-bold text-white dark:text-white ml-2'
),
],
),
),
),
],
)
Stats
- Views
- 8
- Stars
- 0
- Revisions
- 1
- Size
- 7,778 chars
- Created
- Aug 23, 2026