All Snippets
Browse 136 community snippets
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.
Flutter Portfolio Allocation Card with Weighted Treemap Tiles
A holdings breakdown where every tile is sized by its share of the portfolio, so the biggest position is literally the biggest rectangle. Nine positions tile edge to edge across three weighted rows, with asset class totals below and a drift warning strip. Each tile is a fixed size Wind div, no chart library involved.
Flutter Class Schedule Card with Time Blocked Day Columns
A week view that puts real time on the vertical axis: five day columns, each holding class blocks whose offset and height come straight from start time and duration. Colour coded by class type with a legend, an hour axis on the left, and a next class strip with remaining spots. Pure Wind className layout, no charting package.
Flutter Piano Chord Trainer Card with Highlighted Keys
A music lesson card that draws a real keyboard: ten white keys in a row, seven black keys absolutely positioned across the gaps, and the four chord notes highlighted at the bottom of each key. Note tiles name the root, third, fifth and seventh, and a footer stat tracks weekly accuracy. Every key is a Wind styled div, no custom painter.
Flutter Focus Timer Card with Radial Minute Dial
A deep-work session card that turns the remaining minutes into a ring of 25 dots, one per minute, with the countdown in the middle. Round pills track the pomodoro cycle and two tiles summarise focused time and streak. Built with Wind className utilities, so the whole dial is plain divs.
Flutter A/B Test Results Card with Mirrored Variant Bars
An experiment readout where control and variant grow away from a shared centre axis, one metric per row, so which side wins is obvious before you read a single number. Ends with the projected revenue lift and a ship decision.
Flutter Feature Prioritization Card with Impact Effort Quadrant Plot
A roadmap card that plots ten candidate features on an impact versus effort field, split into quick wins, big bets, fill ins and time sinks. Each dot is placed at a real pixel offset, so the quadrant a feature lands in is the recommendation.
Flutter Conversion Funnel Card with Narrowing Stage Bars
A checkout funnel card where each stage is a centred bar scaled to its true share of traffic, so the drop off is visible as a shape rather than a number. Between the bars sit the exact losses, and the footer calls out the biggest leak in the flow.
Flutter Trading Chart Card with Candlestick Session Range
An intraday trading card that pairs a 14 bar candlestick chart with its volume histogram, a price axis, and the session open, high, low, and volume figures. Every wick and body is a plain Wind div, so the whole chart renders without a charting library.
Flutter Sprint Board Card with Kanban Status Columns
A kanban board squeezed into one card: three status columns side by side, each holding its own stack of task tiles, so the uneven column heights show where the work is piling up. Label chips, assignee avatars, struck-through done items and a WIP limit footer, all in Wind className strings.
Flutter Sprint Timeline Card with Offset Gantt Task Bars
A project schedule card where each task bar starts on a different day and runs a different length against one shared date axis, so overlap and slack are visible without a chart library. Five staggered bars plus a release milestone marker, positioned with fixed-pixel spacers inside a Wind row.
Flutter Beat Sequencer Card with 16 Step Track Grid
A drum machine pattern grid where instrument tracks run down the left and 16 steps run across the top, so every cell is a step you can read at a glance. Six tracks, downbeat markers on 1, 5, 9 and 13, and a transport button, all built from fixed-size Wind divs.
Flutter Family Tree Card with Generation Branch Connectors
A genealogy card that draws three generations as a real pedigree: spouse pairs joined by marriage bars, a drop line into the next generation, and a distribution rule that branches down into each child. Every connector is a fixed-pixel Wind div, so the whole tree is className strings with no custom painter and no canvas.
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.