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.
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 Acme',
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'
)
),
],
),
],
),
],
)
More like this
-
Flutter Video Call Card with Participant Tile Grid
A live meeting panel with a six tile participant grid, an active speaker ring, per person mute and camera state, connection stats, and a round control bar. Pure Wind className layout, no video plugin needed for the design pass.
-
Flutter Poll Results Card with Vote Percentage Bars
A live poll results card built with Wind: a question header, ranked answer options each with a horizontal percentage fill bar, a highlighted winning choice, and a vote-count footer. Pure linear bars, no charts, dark-mode ready.
-
Flutter Voice Message Bubble with Waveform Player
A chat voice message bubble built with Wind utility classes: a sender avatar, a two tone waveform that shows playback progress, a play control, and the clip duration. Dark mode pairs are included on every color token.
