Flutter YouTube Clone UI Tutorial | Apps From Scratch

» Flutter courses, writeups, and source code on Launch Club 🧠

» Flutter Job Board 👋

Learn Flutter fast by building a Youtube Clone UI. This Flutter UI tutorial is great for beginners as well as advanced developers who want to improve their mobile app development skills. You'll learn how to use slivers, display the selected video above our bottom navigation bar with the miniplayer package, riverpod to manage the state of our app, and easy UI tips to help you develop a beautiful project.

» Remember to like, subscribe, comment, and share this video!🚨

» Socials📱

» Resources 📂

» Video Player Tutorials 🎥
Flutter Netflix Clone Responsive UI Tutorial | Web and Mobile

Flutter YouTube API and Video Player Tutorial

» Timestamps 🕒
00:00 Flutter YouTube Clone UI Introduction
00:54 Download The Starter Project
01:04 Project Walkthrough
04:28 Bottom Navigation Bar
08:26 Stack and Offstage
11:43 Sliver App Bar
15:17 Home Screen and SliverList
16:11 Video Card
24:02 Riverpod Selected Video Provider
27:19 Miniplayer Package
37:38 Video Screen
42:07 Video Info
50:40 Suggested Videos
57:02 Recap
57:31 Thanks for watching 🙏

» Music 🎶

#Flutter #FlutterUI #FlutterTutorial

[hirunguyen]

me with 2 years of exp in Flutter, still watching your video and learn new things. Amazing work!

[sonmangaking]

And we back on this Friday with Marcus 🔥🌶

[sidheshwar]

I watched this over 20 times. To build my 5 apps. The content quality is just amazing!

[chuxville]

Thanks MarcusNg for explaining Slivers...I enjoy all Your tutorials...

[LastVoyage]

You are the best channel for anything Flutter related! Thank you.

[nonamex]

Perfect tutorial for every flutter dev! Thank you ❣️

[akhila]

i want to use PodVideoPlayer in miniplayer and also maintain its state like in youtube please can you make a video on how to do that.

[onyemaanthony]

another awesome video kudos to you keep it up i love watching your videos

[bmsfx]

Just started watching your channel, A+ for content for sure, easy to follow, so i gave you a follow :D.

I use GetX though (it does just.. everything), and not riverpod, and just store like selected video in a obs, but beside that, what i find most useful is your though and how you setup your UI, the though process.

I know you already made it first and thats why it looks so easy for you.

[sagargarg]

Great tutorial. Can you also add how to play a list of videos similar to youtube when user is scrolling? How to handle pull to refresh and pagination with video_player. On android loading more than 10 videos result in exoplayer error. Unable to resolve it.

[swastikthiramdas]

i getting error at 25:23, "the method read isn't defined for the type BuildContext"

[amitkumardas]

Again a great tutorial, thanks...just curious about how to hide the bottom nav bar completely while the miniplayer is in full screen mode.

[vincent]

thanks for sharing this awesome flutter videos ....and can you tell me what are the extensions you use for colorize brackets and auto format code

[tommyeagen]

Great tutorial man, I learned a lot from this and I used Provider instead of Riverpod.

[falfit.]

Hi! Great video here, im originally here to learn how to use the miniplayer package and I was wondering if it was possible to do a different shape for the mini form? Such as a rounded rectangular shape. I tried to find a shape argument but didnt succeed, so I added in the builder a container that does the shape, but the miniplayer has a background which always show. So i added the backgroundColor argument of the miniplayer to Colors.transparent, but after multiple tests, this argument does nothing, I think it only changed the fading color that appears on top of the background widgets when you open the player? I tried overriding the theme too to a transparent color background, but it stills shows a black rectangle under my player. How can i have a rounded rectangle shaped miniplayer and for the background of the miniplayer to be transparent?

[adamfaliq]

Hi Marcus, thanks for the tutorial. Is there a way to prevent the SliverToBoxAdapter from scrolling? When scrolling the videos in the video screen, I just want the SliverList to scroll but the SliverToBoxAdapter to stay at its position. Should I use SliverPersistentHeader ?

[jorislimonier]

Awesome video, thanks !
Could you just hot reload a but more often. Sometimes I struggle to figure what does what when you spend a long time without hot reloading (I'm a beginner). Thanks !

[tristankluivert]

Great work. How does one making the mini controller drag just like that of YouTube?

[mphossible]

I absolutely enjoyed the coding along. I have a question though. Do you have a vide where you add functionality to the UI? Pulling actual videos and playing them in the UI instead of the images ?

[muneerahamed]

Hai can you help me with how to do the auto play video in the homescreen like the YouTube