All Snippets
Browse 184 community snippets
Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A ship navigation lights card for boating, sailing and marine apps: a night panel with a top down hull ringed by the COLREGs Rule 21 light arcs, red port and green starboard sidelights at 112.5 degrees each, a 225 degree white masthead ring and a 135 degree sternlight, the beam line for reference, and the Rule 22 visibility ranges.
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
An electromagnetic spectrum card for science, physics and education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands laid on a log wavelength axis from 10 m to 0.1 pm using NASA band edges, a connector that zooms the thin visible slice into a 700 to 400 nm rainbow strip, and stats for bands and decades.
Flutter Euro Banknote Card with True Scale Note Stack and Denomination Colours
A euro banknote card for banking, travel and currency apps: all six Europa series notes from €5 to €200 drawn to true scale in their official grey, red, blue, orange, green and yellow-brown, each tagged with its millimetre size, plus width and height stats showing how every step up adds 6 or 7 mm.
Flutter Seven Segment Display Card with Lit LED Digits and Register Byte Decoder
A seven segment LED card for embedded, IoT and maker apps: a four digit red display reading 12.45 with unlit segments still glowing faintly, an enlarged digit with segments A to G and the decimal point labelled, its MAX7219 no-decode register byte 0xED in hex and binary, and a DP to G bit strip from D7 to D0.
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums
An education card that lays out rows 0 to 7 of Pascal’s triangle as binomial coefficient tiles, shades every odd entry so the Sierpinski pattern shows through, and runs a row sum gutter that doubles from 1 to 128. Tiles count the 36 entries, the 27 odd ones and the 255 total. Built with centred Wind rows and one node per number, ready for maths, tutoring and puzzle apps.
Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate
A fintech card that turns a UK income tax bill into a staircase: the personal allowance, basic and higher rate bands for 2026/27 drawn to scale for a 60,000 pound salary, the tax collected in each band above its step, and tiles for the total, the effective rate and the marginal rate. Built with Wind baseline aligned bars, ready for payroll, budgeting and personal finance apps.
Flutter File Permission Card with rwx Grid and Octal Mode Readout
A developer tools card that explains Unix file permissions at a glance: a terminal styled grid of owner, group and other against read, write and execute, with each granted bit worth 4, 2 or 1 summing into the octal digits of mode 755, plus the chmod command and the matching -rwxr-xr-x listing. Built with Wind tiles and colour coded triads, ready for DevOps dashboards, hosting panels and learning apps.
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point
An annotated airfield card that draws the approach end of runway 27 to scale: eight threshold stripes for a 100 ft wide runway, the 27 designator derived from a 268 degree magnetic heading, a dashed centreline and the twin aiming point bars at 1,000 ft, each called out in a side lane. Built with Wind absolute positioning and hairline connectors, ready for aviation, flight training and travel apps.
Flutter Morse Code Card with Dot Dash Timing Signal Strip
A Morse code keyer card for learning and ham radio apps: HELLO spelled with dot and dash pills under each letter, a 49 unit signal strip drawn to scale with on marks and letter gaps, the four timing rules for dots, dashes, letter gaps and word gaps, and a key button.
Flutter Contrast Checker Card with WCAG AA and AAA Pass Badges
A WCAG 2.2 colour contrast card for design system and accessibility apps: text and background swatches, a live preview of body and large text, the 3.74:1 ratio on a threshold scale, AA and AAA pass or fail tiles for normal and large text, and a one-tap fix to the nearest passing shade.
Flutter Connect Four Board Card with Winning Diagonal and Series Score
A Connect Four game card for casual and board game apps: a 7 by 6 board with ringed winning discs on the diagonal, a marker over the last column played, the head to head series score, move and disc counts, and a play-again button.
Flutter Resistor Colour Code Card with Four Band Decoder and Ohm Readout
A 4-band resistor decoder card for electronics and maker apps: a through-hole resistor drawn in red, violet, green and gold, a per-band legend, the decoded 2.7 MΩ value with its ±5% range, and the full 0 to 9 digit colour strip with the used bands outlined.
Flutter Subnet Calculator Card with 32 Bit Network and Host Grid
A subnet calculator card for Flutter developer and network tools, built with Wind utility classes: an IPv4 address with its CIDR prefix, all 32 bits laid out by octet with network bits and host bits in two colours, and the derived network, mask, first and last host, broadcast and usable host count. Every value is computed from the address, so the card is a correct /21 worked example.
Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands
A hearing check card for Flutter health apps, built with Wind utility classes: a pure tone audiogram with the clinical marker convention (red circles for the right ear, blue crosses for the left), dotted threshold lines across 250 Hz to 8 kHz, translucent severity bands from normal to severe, per-ear pure tone averages, and a noise notch callout. Positioned with fixed px, so the chart scales cleanly to a hero image.
Flutter Soroban Abacus Card with Heaven and Earth Bead Rods
A soroban trainer card for Flutter maths and education apps, built with Wind utility classes: seven rods where every counted bead sits against the reckoning beam (one heaven bead worth 5, four earth beads worth 1), unit dots on the beam, the digit under each rod, and a streak, accuracy and pace row. Bead positions are computed from the number, so the abacus always reads true.
Flutter Golf Scorecard Card with Birdie Circles and Bogey Squares
A back nine scorecard card for Flutter golf apps, built with Wind utility classes: hole and par rows, your strokes marked the way golfers read them (circles under par, a double ring for the eagle, squares over par), a round total against par, and a post-to-handicap button. Pure className styling with dark-mode pairs, ready to drop into a round tracker.
Flutter Braille Learning Card with Six Dot Letter Cells
A Braille learning card built with Wind: the name Louis spelled in six dot cells with the capital sign, raised and flat dots, the matching Unicode Braille line, a numbered dot key that explains the letter in focus, and alphabet progress. Every cell follows Unified English Braille. Pure Tailwind-style className utilities, ready for accessibility, education and language learning apps.
Flutter Barbell Plate Loader Card with IPF Colour Coded Plates
A barbell plate loader card built with Wind: a side-on barbell with IPF colour coded calibrated plates stacked heaviest first, competition collars and sleeves, a per-side plate breakdown, and an attempt strip for a powerlifting meet. The maths is exact: a 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Pure Tailwind-style className utilities, ready for gym, strength training and meet management apps.
Flutter Poker Hand Odds Card with Board Cards and Equity Bar
A poker hand odds card built with Wind: heads-up hole cards with suit glyphs, a felt-green flop with empty turn and river slots, a split win and lose equity bar, and every out laid out as mini cards. The numbers are exact, enumerated over all 990 turn and river run-outs. Pure Tailwind-style className utilities, ready for poker trainers, card game and odds calculator apps.
Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A container ship bay plan card built with Wind: a row by tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover and a tapered hold below, every slot coloured by discharge port, plugged reefers marked, and a stowage legend with live counts. Pure Tailwind-style className utilities, ready for logistics, shipping and terminal operations apps.
Flutter Periodic Element Card with Bohr Model Electron Shells
An element of the day card for chemistry and study apps, built with Wind in Flutter. A Bohr model places all 26 electrons of iron on four concentric shells with the valence pair highlighted, shell chips spell out the 2, 8, 14, 2 filling, and a periodic table tile sits beside the configuration, melting point and density.
Flutter Speedcube Timer Card with Unfolded Scramble Net
A speedcubing timer card for puzzle and hobby apps, built with Wind in Flutter. The unfolded cube net shows the exact sticker state the 20-move scramble produces, with the scramble in WCA notation, the last five solves with dropped times in parentheses, and best, average-of-five and solve count tiles above a start-inspection action.
Flutter Git Commit Graph Card with Branch Lanes and Merge Lines
A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
Flutter Eye Test Card with Snellen Acuity Chart
A vision check card for health and optician apps, built with Wind in Flutter. A real Snellen letter chart shrinks line by line from 20/200 to 20/15, the 20/20 line is highlighted as the last line read, and acuity tiles summarise each eye above a book-an-exam action.