Flutter YouTube Clone UI Tutorial | Apps From Scratch

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
Learn Flutter fast by building a KZbin 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!🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📂
Starter Project: github.com/MarcusNg/flutter_y...
Complete Source Code: github.com/MarcusNg/flutter_y...
Material Design Typography: material.io/design/typography...
Riverpod Package: pub.dev/packages/flutter_rive...
Miniplayer Package: pub.dev/packages/miniplayer
Timeago Package: pub.dev/packages/timeago
» Video Player Tutorials 🎥
Flutter Netflix Clone Responsive UI Tutorial | Web and Mobile
• Flutter Netflix Clone ...
Flutter KZbin API and Video Player Tutorial
• Flutter KZbin API an...
» Timestamps 🕒
00:00 Flutter KZbin 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 🎶
Lakey Inspired ( / lakeyinspired )
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterTutorial

[@LastVoyage]

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

[@shazplay8878]

Perfect tutorial for every flutter dev! Thank you ❣️

[@sonmangaking]

And we back on this Friday with Marcus 🔥🌶

[@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.

[@sidheshwar2971]

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

[@MiiAnkit]

Sir can u help just by genuinely answering Should i make app Is there real earning scope Real time expectations How much u earn estimate

[@pyzhovskiy]

It's just amazing, thank you!

[@chipekowasa6571]

That was an awesome experience!

[@hirunguyen4522]

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

[@chocolate3940]

Awesome bro! I mean autobot!

[@bompyryadh]

@@chocolate3940 What is this language bro .java or paython ? 🙂

[@user-bl5qv3jy1l]

@@bompyryadh pay for thon?

[@navdeepsharma2278]

@@bompyryadh Dart

[@MiiAnkit]

Can u pls tell me how to start with flutter and run faster

[@chuxville11]

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

[@jasonkao5240]

we love marcus!

[@onyemaanthony]

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

[@dy6697]

Great tutorial !!! Many thanks

[@omaryassir5885]

Thank you for your content 🙏

[@jeromestsauver]

Excellent job on this

[@ginomcfino4639]

You are the best I love you!

[@syedharis2771]

Great Tutorial !

[@funshorts74]

You are amazing ❤️

[@tommyeagen3763]

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

[@bompyryadh]

What is this language bro .java or paython ? 🙂

[@BooleanDev]

@@bompyryadh Dart, with Flutter

[@yepitsarif]

I love your tutorials.

[@jasonkao5240]

awwwww

[@jasonkao5240]

Great video as always

[@bompyryadh]

What is this language bro .java or paython ? 🙂

[@ciandrapancho8716]

Thank you master!

[@jorislimonier8508]

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 !

[@jhonbaptist6159]

Man you rock!

[@amitkumardas5650]

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

[@livvyjane7309]

thanks a lots bro..👍👍👍

[@santoryu4689]

Thank you for your great effort in this beautiful design I hope you clone Uber app with flutter and thank you

[@avazxonahmadaliyev3386]

Thank you bro

[@slimefunoriginal]

Always u are the best

[@shashanksm6327]

helped a lot

[@vincent8437]

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

[@flaviobarros8305]

This man needs a statue on his honor!

[@cleancodez]

This is lit

[@yona69studio11]

if I have it installed on my WordPress and an application with flutter for that dooplay theme would be great

[@Creat0299]

Good day. I liked your lessons. Could you take a lesson on how to make a mobile application on the topic of ecology? For example, the application how to improve the ecology in the place where you live, having good habits, can be done in a playful way. Well, or something else. What do you think? It is on Flutter in the Dart language. After all, the topic of ecology is more relevant than ever, you will help a lot if you do a lesson

[@tristankluivert197]

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

[@akhila9413]

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.

[@adamfaliq8464]

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 ?

[@Manan_K]

Great

[@hashankannangara8723]

Awsome video 🤘

[@jasonkao5240]

we love marcus!

[@bompyryadh]

What is this language bro .java or paython ? 🙂

[@816archer]

Hey Marcus, i enjoyed your video. I have a quick question. In Android, when navigating between tabs and you click on the default back button of android its exiting the application. But in youtube it always take you to your previous screen. How can we do that? Can you please explain?

[@sagar1garg]

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.

[@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?

[@LastVoyage]

Could you do an "Apps From Scratch - TikTok"?

[@muneerahamed7918]

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

[@ashishjakhariya1523]

Can u connect this with backend admin panel? Laravel or nodejs Not finding any proper tutorials on KZbin for same UI is excellent and ur explanation was too good that I have built it myself for my feature idea app Just in search of connecting this same with Laravel or nodejs backend with admin panel for easy updation I am completely from non programming field Thank you Will wait for your positive response

[@rakeshsinghrawat4408]

sir which software you use to create 3d mobile rendering

[@harisbashir2719]

What software you use to show app in starting of video

[@swastikthiramdas]

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

[@hbibbekir]

how to use that method with the navscreen but also using routes?

[@ghhduyyi7984]

👍👍👍

[@talhasiddiquixd]

Hey Marcus , I am creating a replica of KZbin using their API's and your video. I faced a problem implementing miniplayer. The video starts from beginning again when miniplayer gets initialized. please reply!

[@wilmeramaya4487]

If I also use it but I don't get an application for that topic, it won't be available, it will be great if you made an application with dooplay

[@fahmimaulana6494]

awesome video, how to create that to responsive widget all ?

[@omjogani]

How to get this mockup of Mobile screen? Please @Marcus Ng

[@sokvathanak9166]

there's alot of change with riverpod since update can you make video tutorial how to fix error from old version?

[@santex666]

is it possible to load in the videos from the website?

[@vPrezn]

How you do this animated intro for the app?

[@mphossible4749]

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 ?

[@ABDTalk1]

please tell me how to please please

[@37bandiko]

Where can i buy a full version of this course?

[@mahdyfouad]

can any one make an app with the seek bar away from video frame ?

[@sanghunshin1964]

I would like an in-depth lecture on search, it's too difficult

[@saqib399]

It nearly seems perfect, but it is not working with the real video. If a video is playing and I try to minimize it , then the video starts from the beginning.

[@zanemartini7178]

Can't find the link for the starter project.

[@ghulammurtaza7959]

This is a great series but I haven't see new video in this series kindly add new videos.

[@embetronix]

Does it support RTSP URLs?

[@robertcyrojas7553]

I hope if you do that tutorial Bro by dooplay

[@salvadorchirinos7669]

look forward to brother with dooplay please

[@devb6828]

need eCommerce app 👌

[@munuelvisaez7743]

we please friend Marcus with the dooplay thing

[@helaolange]

How long did it take you to write this project

[@kumimochi]

are his courses in his website good?

[@AnilPoudyal]

This is awesome tut but when you have to play an actual video there are lots of problem may be due to mini player package. I have been struggling for 3 days now and still have not reached nowhere.

[@talhasiddiquixd]

Hey Anil. It's the same story here. mini player starts the video from beginning unlike in KZbin it doesn't continues from the point till it was watched already.! If you have made any progress please let me know

[@julesmercado9894]

what extension do you use for autocomplete?

[@girishsomani4323]

There is a snippet extention in VS I think... Maybe try searching it...

[@faisalfotoh1909]

i hope the videos will play in ui

[@DANITO285]

This is possible in kotlin ? Or impossible

[@jatidiri9198]

Can you make shopee clone UI?

[@moilywin]

can you make the youtube filter clone?😑😑

[@abhaytiwari6411]

Clone instagram with flutter

[@mmm-tl6gq]

Subtitles video language

[@Aman-mt2kr]

package:flutter_riverpod/flutter_riverpod.dart dont support read anymore

[@almzbkv3125]

Good day. I liked your lessons. Could you take a lesson on how to make a mobile application on the topic of ecology? For example, the application how to improve the ecology in the place where you live, having good habits, can be done in a playful way. And so on. What do you think? It is on Flutter in the Dart language. After all, the topic of ecology is more relevant than ever, you will help a lot if you do a lesson