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.

Anılcan Çakır by Anılcan Çakır 24 views 0 stars 2 weeks ago Rev 1
Flutter Profile Card UI: Avatar, Stats, and Actions preview
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