Skip to content
Türkçe

217 snippets

Snippet Gallery

Real Wind examples, added as they are written. Open one to see the result and read its code.

Read the docs

Social and messaging snippets

12 snippets, newest first.

  • 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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • 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.

    • WDiv
    • WText
    • WIcon
    • WSpacer

  • 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.

    • WDiv
    • WText
    • WButton
    • WIcon

  • Flutter Team Members Grid with Role Badges

    A team roster grid with gradient initial avatars, online status dots, and color coded role badges, composed entirely from Wind utility classes with dark mode built in.

    • WDiv
    • WText
    • WButton

  • Flutter Referral Reward Card with Invite Link and Tiers

    A referral rewards card written in pure Wind className strings: progress toward the next reward, unlocked and locked tiers, earnings to date, and a copyable invite link. Every color carries its dark pair.

    • WDiv
    • WText
    • WIcon
    • WButton

  • Flutter Fundraising Donation Progress Card with Donors

    A fundraising campaign card with a goal progress bar, overlapping donor avatars, donor count, and a donate call-to-action. A marketing-ready donation UI using Wind utility classes.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Messages Inbox List with Unread Badges

    A messaging inbox list with gradient avatars, last-message previews, timestamps, and unread count badges. Built with Wind utility classes and full dark-mode pairing.

    • WDiv
    • WText
    • WButton
    • WIcon

  • Flutter Notification Center Stack Panel

    A grouped notification center panel with colored icon containers, sender and message previews, timestamps, unread dots, and a mark-all-read action. Built with Wind utility classes and full dark-mode pairs.

    • WDiv
    • WText
    • WIcon
    • WSpacer

  • Flutter Social Post Card with Engagement Actions

    A social feed post card with a verified author header, body copy, a media banner, and like, comment, share, and bookmark actions. Styled entirely with Wind UI utility classes and dark mode ready.

    • WDiv
    • WText
    • WIcon

  • 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.

    • WDiv
    • WIcon
    • WText

  • 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
    • WText
    • WButton

  • Flutter Avatar Group with Status and Count Badges

    An avatar group showing online status dots and a remaining-count badge. A chat and presence pattern built with Wind UI utility classes and dark mode pairs.

    • WDiv
    • WText