Flutter Testimonial Card with Star Rating

A customer testimonial card with a five-star rating, a quote, an initials avatar, and the author name and role. Built with Wind UI className utilities, dark mode ready.

Anılcan Çakır by Anılcan Çakır 22 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Testimonial Card with Star Rating preview
main.dart 
WDiv(
  className: 'mx-auto max-w-md flex flex-col gap-5 rounded-2xl border p-7 bg-white border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-row items-center gap-1',
      children: [
        WIcon(Icons.star_rate, className: 'text-amber-400 text-lg'),
        WIcon(Icons.star_rate, className: 'text-amber-400 text-lg'),
        WIcon(Icons.star_rate, className: 'text-amber-400 text-lg'),
        WIcon(Icons.star_rate, className: 'text-amber-400 text-lg'),
        WIcon(Icons.star_rate, className: 'text-amber-400 text-lg'),
      ],
    ),
    WText('Wind UI changed how our team ships Flutter screens. We moved from scattered StyleSheets to readable className strings, and onboarding got noticeably faster.', className: 'text-base text-gray-700 dark:text-gray-200 leading-relaxed'),
    WDiv(
      className: 'flex flex-row items-center gap-3',
      children: [
        WDiv(className: 'flex items-center justify-center w-11 h-11 rounded-full bg-indigo-100 dark:bg-indigo-900', child: WText('MJ', className: 'text-sm font-bold text-indigo-600 dark:text-indigo-300')),
        WDiv(className: 'flex flex-col', children: [WText('Maya Jensen', className: 'text-sm font-semibold text-gray-900 dark:text-white'), WText('Lead Mobile Engineer', className: 'text-xs text-gray-500 dark:text-gray-400')]),
      ],
    ),
  ],
)
Stats
Views
22
Stars
0
Revisions
2
Size
1,392 chars
Created
Jun 9, 2026
Revisions