Vidly: Flutter Social Commerce UI Kit | 35+ Screens with TikTok-Style Feed & Live Streaming

Noor Mohammad RahmaniMarch 22, 2026

Production-ready social commerce Flutter UI kit with 35+ complete screens. TikTok-style vertical video feed, live streaming with real-time chat & auctions, creator studio with analytics, Mapbox order tracking, full shopping flow from bag to checkout, and a complete dark & light theme system with 20 color tokens. Built with Flutter 3.9+ and GoRouter.

Vidly is a comprehensive Flutter UI kit for building TikTok-style social commerce applications. With 35+ handcrafted screens, 120+ reusable widgets, and a complete dual-theme system, Vidly delivers everything you need to ship a social shopping experience — from short-form video feeds to live streaming, creator tools, and end-to-end checkout. Built with Flutter 3.9+, GoRouter, and a 20-token color system, Vidly covers the full journey: onboarding, authentication, video feed, live streams, product discovery, creator dashboard, shopping bag, checkout, order tracking with Mapbox, profile management, and settings.

35+Complete Screens

9Feature Modules

120+Reusable Widgets

Purchase Now

🎯 What Makes Vidly Different

1. TikTok-Style Video Feed

Full-screen vertical swipe feed with creator info, engagement sidebar (like, comment, share, bookmark), inline product tags, scrolling music ticker, and video progress bar. The engagement layout mirrors TikTok's proven UX.

2. Live Streaming Commerce

Complete live stream interface with real-time chat, floating hearts, gift button, pinned product card, product list bottom sheet, auction countdown timer, bid button, and picture-in-picture overlay. Glassmorphic chat input with no double-border artifacts.

3. Creator Studio

Three-screen creator dashboard: analytics overview with sales, views, click rate, and revenue charts; content creator with upload area, filter previews, and video editor toolbar; and product manager for tagging products at timestamps in videos.

4. Complete Dark & Light Theme

Full dual-theme system built on 20 color tokens, 5 gradient presets, and 4 shadow presets. Every screen and widget reads from AppColorTokens — one change propagates everywhere. Seamless theme switching out of the box.

5. Mapbox Order Tracking

Interactive order tracking map with delivery route visualization, real-time location updates, and estimated arrival times using Mapbox Maps.

6. End-to-End Shopping Flow

Complete purchase journey: shopping bag with swipe-to-delete, quantity controls, promo codes, saved-for-later section, multi-step checkout, animated order success, and real-time order tracking.

📱 Complete Feature Breakdown (35+ Screens)

🔐 Authentication & Onboarding (6 screens)

✓ Splash Screen - Animated logo reveal with breathing glow effect and progress line
✓ Onboarding - Parallax page view with skip/next navigation
✓ Login - Email/password with social providers (Apple, Google, Meta)
✓ Sign Up - Registration with live password strength indicator
✓ Forgot Password - Email recovery flow
✓ OTP Verification - Pin code input for two-factor authentication

✓ Feed - Full-screen vertical swipe with video cards, engagement sidebar, inline product tags, and floating Live button
✓ Main Shell - Bottom navigation wrapper with glassmorphic blur effect

🔍 Explore & Discovery (1 screen)

✓ Explore - Search bar, horizontal category chip filters, bento grid layout with mixed tile sizes, trending creators with follow buttons, and featured collections carousel

🔴 Live Streaming (1 screen)

✓ Live Stream - Real-time chat, viewer count, floating hearts, gift button, pinned product card, product list bottom sheet, auction countdown timer, bid button, and picture-in-picture overlay

🛍️ Product Detail (1 screen)

✓ Product Detail - Swipeable media gallery, color and size variant selectors, fit guide with size chart, video reviews carousel, text reviews with star ratings, similar products section, and sticky "Add to Bag" bottom bar

🎬 Creator Studio (3 screens)

✓ Dashboard - Sales, views, click rate, revenue charts, top products, recent orders
✓ Content Creator - Upload area, filter previews, video editor toolbar, caption input, publish/draft
✓ Product Manager - Tag products at timestamps in video timeline

