Snippet Gallery
Discover and share Flutter UI components built with Wind. Browse community snippets, fork and customize them.
All Snippets
Browse 100 community snippets
Flutter Team Fixture List Card with Result Badges and Form Strip
A football club fixture card that splits played matches from upcoming ones: paired team initial avatars, scores with win, draw and loss badges, a highlighted next match, and a last-five form strip of coloured result tiles. Demonstrates overlapping avatars with ring borders, section labels and grouped rows in Wind.
Flutter Transit Departure Board Card with Live Line Times
A live departure board for a transit stop: coloured line-number tiles, destination rows with on time and delayed states, countdown times, a last-updated footnote and a route planner action. A good example of Wind rows that pair a fixed square badge with a two-line label and a right-aligned value.
Flutter VPN Connection Status Card with Server and Speed Stats
A VPN client status card with a large protected state badge, the active server and its latency, protocol and kill switch rows in a soft inner panel, session and throughput stats, plus a disconnect action. Shows how Wind handles centred column layouts, nested panels and dark-mode inverted buttons.
Flutter Cloud Storage Quota Card with Category Breakdown Bar
A cloud storage usage card that breaks a 15 GB plan into photos, videos, documents and app backups: a segmented multi-colour capacity bar, per-category legend rows with size and share, a billing footnote and an upgrade call to action. Built entirely with Wind utility classes, including fixed-width bar segments, a rounded icon tile and full dark-mode pairs.
Flutter Festival Lineup Card with Set Times and Stages
A music festival lineup card built with Wind for Flutter: a gradient stage-art header with the festival name and date, a set-times list with the headliner starred and per-act time pills, colored stage tag chips, and a venue row above a get-passes button. A multi-act program guide using Tailwind-style className utilities with dark-mode pairs.
Flutter Invoice Payment Due Card with Line Items and Total
A freelance and B2B invoice card built with Wind for Flutter: an invoice number and biller header, a due-date badge, itemized line rows with quantity and rate, and a subtotal, tax, and emphasized total stack above a pay button. A due-date-driven payable document using Tailwind-style className utilities with dark-mode pairs.
Flutter Medication Schedule Card with Dose Reminders
A daily medication adherence card built with Wind for Flutter: an adherence progress bar, a taken-count chip, and per-drug rows showing a category color dot, name and dose, and a state chip (taken with time, missed, or upcoming) above a log-dose button. A clinical prescription tracker using Tailwind-style className utilities with dark-mode pairs.
Flutter CI/CD Deploy Pipeline Status Card with Stage Progress
A continuous deployment pipeline card built with Wind for Flutter: a branch and commit header, a running status pill, a segmented stage progress bar, and per-stage rows (build, test, deploy, approve) each with a status icon, detail line, and duration. A staged devops process view using Tailwind-style className utilities with dark-mode pairs.
Flutter API Key Usage and Rate Limit Card for Developer Tools
A developer console usage card built with Wind for Flutter: a masked API key with a copy action, a plan badge, a monthly request quota bar, per-endpoint status chips (200 OK and 429 rate-limited), and a reset countdown above a manage-keys button. A focused single-key rate-limit console using Tailwind-style className utilities with dark-mode pairs.
Flutter NFT Collectible Bid Card with Live Auction
A digital collectible auction card built with Wind for Flutter: a gradient artwork block, a verified collection name, a favorites count, the current owner, and a bid panel showing current bid in ETH plus a live countdown before the place-a-bid button. A single-asset web3 marketplace listing using Tailwind-style className utilities with dark-mode pairs.
Flutter Cinema Seat Selection Card with Screen and Legend
A movie theater seat picker built with Wind for Flutter: a screen indicator bar, a color-coded seat grid (available, selected, taken), a state legend, and a live seat and price summary above a booking button. A pre-purchase seat map layout using Tailwind-style className utilities with dark-mode pairs.
Flutter Cafe Loyalty Stamp Card with Reward Progress
A digital coffee-shop loyalty card built with Wind for Flutter: a fill-the-grid stamp collection, a stamps-earned counter chip, and a redeem call to action. Shows how to build retail rewards UI with Tailwind-style className utilities and dark-mode-ready color pairs.
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 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 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 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.