Flutter Netflix Clone Responsive UI Tutorial | Web and Mobile

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
Learn how to build Netflix’s beautiful, responsive user interface for mobile and web using Flutter. You'll learn how to create reusable and responsive widgets that change their appearance and size based on the current screen size. You’ll also learn how to integrate a video player using the video player package into the web version of our app.
» Remember to like, subscribe, comment, and share this video! 🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
Facebook: / marcusngyt
» Resources 📁
Starter Project: github.com/MarcusNg/flutter_n...
Complete Source Code: github.com/MarcusNg/flutter_n...
» Timestamps 🕒
0:00:00 Introduction
0:01:06 Download Starter Project
0:01:31 Starter Project Code
0:03:55 main.dart + Home Screen
0:05:16 Custom App Bar
0:09:34 App Bar Button
0:11:16 Fade App Bar
0:15:18 Content Header
0:19:39 Vertical Icon Button
0:23:20 Previews
0:30:32 Content List
0:36:15 Bottom Navigation Bar
0:40:32 Maintain Scroll Positions
0:43:00 App Bar Cubit
0:49:57 Launch Web
0:50:41 Responsive Widget
0:53:02 Responsive Bottom Navigation Bar
0:54:24 Responsive Custom App Bar
0:58:17 Responsive Content Header
1:07:25 Video Player
1:11:44 Conclusion
» Music 🎶
Creator Credit: Jarico - Landscape ( / landscape )
• Video
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterNetflix

[@kingofrelationship9044]

These responsive tutorials are so much more mature and needed compared to the speed code Ui every other channel do

[@ItsMeHelel]

YES! Marcus, you are doing an AMAZING work! (Already am a student of your courses)

[@robertmrobo8954]

I hope this comment can TREND..! 🗣

[@batuhanozcan3910]

The guy is like a voice from the Coding God. No music, no nonsense jokes, stable tempo and so it becomes a learning meditation.

[@raccoonteachesyou]

You got so much covered in just one hour, and you do responsive ! Thanks !

[@milkyomer61]

Thank you very much Marcus. This was very helpful. Please keep up with this clone series

[@dilshan3372]

I get motivated every time, when i watch your videos . Thnx marcus.

[@Toniolunuga]

Thank you, Marcus! This is a very detailed tutorial.

[@BharadwajGiridhar]

Can't belive this is free. So good Marcus, been loving your flutter builds. Much better than speed code videos.

Just what I wanted to learn to expand my Flutter knowledges, thank you for this amazing tutorial!!!!

[@kyleaustin2728]

This is the prime example of how tutorials should be. Amazing depth with elegant simplicity. You clearly prepared and it saves the viewers exponential time.

[@vpontessilva]

OMG, this keyboard sound, pure ASMR

[@dantedt3931]

One of the best channels on Flutter.Keep it up!

[@mayordev4556]

You have the best video tutorials on flutter. Please continue the good work.. Thanks a lot

[@AliHamza-ju3lv]

I think so far the best teacher I met on youtube. Best of luck and keep doing this work.

[@davidkhassias4876]

Subscribed after watching for 5 minutes the quality is already obvious! Please keep making amazing content!

[@Hazara_boy]

This channel is very underrated, appreciate your work man, thanks alot.

[@-benji-2619]

Thanks a lot for your tutorial man, you helping so many people with these, keep it up !

[@Raptor-wz8zi]

Thank you for all your hard work. These tutorials are the best all the others are speed code and do not explain anything. Can't wait for the next one

[@narendrachouhan1746]

i have seen lot of videos on KZbin about flutter development but your one is very well organized and easy to understand..

[@tresormvumbi]

Thanks Marcus, the video was well made and very instructive

[@hiimmehdi]

This Tutorial is literally Gold, thank you so much for your effort and knowledge, it is much much much appreciated, much love from an 18yo flutter dev wannabe !

[@francisofosuafriyie9903]

Just wow wow 👏. I'm a backend guy but your videos are really awesome. I'm gonna try flutter out

[@AkashJadhavIT]

Thank you for this great tutorial noboday explain in this kind of details. waiting for next tutorial :)

[@MatheusMaghost]

Hi @Marcus! This is the first practical tutorial about development with Flutter that I am following. I'm a Front-End Software Engineer (web) and even without acknowledgment about Dart Language and Flutter I could understand almost everything. Thanks for your tutorial!

[@isurubandara899]

