Flutter Market Share Card with Marimekko Mosaic Columns
Two dimensions in one block of colour. Column width carries how big each segment is, the stack inside carries who owns it, so the story that one brand rules the small cars and another rules the big ones is visible before you read a single number. Pure Wind flex boxes with fixed pixel sizing and complete dark mode pairs.
by Anılcan Çakır
4 views
0 stars
3 hours ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
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-2xl bg-indigo-50 dark:bg-indigo-950',
child: WIcon(
Icons.directions_car,
className: 'text-xl text-indigo-500 dark:text-indigo-400'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'EV market share',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Western Europe, Q3 2026',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-indigo-100 dark:bg-indigo-900 px-2 py-1',
child: WText(
'5 SEGMENTS',
className: 'text-[9px] font-bold tracking-wide text-indigo-700 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'1.84M',
className: 'text-3xl font-bold text-gray-900 dark:text-white'
),
WText(
'UNITS DELIVERED',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WDiv(
className: 'rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
child: WText(
'+18%',
className: 'text-[11px] font-bold text-emerald-700 dark:text-emerald-300'
),
),
WDiv(
className: 'mt-1',
child: WText(
'vs Q2',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
),
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'MARIMEKKO MOSAIC',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'WIDTH IS SEGMENT SIZE',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row gap-[2px] w-[300px] mt-2',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[88px]',
child: WText(
'CITY',
className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[78px]',
child: WText(
'COMPACT',
className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[58px]',
child: WText(
'MID',
className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px]',
child: WText(
'SUV',
className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[24px]',
child: WText(
'LUX',
className: 'text-[9px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
),
],
),
WDiv(
className: 'flex flex-row gap-[2px] w-[300px] h-[130px] mt-1',
children: [
WDiv(
className: 'flex flex-col w-[88px] h-[130px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[88px] h-[57px] rounded-t-sm bg-indigo-500 dark:bg-indigo-400',
child: WText(
'44%',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[88px] h-[34px] bg-teal-500 dark:bg-teal-400',
child: WText(
'26%',
className: 'text-[10px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[88px] h-[39px] rounded-b-sm bg-gray-300 dark:bg-gray-600'
),
],
),
WDiv(
className: 'flex flex-col w-[78px] h-[130px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[78px] h-[46px] rounded-t-sm bg-indigo-500 dark:bg-indigo-400',
child: WText(
'35%',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[78px] h-[40px] bg-teal-500 dark:bg-teal-400',
child: WText(
'31%',
className: 'text-[10px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[78px] h-[44px] rounded-b-sm bg-gray-300 dark:bg-gray-600'
),
],
),
WDiv(
className: 'flex flex-col w-[58px] h-[130px]',
children: [
WDiv(
className: 'w-[58px] h-[36px] rounded-t-sm bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[58px] h-[50px] bg-teal-500 dark:bg-teal-400',
child: WText(
'38%',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[58px] h-[44px] rounded-b-sm bg-gray-300 dark:bg-gray-600'
),
],
),
WDiv(
className: 'flex flex-col w-[44px] h-[130px]',
children: [
WDiv(
className: 'w-[44px] h-[29px] rounded-t-sm bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px] h-[58px] bg-teal-500 dark:bg-teal-400',
child: WText(
'45%',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[44px] h-[43px] rounded-b-sm bg-gray-300 dark:bg-gray-600'
),
],
),
WDiv(
className: 'flex flex-col w-[24px] h-[130px]',
children: [
WDiv(
className: 'w-[24px] h-[20px] rounded-t-sm bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'w-[24px] h-[71px] bg-teal-500 dark:bg-teal-400'
),
WDiv(
className: 'w-[24px] h-[39px] rounded-b-sm bg-gray-300 dark:bg-gray-600'
),
],
),
],
),
WDiv(
className: 'flex flex-row gap-[2px] w-[300px] mt-1',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-[88px]',
child: WText(
'30%',
className: 'text-[10px] font-bold text-gray-700 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[78px]',
child: WText(
'27%',
className: 'text-[10px] font-bold text-gray-700 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[58px]',
child: WText(
'20%',
className: 'text-[10px] font-bold text-gray-700 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[44px]',
child: WText(
'15%',
className: 'text-[10px] font-bold text-gray-700 dark:text-gray-300'
),
),
WDiv(
className: 'flex flex-row items-center justify-center w-[24px]',
child: WText(
'8%',
className: 'text-[10px] font-bold text-gray-700 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-3',
children: [
WDiv(
className: 'w-[10px] h-[10px] rounded-sm bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'ml-2',
child: WText(
'Voltaro',
className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'w-[10px] h-[10px] rounded-sm bg-teal-500 dark:bg-teal-400 ml-4'
),
WDiv(
className: 'ml-2',
child: WText(
'Kestrel',
className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
),
WDiv(
className: 'w-[10px] h-[10px] rounded-sm bg-gray-300 dark:bg-gray-600 ml-4'
),
WDiv(
className: 'ml-2',
child: WText(
'Everyone else',
className: 'text-[10px] font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-3 rounded-2xl bg-teal-50 dark:bg-teal-950 px-3 py-2',
children: [
WIcon(
Icons.trending_up,
className: 'text-base text-teal-600 dark:text-teal-400'
),
WDiv(
className: 'ml-2',
child: WText(
'Kestrel leads everything above midsize.',
className: 'text-[11px] font-medium text-teal-800 dark:text-teal-300'
),
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white px-4 py-3',
child: WText(
'Break down by country',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 4
- Stars
- 0
- Revisions
- 1
- Size
- 11,030 chars
- Created
- Sep 14, 2026