Flutter Rating Summary with Score and Bars

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'
              )
            )
          ]
        ),
      ],
    ),
  ],
)