All Snippets
Browse 152 community snippets
Flutter Monthly Budget Card with Category Spending Bars
A personal-finance budget card built with Wind: a remaining-balance hero with an overall progress bar, plus per-category spending rows (food, transport, shopping, bills) with icon chips and linear progress bars that turn red when a category is over budget. Dark-mode ready.
Flutter Restaurant Menu Dish Card with Price and Rating
A food-delivery menu item card built with Wind: a gradient dish header with a popular badge and favorite toggle, star rating, dish description, dietary tags, price, and an add-to-cart button. Dark-mode ready.
Flutter Currency Converter Card with Live Exchange Rate
A currency exchange card built with Wind: stacked send and receive amount blocks with currency chips, a convert-flow badge, a live exchange rate with a trend indicator, and a full-width action button. Dark-mode ready.
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 Code Snippet Card with Syntax Colors and Copy
A syntax highlighted code snippet card with a window title bar, a language tag, and a copy button, composed from Wind utility classes. The sample is Wind itself: a className string over a nested widget tree.
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.
Flutter Calendar Month View with Event Dots
A month calendar view in pure Wind className strings: a weekday header, a seven column day grid, today highlighted, and colored event dots. Every color carries its dark pair.
Flutter Color Palette Swatch Card with Shade Scale
A color palette card showing four Wind color families across five shades each, the utility-first token scale at a glance. Built entirely from Wind className strings with dark mode built in.
Flutter Progress Stepper Wizard with Plan Selection
A multi-step wizard header with a connected step rail (completed, active, and upcoming states) over a plan selection step and a continue button, all composed from Wind utility classes.
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.
Flutter Onboarding Slide with Feature Highlight and Page Dots
A polished onboarding slide built with Wind utility classes: a gradient feature icon, a bold headline, supporting copy, page indicator dots, and a full-width call to action. Dark mode pairs are included on every color token.
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.
Flutter AI Prompt Composer Card with Quick Actions
An AI assistant prompt composer card with a model badge, a streaming response preview, quick-action chips, and a prompt input with a generate button. A marketing-ready AI chat UI built with Wind utility classes and full dark-mode pairing.
Flutter Smart Home Device Control Card with Toggles
A smart home control card listing room devices with colored icon tiles, status labels, and on/off toggle switches. Built with Wind utility classes and dark-mode pairs.
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.
Flutter File Upload Card with Progress Bars
A file upload card with a drag-and-drop zone and per-file progress bars showing uploading and completed states. Styled with Tailwind-style Wind classes and dark-mode support.
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.
Flutter Discount Voucher Card with Promo Code
A bold discount voucher card with a gradient background, promo code block, copy action, and a call-to-action button. A marketing-ready coupon UI using Wind utility classes.
Flutter Component Search Card with Live Suggestions
A component search card built on the real WInput widget, with a focused search field and a categorized suggestion list. Demonstrates Wind form inputs with icon tiles and dark-mode pairs.
Flutter Quiz Multiple Choice Question Card with Progress
An interactive quiz question card with a progress bar, lettered multiple-choice options, a highlighted selected answer, and a submit button. Styled entirely with Tailwind-style Wind classes and dark-mode support.
Flutter Crypto Portfolio Balance Card with Coin Holdings
A clean crypto portfolio card showing total balance, daily change, and per-coin holdings with gradient token avatars and color-coded price deltas. Built with Wind utility classes and full dark-mode pairing.
Flutter FAQ Accordion Card with Expandable Answers
A frequently asked questions accordion: the first item is expanded with its answer and a down chevron, while the rest stay collapsed with a forward chevron. A clean support and help-center pattern built with Wind utility classes and dark-mode pairing.
Flutter Contact Form Card with Name, Email, and Message
A get-in-touch form built from real WInput fields: a labeled name field, an email field, and a multiline message area, finished with a full-width send button. Shows Wind's text input across single-line and multiline types, no MaterialApp required, with full dark-mode pairing.
Flutter Cookie Consent Privacy Banner
A privacy and cookie consent banner for web and mobile: an icon header, a plain-language explanation, an always-on essentials note, and a clear action hierarchy of accept, customize, and reject. A reusable compliance pattern composed from Wind className strings with dark-mode pairs.