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.

Anılcan Çakır by Anılcan Çakır 22 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Rating Summary with Score and Bars preview
main.dart 
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'))]),
      ],
    ),
  ],
)
Stats
Views
22
Stars
0
Revisions
2
Size
2,037 chars
Created
Jun 9, 2026
Revisions