Flutter Profile Card UI: Avatar, Stats, and Actions
A social profile card with a gradient cover, initials avatar, follower stats, and Follow plus Message actions. Built with Wind UI className utilities and dark mode pairs.
main.dart
WDiv(
className: 'mx-auto max-w-sm flex flex-col rounded-2xl border bg-white border-gray-200 shadow-xl overflow-hidden dark:bg-gray-900 dark:border-gray-800',
children: [
WDiv(className: 'h-24 w-full bg-gradient-to-br from-sky-400 via-indigo-500 to-purple-600'),
WDiv(
className: 'flex flex-col items-center gap-3 px-6 pb-6',
children: [
WDiv(
className: 'flex items-center justify-center w-20 h-20 rounded-full border-4 bg-indigo-100 border-white dark:bg-indigo-900 dark:border-gray-900',
child: WText('AC', className: 'text-2xl font-bold text-indigo-600 dark:text-indigo-300'),
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WText('Anilcan Cakir', className: 'text-lg font-bold text-gray-900 dark:text-white'),
WText('Flutter engineer at FlutterSDK', className: 'text-sm text-gray-500 dark:text-gray-400'),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-8 py-2',
children: [
WDiv(className: 'flex flex-col items-center', children: [WText('128', className: 'text-base font-bold text-gray-900 dark:text-white'), WText('Posts', className: 'text-xs text-gray-500 dark:text-gray-400')]),
WDiv(className: 'flex flex-col items-center', children: [WText('8.4k', className: 'text-base font-bold text-gray-900 dark:text-white'), WText('Followers', className: 'text-xs text-gray-500 dark:text-gray-400')]),
WDiv(className: 'flex flex-col items-center', children: [WText('312', className: 'text-base font-bold text-gray-900 dark:text-white'), WText('Following', className: 'text-xs text-gray-500 dark:text-gray-400')]),
],
),
WDiv(
className: 'flex flex-row items-center gap-3 w-full',
children: [
WButton(className: 'flex-1 rounded-xl px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400', child: WText('Follow', className: 'text-sm font-semibold text-white text-center')),
WButton(className: 'flex-1 rounded-xl px-4 py-2.5 border bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700', child: WText('Message', className: 'text-sm font-semibold text-gray-700 text-center dark:text-gray-200')),
],
),
],
),
],
)
Stats
- Views
- 24
- Stars
- 0
- Revisions
- 2
- Size
- 2,425 chars
- Created
- Jun 9, 2026
Revisions