🛒 Shopping & Checkout (4 screens)

✓ Shopping Bag - Cart items with swipe-to-delete, quantity controls, promo code field, saved-for-later section
✓ Checkout - Shipping form, delivery method selection, payment card display, itemized order summary
✓ Order Success - Confirmation animation, order details, tracking steps
✓ Order Tracking - Interactive Mapbox map with delivery route visualization

👤 Profile & Settings (9 screens)

✓ Profile - Avatar, stats (followers, following, posts), action buttons, four tab views (posts, videos, bought, liked)
✓ Settings - Grouped sections for account, preferences, privacy with dark mode toggle
✓ Edit Profile - Avatar editor, bio, social links, verification status
✓ Change Password - Current + new password form
✓ Privacy - Privacy policy display
✓ Blocked Users - Block list with unblock action
✓ Help Center - FAQ and documentation
✓ Notification Settings - Granular push/email toggles
✓ Language - Language selection with radio list

🔔 Notifications (1 screen)

✓ Notifications - Three-tab activity center (Sales, Comments, System) with unique tile designs and empty state handling

All screens include proper loading states, empty state handling, responsive layouts, and polished micro-interactions. Full dark and light theme support across every screen and widget.

👥 Perfect For

📱 Social Commerce Apps
Build TikTok-style shopping platforms where users discover products through short-form video and live streams. 🔴 Live Shopping Platforms
Create live streaming commerce apps with real-time auctions, chat, and product showcases. 🎬 Creator Economy Apps
Launch creator-driven marketplaces with analytics dashboards, content tools, and product tagging. 🛒 Modern E-Commerce
Build next-generation shopping experiences that blend social engagement with traditional e-commerce flows.

⚙️ Technical Stack & Architecture

Framework & Language

Flutter 3.9+ | Dart 3.x
Clean feature-based architecture
GoRouter with shell navigation
Zero external state management — pure Flutter

Navigation & Routing

go_router (v15.1.2) - Declarative routing with shell navigation
27 named routes
Bottom tab navigation with shell route pattern
Deep linking support

Map & Location

Mapbox Maps Flutter (v2.6.1) - Interactive maps for order tracking
Delivery route visualization
Real-time location updates

UI & Components

hugeicons (v0.0.4) - Icon library
dotted_line (v3.2.3) - Dotted line UI elements
device_preview (v1.2.0) - Multi-device testing
cupertino_icons (v1.0.8) - iOS-style system icons
120+ reusable widgets (25 core + 98 feature-specific)

Theme System