This guy awesome . Nice work man.

[@deblasiocorporationd.b.c.7603]

One of the best flutter tutorials on KZbin, nice job. I'm awaiting your next videos :)

[@weilongwu3875]

I want to know 35 years old. can learn it and find a. job ? In China 35 year It very hard to find a good job. too many people. 😀

Marcus Ng, totally best flutter channel around.

[@dalestewart]

Another very informative tutorial. Very impressive.

[@arthursiloka7437]

Thanks. I love your style

[@user-gu5ts5nx8r]

I really love your contents and the way you split things into smaller and understandable pieces. Thanks for sharing. Are there some rules or helpful tips you personally know about things to keep in mind when cloning an existing app or web?

[@akshitmadan5232]

You are a great dude , keep it up !!

[@alisherip9496]

Bro please, one video with back - end.

[@forzabike]

Can you teach the whole thing that's goes into it like the backend for amateurs like myself who are learning. Thanks man keep up the great work!

[@eQ-13]

Thanks Marcus. Your courses are also really good. I got two of them.

[@bm2ilabs]

and worth every punny

[@honghaimei9594]

A really useful tutorial for flutter starter, Thank u

[@shimonbalzera8618]

Wow!! Thank you!

[@leahnewyork]

Subbed, with admiration and thanks. Anybody else appreciating the unintended ASMR feature? Twofer!

[@akashkhatkale8598]

Thankkssss. Clean ui

[@flaviobarros8305]

Man i don't normally go online to comment but let me say this! you deserve over a Million subs...i and as sure as many appreciate the work you put in...One thing is to make a speed coding but another is to actually explain in understanding words line by line of what's going on and your knowledge is simply extensive....Learned a lot from just one vid......Subbed! and i'll recommend the channel .......QUESTION = "Creating a Mobile / Web flutter app how do i deploy?? is it on one bundle??.....how would you upload the webVersion?"Subbed! and i'll recommend the channel

[@chantheatai6667]

This guy is a legend.

[@muzamilhussain9908]

Man you are amazing.

[@wesleyXis7]

Thank's, watching from Brazil

[@fixilein1]

So great, thank you!!

[@akshitmadan5232]

Build Instagram clone with backend pls

[@TonyOwenUK]

Another great video 👍

[@eskindergetachew4949]

very professional ...well done

[@beckeller]

LEEEGEND THIS MAN! KEEP GOING!

[@sazzadhossain9992]

Great video man.

[@kingofrelationship9044]

You should start a series/playlist of mobile & web responsive real app clones🔥They definitely get more views and would help grow the channel

[@robertmrobo8954]

March 2022, and that's what bought me here and I wasted no time by subscribing and hitting the notification button. ❤

[@sergdigital7437]

Awesome tutorial

[@ayadlaouissijones9528]

Nice video!! You should use animated opacity for the app bar because it's not very efficient to do setstate all the time when you are scrolling the list. Because it will refresh all the time the screen when you are scrolling and you can have efficiency problems. Keep up the good work :)

[@kamalnayan5331]

Sir your tutorials are just awesome and have plenty of information. Kindly keep this good work up and pley make a full stack app, it's a humble request 😅.

[@sonumot5768]

You are just awesome.

[@Deeepakk_kumar]

Awesome bro. Your flutter coding is best. Can you please make a video on any shopping site and app

[@mauriciodurcak8539]

Increible este video!!!!! Segui Asi!!! saludos desde Argentina

[@tenzinlekphel8787]

beautful and clean design .. thanks for sharing...

[@RosTwitchNadzor]

Tnx for your videos

[@yetesfaalemayehu301]

thanks Marcus!!!

[@imPriyankCoder]

sorry for double comments. Any paid course on flutter e-commerce coming. love your teaching style

[@obaidghojaria6577]

Awesome 😍

[@esneiderbertel9813]

gracias por hacer un excelente aporte al mundo buen amigo, gracias en verdad....

[@tvruikuzui]

You the best!!! countinue the greate work, buy please make video like this for a tiktok clone!!!

[@samelobinna101]

nice content keep it on bro

[@anuranjansrivastav9864]

Thanks for great content...

[@ravilodhi6343]

Incredible!!! You are amazing. I really liked the idea of minimising the imports. Will use it for my next projects. The state can be managed by using an IndexedStack or Key. Can you please let me know the benifits of one over the other? Plus this is the first time I watched your video & I have subscribed.

