Snippet Gallery
Discover and share Flutter UI components built with Wind. Browse community snippets, fork and customize them.
All Snippets
Browse 68 community snippets
Flutter Virtual Payment Card with Balance Summary
A premium gradient virtual payment card with an EMV chip, masked card number, cardholder details, and a balance summary row with a live trend badge. Built with Wind utility classes and full dark-mode pairs.
Flutter Notification Center Stack Panel
A grouped notification center panel with colored icon containers, sender and message previews, timestamps, unread dots, and a mark-all-read action. Built with Wind utility classes and full dark-mode pairs.
Flutter Place Preview Card with Gradient Map Header
A venue preview card with a gradient map header and location pin, a rating and distance row, a category badge, and open-now and Wi-Fi attribute pills. Built with Wind's Tailwind-style className and full dark-mode support.
Flutter Nutrition Facts Card with Macro Breakdown
A meal nutrition card showing total calories against a daily goal, protein/carbs/fat macro bars, and a micronutrient breakdown with percentage badges. Built with Wind's Tailwind-style className strings and full dark-mode pairs.
Flutter Kanban Task Card with Subtask Progress
A project task card in an in-progress state with a priority badge, labelled tags, a subtask progress bar, an assignee avatar cluster, and a due-date chip. Built with Wind utility classes and full dark-mode pairs.
Flutter Course Lesson Progress Card
A vibrant gradient e-learning card with a category pill, course title, a lesson progress bar, and XP, time-left, and completed chips, capped with a continue-learning call to action. Built with Tailwind-style className utilities in Flutter.
Flutter Air Quality Index Panel for Smart Home
A dark smart-home panel with a bold air quality index, a color-coded status pill, a teal-to-red gradient scale with a position marker, and humidity, CO2, and temperature sensor chips. Built with Tailwind-style className utilities in Flutter.
Flutter Sleep Score Panel with Stage Breakdown
A dark health panel led by a bold sleep score, with a segmented sleep-stage bar (light, deep, REM), a color-coded legend, and total-sleep and restfulness chips. A clean recovery-tracking pattern built with Tailwind-style className utilities in Flutter.
Flutter Stock Watchlist Card with Live Price Deltas
A dark fintech watchlist card with a bold portfolio value, a daily-change indicator, and a list of ticker rows showing price and color-coded percent deltas in green and red pills. Built with Tailwind-style className utilities in Flutter.
Flutter Event Ticket Card
A vibrant gradient event ticket with the headline act, venue and date, a perforated divider, seat metadata, and a barcode strip for scan-in. An entertainment pattern built with Tailwind-style className utilities in Flutter.
Flutter Language Learning Flashcard
A clean vocabulary flashcard with a language badge, XP reward, the target word with its phonetic spelling, a translation row with an audio control, and review actions. An e-learning pattern built with Tailwind-style className utilities in Flutter.
Flutter Habit Streak Tracker Card
A warm gradient habit card that gamifies a daily routine with a bold streak count, a seven-day completion dot row, and a one-tap log action. A health and productivity pattern built with Tailwind-style className utilities in Flutter.
Flutter Loyalty Rewards Card with Tier Progress
A dark gradient loyalty card that surfaces a points balance, membership tier badge, and a progress bar toward the next reward level, paired with quick Redeem and History actions. A clean fintech and retail pattern built with Tailwind-style className utilities in Flutter.
Flutter AI Assistant Chat Bubble Card
A glassmorphic AI assistant chat card with an avatar header, an online status dot, a response bubble wrapping an inset code block, a typing indicator, and suggestion chips. Built with Wind UI utility classes and dark mode pairs.
Flutter OTP Verification PIN Entry Card
A one-time-code verification card with a six-cell PIN entry row, a focused cell showing a caret and ring glow, a resend countdown, and a primary verify action. Built with Wind UI utility classes and dark mode pairs.
Flutter Order Delivery Status Timeline Card
A vertical order-tracking timeline with completed check nodes, an active out-for-delivery step, a pending delivery node, connecting lines, and an arrival ETA chip. Built with Wind UI utility classes and dark mode pairs.
Flutter Flash Sale Countdown Timer Card
A high-urgency flash sale card with a lightning badge, a discount pill, product pricing with a struck-through original price, and a live HH:MM:SS countdown over a warm gradient. Built with Wind UI utility classes and dark mode pairs.
Flutter iOS 27 Liquid Glass Translucency Control Card
The headline iOS 27 feature from WWDC 2026: a tunable Liquid Glass appearance card with a translucency slider that runs from ultra clear to fully tinted. Built with Wind UI over a vivid wallpaper so you can see exactly how much the glass refracts.
Flutter iOS 27 Siri AI Panel with Dynamic Island Glow
The new Siri AI surface from iOS 27, unveiled at WWDC 2026: a dark, focused panel with a soft desaturated multicolor glow expanding from the Dynamic Island. Built with Wind UI, it pairs a listening pill, a conversation thread, and an Ask anything field over a near black canvas.
Flutter Liquid Glass Music Player with Now Playing Card
A Liquid Glass now-playing card where vivid album art bleeds its color through a translucent surface, in the spirit of the iOS 26 design language. Built with Wind UI: gradient cover art, a glass play overlay, a progress track, and a full transport control row.
Flutter Liquid Glass Tab Bar with Floating Navigation
A frosted Liquid Glass navigation bar floating over a vivid gradient home screen, inspired by the iOS 26 design language unveiled at WWDC 2025. Translucent surfaces, glowing color orbs, and a glass Up Next card show how to build real depth with Wind UI.
Flutter Savings Goal Progress Card
A premium dark savings goal card: goal name with a wallet icon badge and milestone flag, an oversized saved amount against the target, a left-filled progress bar with percentage and next-milestone labels, and a bold Add Funds button. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
Flutter Flight Booking Summary Card
A boarding-pass style flight card: airline header with a plane badge and cabin pill, a departure-to-arrival route with airport codes, times and duration, a divider, and a footer of seat and gate chips with a live boarding countdown. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
Flutter Weather Forecast Card with Hourly Strip
A vibrant weather card on a sky gradient: city and date, an oversized current temperature, a one-line conditions summary, and a frosted hourly forecast strip with per-hour icons and temps. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.