Tüm örnekler
Flutter Market Share Card with Marimekko Mosaic Columns
A Flutter market share card using a Marimekko mosaic: column width shows segment size and the stack inside shows who owns it, so which brand leads which segment is visible before you read a number. Pure wind_kit flex boxes with fixed pixel sizing and dark mode pairs.
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'
),
),
),
],
)
332 satır
Playground'da aç
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.
