All Snippets
Browse 136 community snippets
Flutter Habit Streak Card with Contribution Heatmap Grid
A habit tracker card built with Wind: a flame streak counter, a contribution-style heatmap grid with four intensity shades across five weeks, and a Less-to-More legend. Dark-mode ready.
Flutter Ride Fare Receipt Card with Fare Breakdown
A ride-hailing fare receipt built with Wind: a completed-trip header, a driver row with star rating, pickup and dropoff stops, an itemized fare breakdown for base, distance, time, booking fee, and tip, a bold total, and the payment method. Dark-mode ready.
Flutter Year in Review Recap Card with Top Artists
A bold year-in-review recap card built with Wind: a violet-to-fuchsia gradient, an oversized minutes-listened stat, a ranked top-artists list with proportional progress bars, and a top-genre plus listening-rank footer. Dark-mode ready.
Flutter Boarding Pass Card with Perforated Stub and Barcode
A polished airline boarding pass built with Wind: an indigo header with the SFO to NRT route and flight code, a perforated dotted tear line, a passenger plus gate, seat, and boarding key-value grid, and a scannable barcode strip. Dark-mode ready.
Flutter Subscription Management Card with Usage Meter
A subscription management card showing the current plan, monthly price, renewal date, an API usage meter, and a manage action. Clean Wind styling with complete dark-mode pairs.
Flutter Real Estate Property Listing Card with Photo Header
A real estate property listing card with a gradient photo header, price overlay, location, beds, baths, and area stats, plus a details call to action. Responsive Wind layout with dark mode.
Flutter EV Charging Status Card with Battery Progress
An EV charging status card showing battery percentage, a gradient progress bar, energy added, time remaining, and session cost, with a stop-charging action. Wind-styled with dark-mode support.
Flutter Meditation Session Card with Streak and Weekly Goal
A calming daily meditation card with a gradient backdrop, guided session details, a streak badge, and a weekly goal progress bar. Built with Wind utility classes and complete dark-mode pairs.
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.