[@tejasmishra7226]

Thanks Marcus.

[@dolfeyy]

Quality Content 👍👍

[@h3w45]

thank you for this.

[@masanjajunior3097]

This is awesome

[@blesszavevo8456]

Hey thanks for these tutorial. Please kindly make a tutorial on how to login into the app. Creating accounts and package choosing subscription

[@gauravidesigns]

love you bro

[@RNMERIA]

Thanks Marcus, Plz do consider a full stack app too

[@forzabike]

Yes please

[@vamshikrishnayerukonda]

yes please

[@muugiik23]

Respect bro

[@cromuelbarut9859]

OCTOBER 2022 UPDATE: for those 2022 learners like me, I suggest you to use IndexedStack widget on the body property of Scaffold widget of your nav_screen.dart instead so you don't have to use PageStorageKey and state management for solving the scroll issues. For example: instead of: Scaffold( body: _screens[_currentIndex], ); use this: Scaffold( body: IndexedStack( index: _currentIndex, children: _screens, ), ); happy coding

[@aliakkawi4759]

Thanks a lot

[@Quoa]

What VSC Extensions for Flutter do you use? These auto complete options for constructors etc look really handy! Also please make more videos like this to code along :)

[@jpcman]

Brilliant

[@vishnukumar-ed7ki]

Nice tutorial...tooo gooooood . please make tutorial on #dating web application

[@bashiruibrahim8443]

Wow that's good sir

[@imPriyankCoder]

wow amazing

[@devolution3333]

Oh, Is this the new workshop? I will follow it after your Facebook workshop

[@joseoleaga]

So magical your video, there is out Flutter 2, and I saw some warning in the source code, so it would be great if you make a video fixin those "deprecated" warning

[@kidus68]

This is still an amazing tutorial I saw on flutter, thanks a ton! Incase anyone knows what's the extension (if it is) that, white dotted lines, highlights the branches of the code. thanks in advance.

[@rafi_45]

Thanks for share this tutorial for free..

[@iamkartiknayak]

Hey, Can you update this video as the newer Netflix UI has evolved a lot since last 2 years. Some complex SliverAppBar implementation has been done. It would be helpful to have insights on how to implement those UI components 😃

[@lowglow687]

Hey Marcus good job man, but can you please make us a tutorial about app realising ? Like what should I to release the first version of my application (make app logo, release app.apk, optimize memory of the application...) this would so helpful and kind, thanks.

[@felipecastrosales]

sensational

[@dreamlit8500]

love your content. Do you have an intro course?

[@adeobama9ja]

Hello Marcus, nice video. Well done. Please, how about feeding content from a backend using Firebase? Can you show us that, please?

[@vijayabalajib1350]

Hi Marcus, Thanks for the awesome content. Is there a flow chart you can share for this project? it was really helpful to have that for Facebook app build, which you shared previously.

[@mawarofficial7]

good video

[@himesh_89]

Thanks mann

[@himesh_89]

Do you have any plans for releasing paid courses in coming months? If yes, can share the topics?

[@prakashbasnet1156]

Marcus, can you please give us the design link? It will really help to get ideas from the design and your amazing explanation. Thank you for this kind of masterpiece ❤

[@juliancastellanos1873]

hi Marcus, first of all, thanks for your amazing videos, are so dope. I got a question for you: why do you write sometimes things like: style: const TextStyle(...) instead of style: TextStyle(...) the const word is for some specific reason? thanks a lot.

[@dr_megz]

Can u complete the back end tutorial for it Specially making video player just like that of nrtflix

[@AyorindeAdesugba]

I love the content. I found a slight bug while following your tutorial. For the CustomAppBar, it is wrapped in Container with 24 padding on both sides. I believe that makes the width of the actual AppBar 48 less than it could be. So the AppBar is still showing a mobile AppBar, while the ContentHeader has switched to desktop. Should we move the container into _CustomAppBarMobile and _CustomAppBarDesktop instead?

[@shouryasingh2785]

Great functionality in front-end, would back-end functionality would be possible to explain?

[@cubedev4838]

Thanks marcus, can u make whatsaap clone, uber clone or alibaba clone for your next course? Peopple will buy this

[@backtube9772]

Good

[@thesobercoder]

Brilliant video. How's the performance of the web app? I'm not sure if it is as fast as something like React.

[@joeofbubba]

Donation or patreon link? I would love to support you for creating this awesome content for free.