All Snippets
Browse 184 community snippets
Flutter Time Zone Meeting Planner Card with Work Hour Tracks
A meeting planner card for Flutter team apps, built with Wind: one 24 hour UTC track per city showing work, awake and asleep hours, a highlighted best slot column, local times with an after hours flag, a legend and an invite button. Every block is computed from the real September UTC offsets.
Flutter Bookshelf Card with Book Spine Shelves and Reading Goal
A reading tracker card for Flutter book apps, built with Wind: two wooden shelves of book spines in varied heights, colours and foil bands, a flat stack, a bookmark ribbon on the current read, a reading challenge badge and a page progress bar. The spine counts match the goal it reports.
Flutter Bubble Level Card with Bullseye and Tilt Vials
A spirit level card for Flutter tool apps, built with Wind: a bullseye vial with target rings and crosshair, vertical and horizontal tube vials with tolerance marks, a big total tilt readout, roll and pitch tiles and a set reference button. Every bubble sits where the stated tilt puts it.
Flutter Chess Puzzle Card with Mate in Two Board
A daily chess puzzle card for Flutter apps, built with Wind: a full 8x8 board with coordinates, Unicode pieces, a highlighted last move, a mate in two badge, solve stats and a hint button. The position is a real puzzle with exactly one winning first move.
Flutter Word Game Card with Letter Tile Rack and Premium Squares
A word duel card showing a live board row with triple word, double word and letter premium squares, a scoring play sitting on the pink double word, and a seven tile rack where every tile carries its own point value. Built with Wind utility classes over WDynamic, tiles and squares are plain divs, so there is no canvas and no image assets.
Flutter Restaurant Floor Plan Card with Table Occupancy Status
A host stand card that lays out a real dining room: round tops, banquette booths, a communal eight top and a bar with stools, each table coloured free, seated or held. Built with Wind utility classes over WDynamic, every table is an absolutely positioned div at a fixed pixel coordinate, so the plan needs no canvas and no image assets.
Flutter Typing Heatmap Card with Colour Coded QWERTY Keys
A typing analytics card that draws a real staggered QWERTY layout, tinting every key by how often it was pressed, from a cold grey Z to a hot rose E. Built with Wind utility classes over WDynamic: 26 keycaps, a space bar and a five step legend, all plain divs with no canvas and no image assets.
Flutter Sheet Music Practice Card with Staff Notation
A music practice card that renders a real treble staff: five ruled lines, a clef, a 4/4 time signature, and eight note heads with stems placed at true pitch positions, with the current note highlighted. Built with Wind utility classes over WDynamic, so the whole score is absolutely positioned divs, no canvas and no image assets.
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.