Flutter Poll Results Card with Vote Percentage Bars
A live poll results card built with Wind: a question header, ranked answer options each with a horizontal percentage fill bar, a highlighted winning choice, and a vote-count footer. Pure linear bars, no charts, dark-mode ready.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-100 shadow-xl dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-500/15',
child: WText(
'LIVE POLL',
className: 'text-xs font-bold tracking-wide text-indigo-600 dark:text-indigo-300'
)
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.schedule,
className: 'text-sm text-gray-400 dark:text-gray-500'
),
WText(
'Ends in 6h',
className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
),
]
),
]
),
WText(
'Which feature should we build next?',
className: 'text-xl font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-col gap-4 w-full',
children: [
WDiv(
className: 'flex flex-col gap-1.5 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-1.5',
children: [
WIcon(
Icons.check_circle,
className: 'text-base text-indigo-500 dark:text-indigo-400'
),
WText(
'Dark mode themes',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
WText(
'58%',
className: 'text-sm font-bold text-indigo-600 dark:text-indigo-300'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-2.5 w-[195px] rounded-full bg-gradient-to-r from-indigo-500 to-violet-500',
child: WSpacer(
className: 'w-[195px] h-2.5'
)
)
),
]
),
WDiv(
className: 'flex flex-col gap-1.5 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Offline sync',
className: 'text-sm font-medium text-gray-600 dark:text-gray-300'
),
WText(
'25%',
className: 'text-sm font-semibold text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-2.5 w-[84px] rounded-full bg-gray-300 dark:bg-gray-600',
child: WSpacer(
className: 'w-[84px] h-2.5'
)
)
),
]
),
WDiv(
className: 'flex flex-col gap-1.5 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Widget marketplace',
className: 'text-sm font-medium text-gray-600 dark:text-gray-300'
),
WText(
'12%',
className: 'text-sm font-semibold text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-2.5 w-[40px] rounded-full bg-gray-300 dark:bg-gray-600',
child: WSpacer(
className: 'w-[40px] h-2.5'
)
)
),
]
),
WDiv(
className: 'flex flex-col gap-1.5 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'Voice commands',
className: 'text-sm font-medium text-gray-600 dark:text-gray-300'
),
WText(
'5%',
className: 'text-sm font-semibold text-gray-500 dark:text-gray-400'
),
]
),
WDiv(
className: 'flex flex-row items-center w-full h-2.5 rounded-full bg-gray-100 dark:bg-gray-800',
child: WDiv(
className: 'h-2.5 w-[17px] rounded-full bg-gray-300 dark:bg-gray-600',
child: WSpacer(
className: 'w-[17px] h-2.5'
)
)
),
]
),
]
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800',
child: WSpacer(
className: 'h-0'
)
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WText(
'2,481 votes',
className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
),
WText(
'You voted Dark mode',
className: 'text-xs font-semibold text-indigo-500 dark:text-indigo-400'
),
]
),
],
)
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.
