Snippet Gallery
Discover and share Flutter UI components built with Wind. Browse community snippets, fork and customize them.
All Snippets
Browse 116 community snippets
Flutter Purchase Order Card with Indented BOM Tree
A procurement card whose body is a real three-level bill of materials: parent assemblies, indented children, and connector rules drawn with left borders, each line carrying its quantity pill and rolled-up cost. Flags the short-stock part and totals at the foot, styled with Wind utility classes and full dark-mode pairs.
Flutter Benefits Enrollment Card with Side by Side Plan Comparison
An open-enrollment card that puts two health plans in matched columns so premium, deductible, out-of-pocket max, and HSA match scan straight across, with the recommended plan outlined and badged. Closes on the yearly saving, styled with Wind utility classes and full dark-mode pairs.
Flutter Beehive Inspection Card with Stacked Box Layers
A hive record card built as the hive itself: outer cover, honey supers, queen excluder, brood box, and bottom board rendered as overlapping layers, each carrying its own frame count and status pill. Negative margins do the stacking, styled with Wind utility classes and full dark-mode pairs.
Flutter Dental Chart Card with FDI Tooth Grid
An odontogram card where position is the data: two arches of numbered tooth tiles in FDI notation, colour-coded for crowns, caries, and missing teeth, split by a midline. A legend and a finding note carry the diagnosis, styled with Wind utility classes and full dark-mode pairs.
Flutter Hiring Pipeline Card with Segmented Stage Band
A recruiter-facing requisition card whose hero is one segmented band, each stage sized to its candidate count with the number set inside it. Pairs a color legend with the candidates who moved today and an offers CTA, styled with Wind utility classes and full dark-mode pairs.
Flutter eSIM Data Plan Card with Segmented Block Meters
A mobile plan usage card that trades the usual continuous progress bar for discrete lit blocks, so data, minutes, and texts can be read at a glance. Adds a burn-rate warning, a roaming row, and a top-up CTA, all styled with Wind utility classes and full dark-mode pairs.
Flutter Veterinary Health Card with Vitals Tiles and Vaccination Chips
A pet health record card that pairs three vitals tiles with a wrapped row of vaccination chips, so an overdue booster stands out against the ones already cleared. Includes the next appointment and a booking CTA, built with Wind utility classes and full dark-mode pairs.
Flutter Lab Results Card with Flagged Reference Ranges
A clinical lab report card that sets every analyte next to its reference range, outlines the out-of-range results in amber and rose, and marks the normal ones with a quiet check. Includes a trend note and a provider CTA, styled end to end with Wind utility classes and full dark-mode pairs.
Flutter Grocery List Card with Quantity Pills and Running Total
A shared shopping list where checked items strike through, each row carries a quantity pill and a price, and the footer tracks the running total against the weekly budget. Wind line-through and pill utilities, no state package required.
Flutter Tire Pressure Card with Four Corner Wheel Readout
A TPMS panel that maps live psi onto the car itself: four corner tiles around a center chassis, the low tire flagged in amber with the exact top up amount, plus recommended pressure, tire temperature, and the nearest air pump.
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 Password Strength Card with Requirement Checklist
A sign-up password step that scores strength on a four segment meter, ticks off each requirement live, and confirms the password is not in a known breach list. Built with Wind className utilities and a real WInput field.
Flutter Insurance Claim Status Card with Payout Breakdown
A claim tracker for an insurtech app: a four stage stepper from filed to paid with completed, current and pending nodes, an estimated payout figure, a two tone bar splitting the covered amount from the deductible, the assigned adjuster, and a document shortcut. A good example of a Wind stepper built from fixed width columns and short connector bars, no stack or painter.
Flutter Crop Field Health Card with Soil Moisture Zones
A field monitoring panel for a precision agriculture app: an NDVI canopy score with a weekly delta, four zone rows with soil moisture bars and dry, optimal and wet states, a weather and harvest stat strip, and the next irrigation window. A good example of a Wind track and fill bar sized in arbitrary pixels so every row shares one scale.
Flutter Factory Andon Board Card with Line Station Status
A shop floor Andon board for an industrial operations app: shift output against target on a progress bar, an OEE badge, five station rows with running, idle and stopped colour coding, cycle times, and a status legend with total downtime. A good example of Wind status colour semantics carried by a square station tile plus a two-line label.
Flutter Mixing Console Card with Channel Strip Level Meters
A live mixer panel for a music production app: six vertical channel meters with peak and clip zones, per channel dB readouts, mute and solo pills, and a master bus meter with a no clipping badge. A good example of building vertical bar meters in Wind with a fixed height track and a bottom aligned fill, no custom painter.
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.