All Snippets
Browse 184 community snippets
Flutter Messages Inbox List with Unread Badges
A messaging inbox list with gradient avatars, last-message previews, timestamps, and unread count badges. Built with Wind utility classes and full dark-mode pairing.
Flutter Discount Voucher Card with Promo Code
A bold discount voucher card with a gradient background, promo code block, copy action, and a call-to-action button. A marketing-ready coupon UI using Wind utility classes.
Flutter Component Search Card with Live Suggestions
A component search card built on the real WInput widget, with a focused search field and a categorized suggestion list. Demonstrates Wind form inputs with icon tiles and dark-mode pairs.
Flutter Quiz Multiple Choice Question Card with Progress
An interactive quiz question card with a progress bar, lettered multiple-choice options, a highlighted selected answer, and a submit button. Styled entirely with Tailwind-style Wind classes and dark-mode support.
Flutter Crypto Portfolio Balance Card with Coin Holdings
A clean crypto portfolio card showing total balance, daily change, and per-coin holdings with gradient token avatars and color-coded price deltas. Built with Wind utility classes and full dark-mode pairing.
Flutter FAQ Accordion Card with Expandable Answers
A frequently asked questions accordion: the first item is expanded with its answer and a down chevron, while the rest stay collapsed with a forward chevron. A clean support and help-center pattern built with Wind utility classes and dark-mode pairing.
Flutter Contact Form Card with Name, Email, and Message
A get-in-touch form built from real WInput fields: a labeled name field, an email field, and a multiline message area, finished with a full-width send button. Shows Wind's text input across single-line and multiline types, no MaterialApp required, with full dark-mode pairing.
Flutter Cookie Consent Privacy Banner
A privacy and cookie consent banner for web and mobile: an icon header, a plain-language explanation, an always-on essentials note, and a clear action hierarchy of accept, customize, and reject. A reusable compliance pattern composed from Wind className strings with dark-mode pairs.
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.