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.
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,776 chars
- Created
- Jun 9, 2026
Revisions