All Snippets
Browse 152 community snippets
Flutter Market Share Card with Marimekko Mosaic Columns
Two dimensions in one block of colour. Column width carries how big each segment is, the stack inside carries who owns it, so the story that one brand rules the small cars and another rules the big ones is visible before you read a single number. Pure Wind flex boxes with fixed pixel sizing and complete dark mode pairs.
Flutter Starting XI Lineup Card with Pitch and Player Chips
A matchday team sheet that actually looks like a pitch. Halfway line, penalty boxes and centre spot are drawn markings, and all eleven players are chips positioned at fixed coordinates, so any formation is a coordinate table away. Bench pills and a captain callout finish it, all in Wind utility classes with full dark mode pairs.
Flutter Guitar Chord Diagram Card with Barre and Finger Dots
The chord every beginner quits on, drawn properly. A real fretboard box with a thick nut, six strings, numbered finger dots and a full barre across the first fret, plus three easier voicings underneath. Every line and dot is a positioned Wind box, so there is no image asset and no charting library.
Flutter SLA Scorecard Card with Bullet Chart Target Markers
A support desk scorecard that reads the way an analyst reads one. Every metric sits on a qualitative band track carrying a thick actual value bar and a vertical target tick, so a missed target is obvious at a glance instead of buried in a percentage. Built with Wind utility classes, complete dark mode pairs, and no charting dependency.
Flutter Revenue Bridge Card with Floating Waterfall Steps
A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.
Flutter Punch Card Grid with Dot Size Encoded Busy Hours
A weekday by hour punch card where the dot diameter carries the value instead of a colour ramp, so the evening ridge and the weekend midday bulge read at a glance. Forty two sized dots placed on a fixed pixel lattice, pure Wind className strings.
Flutter Code Minimap Card with Viewport Window and Problem Markers
An editor file overview rendered entirely from Wind utility classes: a syntax tinted minimap of the whole file, a translucent viewport window showing where you are scrolled, and an overview ruler ticking off every error and warning below the fold.
Flutter Frame Profiler Card with Nested Flame Chart Layers
A performance profiler card that renders a real flame chart: nested call frames stacked by depth, a red frame budget line cutting across the stack, and the hot path picked out in amber. Built with Wind className strings, no charting package and no custom painter.
Flutter Battery Cell Balancing Card with Per Cell Voltage Gauges
A battery management panel that gives every cell in the pack its own vertical gauge, so a low cell and the one being bled off both stand out at a glance against the pack voltage and delta. Each gauge is a fixed height cell with a bottom anchored fill, which is the vertical twin of the classNames progress bar pattern.
Flutter Bowling Scoresheet Card with Frame by Frame Strike Marks
A league scoresheet that keeps the real ten frame table: each frame splits into two roll cells above a cumulative total, strikes and spares carry their traditional marks, and the frame in play is ringed in amber. The split cell grid is nested flex rows with fixed pixel widths, so the table stays aligned without a data grid widget.
Flutter Lap Delta Card with Diverging Sector Time Bars
A race telemetry panel where every mini sector is a bar that grows upward when the driver gains time and downward when it is lost, all anchored to a single zero line. The diverging chart is a row of flex columns with a fixed pixel spacer above each bar, so it needs no chart package and stays pure Tailwind syntax classNames.
Flutter Box Model Inspector Card with Nested Spacing Layers
A DevTools style inspector panel that unpacks a single Wind className into its real geometry: nested margin, border, padding and content layers, each labelled with the utility that produced it. The whole diagram is plain WDiv nesting with Tailwind syntax classNames, no custom painter and no layout maths in Dart.
Flutter Lab Assay Plate Card with 24 Well Dose Grid
A laboratory card that lays out a real 24 well culture plate: lettered rows, a dose ladder across the columns, wells shaded from blank through vehicle control to the highest concentration, and one excluded well ringed in amber. The whole plate is circular Wind divs on a gap grid, so a scientific readout ships as plain className utilities.
Flutter Borehole Log Card with Proportional Soil Strata Column
A ground investigation card that renders a real borehole log: each stratum is a coloured band whose height is proportional to its true thickness, depth boundaries line up on a shared rail, SPT blow counts sit beside every layer and the groundwater strike is marked across the column. Three aligned lanes of Wind divs, no chart package and no image.
Flutter Grain Storage Card with Silo Fill Level Gauges
A farm storage monitoring card that renders each bin as a real silo silhouette with a bottom anchored fill level, marks the 90 percent overfill line across every vessel, and flags the bin that has crossed it. The gauges are ordinary Wind divs with fixed pixel fills, so the whole yard reads at a glance with no chart library and no custom painter.
Flutter Archery Scoring Card with Target Face and Arrow Groupings
A precision sport scoring card that draws a full World Archery target face out of concentric Wind circles, plots where each of the end's six arrows landed, and reads the group back as end score, arrow average and running total. Every ring, arrow mark and stat tile is plain className utilities: no chart package, no canvas, no image asset.
Flutter Daily Crossword Card with Blacked Out Mini Grid
A daily mini puzzle card with a real five by five board: symmetric black squares, superscript clue numbers, an amber band on the active across word and a stronger fill on the cursor cell. Every visible word solves (BASIL, REALM and ENTER across, BARGE, SLANT and LEMUR down) and two cells are still blank, so the card reads as a puzzle in progress rather than a mockup. Below the grid sit the active clue, a struck through solved clue and a resume action. Wind className strings only, no grid library.
Flutter Moon Phase Card with Carved Gibbous Disc and Night Sky Panel
An astronomy card whose moon is not an image or an icon. A cream disc sits on a night sky panel and a second disc, painted in the exact panel colour, is offset to carve the terminator, so the gibbous shape comes free from two circles and nothing else. Under it runs the eight step phase cycle with the current phase ringed, then moon age, rise and set tiles and a next full moon note. Built from Wind className strings only.
Flutter Audience Overlap Card with Three Circle Venn Segments
A customer data platform card that answers the question every growth team asks: how much of my paid audience already gets my email. Three translucent circles overlap into a real Venn diagram, so the shared regions darken on their own and each lobe carries its own count. Underneath sit a colour keyed segment legend, reach and overlap tiles, and a suppression action. Built from Wind className strings only, no chart library.
Flutter Hiking Trail Card with Elevation Profile and Waypoints
An outdoor trail detail card built entirely from Wind className strings. A 34 step elevation silhouette carries a ridge line along its crest, ring markers call out the trailhead, the summit and the lake, and a distance axis runs underneath. Below it sit three trip stat tiles, a snow advisory strip and a full width navigation button. Ready to drop into a hiking, trail running or cycling app.
Flutter Domino Score Card with Pip Tile Rack
A game night score card for board game and party apps: a rack of real domino tiles with dice style pip faces and a bisecting line, the playable double highlighted, a draw tile for the boneyard, a head to head score strip with a race to 150 bar and round stats. Built with Wind utility classes and absolute pixel positioned pips.
Flutter Tournament Bracket Card with Semi Final Matchups
A knockout bracket card for sports and esports apps: seeded team rows with scores, losing sides dimmed, real bracket connectors drawn from side borders, the two finalists aligned to each pair and a dark final strip with kickoff time and venue. Built with Wind utility classes and complete dark mode pairs.
Flutter Metro Line Card with Station Route Map and Live Train
A transit line card for journey planning apps: an orthogonal route map with station markers, a bend into the return leg, a live train marker sitting between two stops, service status, headline stats and the next departures. Built with Wind utility classes and absolute pixel positioning, no map SDK and no canvas painting.
Flutter Glucose Monitor Card with Continuous Trend Line
A continuous glucose monitoring card for health and wearable apps: a 24 hour dot trend line plotted over a shaded target range, amber markers on every reading above 180 mg/dL, time in range and average tiles, and a spike callout. Built with Wind utility classes, complete dark mode pairs and no charting package.