All Snippets
Browse 136 community snippets
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.
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.