Flutter Rating Summary with Score and Bars
A review summary with a large average score, a star row, total count, and rating distribution bars. Built with Wind UI className utilities, dark mode included.
WDiv(
className: 'mx-auto max-w-md flex flex-row items-center gap-6 rounded-2xl border p-6 bg-white border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WText(
'4.8',
className: 'text-5xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-0.5',
children: [
WIcon(
Icons.star_rate,
className: 'text-amber-400 text-sm'
),
WIcon(
Icons.star_rate,
className: 'text-amber-400 text-sm'
),
WIcon(
Icons.star_rate,
className: 'text-amber-400 text-sm'
),
WIcon(
Icons.star_rate,
className: 'text-amber-400 text-sm'
),
WIcon(
Icons.star_rate,
className: 'text-amber-400 text-sm'
)
]
),
WText(
'2,140 reviews',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex-1 flex flex-col gap-2',
children: [
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'5',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex-1 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'w-3/4 h-2 rounded-full bg-amber-400'
)
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'4',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex-1 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'w-1/2 h-2 rounded-full bg-amber-400'
)
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'3',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex-1 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'w-1/4 h-2 rounded-full bg-amber-400'
)
)
]
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'2',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex-1 h-2 rounded-full bg-gray-200 dark:bg-gray-700',
child: WDiv(
className: 'w-1/4 h-2 rounded-full bg-amber-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.
