Skip to content
Türkçe
All snippets

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
  • WText
  • WIcon
preview
zhcf8rs7.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'
              )
            )
          ]
        ),
      ],
    ),
  ],
)
108 lines Open in the playground

More like this

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton