Flutter YouTube Clone

A comprehensive, responsive YouTube web application clone built with Flutter. This project faithfully recreates the YouTube experience across all devices with pixel-perfect UI and core functionality.

📱 Responsive Design

Adapts seamlessly to any screen size (mobile, tablet, desktop)

Maintains YouTube's look and feel across all device formats

🛠️ Tech Stack

Flutter for cross-platform UI development

YouTube API for fetching real content data

MVVM Architecture for clean, maintainable codebase

Provider for state management

✨ Features

Home Feed

Dynamic content loading with infinite scroll

Category-based content filtering

Trending videos section

Video Player

Full-featured custom video player Playback controls (play/pause, seek, volume) Video quality selection Picture-in-picture support

Recommendation Engine

"Up Next" video suggestions

Related content based on viewing history

Search Functionality

Real-time search suggestions

Filter results by relevance, upload date, etc.

Search history tracking

Engagement Features

Comments section with replies

Like/dislike functionality

Share options

Channel Integration

Detailed channel pages

Subscriber counts and analytics

Video playlists and channel content organization

Shorts

Vertical short-form video experience

Swipe navigation between Shorts

Engagement metrics for Shorts conten

Responsive View

<img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/all-devices-black.png"/>

Desktop View

<img src="https://github.com/Imran-khattak/YouTube/blob/master/desktop%20(1).png"/> <img src="https://github.com/Imran-khattak/YouTube/blob/master/desktop%20(3).png"/> <img src="https://github.com/Imran-khattak/YouTube/blob/master/desktop%20(2).png"/> <img src="https://github.com/Imran-khattak/YouTube/blob/master/desktop.png"/>

Mobile View

<table> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/home_light.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/home1.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/home_dark.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/video1.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/video2.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/video3.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/video4.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/channel_light.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/channel_dark.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/tech_brothers.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/search1.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/search2.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/shimmer.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/shimmer2.png" width="400" height="700"/></td> </tr> <tr> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/about.png" width="400" height="700"/></td> <td><img src="https://github.com/Imran-khattak/YouTube/blob/master/assets/assets/images/exception.png" width="400" height="700"/></td> </tr> </table>

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.