All Snippets
Browse 152 community snippets
Flutter Newsletter Subscribe Card with Email Input
An email capture card for marketing sites and product pages: a gradient icon badge, a headline and reassurance copy, a real WInput email field (Wind's text input that works without a MaterialApp), a full-width subscribe button, and a social-proof footer. Dark-mode ready and styled entirely with Wind className strings.
Flutter Sign In Card with Social Login
A polished authentication card built with real WInput text fields, Wind's text input that works without a MaterialApp: a brand mark, an email field, a masked password field with a forgot-password link, a primary sign-in action, and a Google social-login option below an or-continue divider. Dark-mode ready and styled entirely with Wind className strings.
Flutter Game Leaderboard Card with Rank Medals and Your Position
A weekly leaderboard for games and social apps: gold, silver, and bronze rank medals, gradient initial avatars, points per player, and a highlighted row pinning the current user with their movement. Composed entirely from Wind className strings with dark-mode pairs.
Flutter Appointment Booking Card with Date and Time Slots
A scheduling card for services and healthcare: a provider header with rating, a horizontal date selector, a wrapping grid of time slots with selected and booked states, and a confirm button echoing the chosen slot. Pure Wind utility styling, dark-mode ready.
Flutter Streaming Movie Card with Rating and Genre Tags
A cinematic detail card for a streaming or movie app: a gradient poster with a centered play affordance, rating and 4K HDR badges, genre tags, a two-line synopsis, and stacked Play and Add to My List actions. Built with Wind utility classes and full dark-mode pairing.
Flutter Home Energy Usage Panel with Room Breakdown
A smart-home energy dashboard with today's total kWh, a savings trend badge, and per-room consumption bars. Built for home automation and utility apps.
Flutter Reading Progress Card with Chapter Tracker
A reading companion card with book cover, genre tag, chapter progress bar, time-left estimate, rating, and a continue-reading action. Ideal for ebook, audiobook, and learning apps.
Flutter Trip Itinerary Day Card with Booking Codes
A daily travel itinerary card listing timed stops with category icons, confirmation codes, and booking status badges. Great for trip planners and travel concierge apps.
Flutter Bill Split Summary Card with Per-Person Shares
A group expense card showing the total bill, each person's share with avatar initials, settled and pending states, and how much you're owed. Perfect for fintech and social payment apps.
Flutter Job Listing Card with Tags and Salary
A job listing card with a gradient company logo, role title, location row, colored employment tags, and a salary range beside an Apply call to action. Built with Wind utility classes and full dark-mode pairs.
Flutter Recipe Card with Cook Time and Difficulty
A recipe card with a warm gradient cover, rating and saved badges, dish title and description, and meta chips for cook time, servings, and difficulty above a Cook now call to action. Built with Wind utility classes and full dark-mode pairs.
Flutter Live Sports Score Card
A live match score card with a league label, pulsing-style LIVE badge, two team rows with colored crest initials and bold scores, and a match-status footer. Built with Wind utility classes and full dark-mode pairs.
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 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 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 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.