20 Color Tokens per mode (dark & light)
Color Scheme:
- Primary: Teal (#14B8A6 dark / #0D9488 light)
- Secondary: Cyan (#06B6D4 dark / #0891B2 light)
- Background: #0A0A0A dark / #F5F5F7 light
- Surface: #111111 dark / #FFFFFF light
- Error: #FF4757 dark / #DC2626 light
- Success: #2ED573 dark / #16A34A light
5 Gradient Presets: primaryGradient, darkGradient, cardGradient, limeGlow, videoOverlay
4 Shadow Presets: cardShadow, elevatedShadow, glowLime, glowCyan
Spacing: xs(4) → sm(8) → md(12) → lg(16) → xl(20) → xxl(24) → xxxl(32) → section(40)
Animation Durations: fast(200ms), medium(350ms), slow(500ms), page(800ms), splash(2500ms)

Core Widgets (25 production-ready)

Buttons: PrimaryButton, SecondaryButton, GradientButton, IconButtonCircle
Inputs: CustomTextField, PasswordTextField with visibility toggle
Layout: CustomAppBar, BottomNavBar (glassmorphic), GlassmorphicContainer, SectionHeader
Avatars: AvatarWidget with gradient border, AvatarGroup, VideoThumbnail
Data Display: BadgeWidget, TagChip, RatingStars, PriceTag, DotIndicator
Feedback: ShimmerLoading, SnackbarWidget
Interactive: SlideToAction, AnimatedCounter, CountdownTimerWidget

Project Structure

Feature-based organization (9 modules)
Each feature follows screens/ + widgets/ pattern
Centralized theme with ThemeExtension
Dummy data included — runs out of the box

Platform Support

Android API 21+
iOS (Xcode 14+)
Web (Chrome, Firefox, Safari, Edge)

Code Quality: Clean feature-based architecture with 9 modules, 120+ reusable widgets, centralized 20-token theme system via ThemeExtension, GoRouter with 27 named routes, and zero external state management dependencies. Runs out of the box with included dummy data.

🖼️ Screenshots

Vidly Flutter social commerce UI kit showing TikTok-style video feed, live streaming, creator studio, product detail, and shopping checkout interfaces

Frequently Asked Questions

Is this a complete social commerce app?

Vidly includes 35+ production-ready UI screens with GoRouter navigation and complete user flows across 9 feature modules. This is a comprehensive UI/UX foundation. You'll need to integrate your backend API, video streaming service, payment gateway, and Mapbox access token.

Does the video feed actually play videos?

The video feed UI is fully designed with placeholder thumbnails and all TikTok-style interactions (like, comment, share, bookmark, product tags). Integrate your video player and streaming backend to enable actual video playback.

How does the live streaming work?

The live stream screen includes complete UI for real-time chat, floating hearts, gifts, pinned products, auction countdown, and picture-in-picture. Connect your live streaming service (e.g., Agora, Mux, or WebRTC) for actual streaming functionality.

Does Mapbox require a paid plan?

Mapbox offers a generous free tier with 50,000 monthly active users. The order tracking UI is fully implemented — just add your Mapbox access token in the configuration file.

Can I customize the theme colors?

Absolutely! Update the primary and secondary values in the dark and light token sets inside app_colors.dart. The entire app uses AppColorTokens via ThemeExtension — one change propagates everywhere.

Does it include dark mode?

Yes! Vidly ships with a complete dark and light theme built on a 20-token color system. Theme switching is handled through ThemeProvider and works seamlessly across all 35+ screens.

Can I use a different state management?

Vidly uses zero external state management — pure Flutter. This makes it easy to adopt any state management solution (Bloc, Riverpod, GetX, Provider) without migration overhead.

Is the creator studio functional?

The creator studio includes complete UI for analytics dashboard, content creation with video editor toolbar, and product manager for tagging. Connect your analytics API and content management backend to enable full functionality.

Does it support order tracking?

Yes! Real-time order tracking screen with Mapbox integration. Visualize delivery routes, show driver location, and display estimated arrival times.

Do I get future updates?

Yes! All future updates, new screens, and improvements are included with your one-time purchase. No subscription fees.

📦 Package Includes

✅ Complete Source Code
35+ production-ready screens across 9 feature modules including authentication, video feed, live streaming, explore, product detail, creator studio, shopping, profile, and notifications. ✅ TikTok-Style Video Feed
Full-screen vertical swipe feed with engagement sidebar, inline product tags, music ticker, and creator info. Production UX patterns proven by TikTok and Instagram Reels. ✅ Live Streaming Commerce
Complete live stream UI with real-time chat, floating hearts, gifts, pinned products, auction countdown, bid button, and picture-in-picture overlay. ✅ Creator Studio
Three-screen dashboard with analytics overview, content creator with video editor toolbar, and product manager for tagging products at video timestamps. ✅ Mapbox Order Tracking
Interactive map with delivery route visualization, real-time tracking, and estimated arrival times. ✅ Complete Shopping Flow
Shopping bag, multi-step checkout, animated order success, and real-time order tracking. ✅ Dark & Light Theme
Complete dual-theme system with 20 color tokens, 5 gradient presets, and 4 shadow presets. Seamless switching across all screens. ✅ 120+ Widget Library
25 core widgets + 98 feature-specific components: buttons, inputs, avatars, glassmorphic containers, shimmer loading, slide-to-action, animated counters, and more. ✅ Lifetime Updates
All future screens, features, bug fixes, and Flutter version upgrades included forever. ✅ Email Support
Setup assistance, integration guidance, and technical support via Email (rto1680@gmail.com).

🚀 Get Started Today