Flutter Facebook 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 Flutter fast in this tutorial by building the responsive web and mobile UI design of the real world app, Facebook. You'll learn easy UI tips to help you develop a beautiful project. This Flutter UI tutorial is great for beginners as well as advanced developers who want to improve their mobile app development skills. You'll create reusable and responsive widgets that change their appearance and size based on the current screen size.
» 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_f...
Complete Source Code: github.com/MarcusNg/flutter_f...
Widget & File Structure Diagram by Miraie Yang & Allen Su: drive.google.com/file/d/183A5...
» Timestamps 🕒
0:00:00 Introduction
0:00:59 Download Starter Project
0:01:28 Starter Project Code
0:04:52 main.dart
0:06:59 Sliver App Bar
0:09:32 Circle Button
0:13:57 Create Post Container
0:22:19 Create Rooms
0:29:22 Online Users
0:34:36 Stories
0:46:54 Post Feed
0:55:47 Post Stats
1:02:54 Custom Tab Bar
1:11:12 Launch Web Version
1:13:12 Responsive Widget
1:16:24 Custom App Bar
1:27:03 Home Screen Desktop
1:30:59 Responsive Post Feed
1:39:33 Contacts List
1:44:44 More Options List
1:50:33 Wrap Up
» Music 🎶
Creator Credit: Jarico - Island ( / island-free )
• Video
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterFacebook

[@WorstDeveloper]

This is so much better than those "speed code" videos everyone uploads.

[@sharishth]

Yeah I mean whats the point if you are copy pasting. Might as well download and install app.

[@iJuce]

who tf watches speed code

[@TheSclare]

Speed codes are pretty much pieces of garbage videos. We want to see the code, not the damn "show".

[@benbenzyhome]

they even makes me hate flutter at times

[@poyocadena]

Ya hasta me estaba poniendo nervioso porque no le entendía a flutter y quería abandonar, pero volví a recuperar la inspiración gracias a ti!

[@khalidkhan5308]

If u click on dislike please also give the reason in comments, the author put so much hard work to make like these videos I don't know what's wrong with this tutorial it's really hurts those who spends so much time. Don't be jeleous let appreciates

[@mahmodulhasan7]

hmm bro that is

[@RNMERIA]

Idiots dislike such quality contents

[@kenkaneki5433]

@@RNMERIA not your fucking deal bastard who dislikes what

[@RNMERIA]

@@kenkaneki5433 Fck off you as*H*le for disliking this video

[@Aadvait]

@@kenkaneki5433 Can you fuck outta here? Fucking inbred scumbag

[@kimbowaaloysius9034]

You make me fall in love with Flutter over and over again! Wonderful content Marcus, Wonderful!

I hope you're good Marcus :D I jump here from time to time to refresh my Flutter knowledge and this is the best channel ever. Wish you happy holidays

[@Murtaza-ik8ub]

This tutorial really helped me to understand "Responive UI Design". I want to thank you for it. Also, the widget tree diagram by Mirarie Yang and Allen Su is commendable. Great job!

[@Explore_Montreal]

One of the best tut I've seen for learning flutter by building a beautiful example APP UI/UX . Keep up the great work 👍 Thank You

[@Cccccccccccl]

I love the way you organize your widgets in their own files and then just export them into the main.dart file. I'm new to flutter and while I've watched many videos about flutter, I haven's seen any that show how to organize files, let alone any that organize their files such as you do. I really like it!!

[@rexrex8664]

Thank you for this tutorial. You explained it well and gave us ideas to make the code maintainable. Subscribed and like your video. Keep it this way dude!

[@eQ-13]

You are amazing Marcus. Learn so many concepts from your tutorials. Thank you.

[@user-gu5ts5nx8r]

Absolutely very helpful content. Thank you so much. I really love the way you explain things while cloning. Thanks again.

[@TonyOwenUK]

Long, but worth it. I like how you haven't copy and pasted code, showing the exact process. Great video

[@aravindc6946]

It was an awesome tutorial, really loved it! learned a lot! Thank you so much for this great content🤩 Keep rocking!!!❤

[@arthursiloka7437]

This is fantastic. Nothing like this on KZbin. You have a new subscriber. Thanks

[@Isthiyaquekambathagothi]

Am shocked to see only few people subscribed to your channel, i remember subscribing to you when i wanted to learn flutter, i started with your travel app video, now learning about responsive web and mobile, and found you made a video 2 years ago, keep doing what you do.

[@thomastthai]

Excellent tutorial. Well explained with a calm voice and minimal amount of distractions! Keep it up!

[@newart47]

Great content as always. Thank you very much Marcus.

[@jackychen2109]

Bro when I saw that you have a course I didn't even think twice to buy... Your teaching & delivery style is amazing! Thank you!

[@dhevendhiranm4138]

Excellent. I love the way you organize things very clear with live coding. Thank u so much for the video.

[@codecounts7122]

Awesome video Marcus. Beautifully explained.

[@mdsujonahmed9441]

Thank you so much 💕. I am learning. Your videos are best to learn knowledge.

[@ChristianAlmeidabr]

Thanks man!!! This is gold!! Better of all you use to color things (like containers and stuff) just to let us know what "part" you are working on! Great!!

[@akshanshkmr]

You made it seem effortless, definitely subscribing 👍

[@danielrocha5774]

I really appreciate you taking the time to shared this with us

[@mohamedruslicali5926]

Super clear and slow tutorial. Love it!

[@eternalincantation]

I love how you explain things and love the tutorials, can you make some on an entire app - fron and back end, not just UI? thanks a lot!!! Love the content you make!

[@abdullahmoiz8151]

Great tutorial, i really wanted to know how to make an app responsive and this cleared things up

[@julianrodriguezpetz3642]

You are exactly what I have been looking for, thanks! Saludos desde Argentina!

[@parzuko]

Man, this is such a great and informative video, love it!

[@kerimamanov7760]

Great as always, Marc!

[@swedexa]

Yeah man lovely content! Much love from Sweden!

[@lokeshj0210]

I won't say thank you, I'd rather say Love you, Sir! This one is the most helpful Flutter Video for me, I've been coding in flutter for over 12 months now.

[@harshgohel9626]

Good job bro. I like the way your delivery of content, i really appriciated. Keep uploading this kind of videos.

[@dorian4875]

Dude, thk u for u work! Amazing tutorials and content :)

[@mohammaedazzam314]

Thanks you so much Marcus Ng❤🌹

[@caiofelix623]

Thank you so much, you are a incredible developer who really know who to teachs

[@gabrielowusu1927]

Love it❤. Just finished watching. Learn alot thanks

[@devolution3333]

Thanks for the great content, This is what I looking for. I need something to guide me to learn flutter, many things in your content make me understand flutter. Thank you again for this workshop.

[@ostechanbi5455]

Amazing tutorial... Keep up the good work !!! You are life saviour

[@kombokenedy4750]

You are just a beast, good work master

[@korndev6862]

Thank you very much for this Tutorial, that very useful for people that learning the Flutter.

[@KekeAmigable]

You know ... I was making an application like Facebook, but I saw how difficult it was and I left it, but this video has motivated me, inspired me to do it again, I'm very excited 😄

[@learning1online156]

Learned a lot about UI. Thank You very much

[@karangadani5424]

The Best Flutter UI video ever!!

[@hamp2423]

Thank you Marcus it is really helpful to learn flutter layout structure and responsive app

[@mojahedmohammed]

you have smart coding style, thanks for your effort, I hope more flourish your channel 😍

[@boravivek]

I knew that flutter is something, but after seeing your video it appears that it's really amazing, i will surely consider giving it a try

[@gaetanberbin3207]

Thanks a lot...things goes well now. I have learned so much...keep going!!

[@ayushpratap4726]

Amazing! Superb! Excellent!

[@vireakpanha7546]

one of the best flutter tutorial. nice job!!!

[@tsioryfitiavanaanhykrishna6992]

You area the best! Thanks for your tutorials!

[@footballfever134]

Wow.. Was looking for stuff like this... Thanks a lot😊😊

[@mihaidimoiu]

Great tutorial. One tip on your website. In home page when you click on menu button is under the main component. I think you should bring it to the front when button is pressed. Accesed from chrome on galaxy note phone

[@luciapineda2093]

Thank you! You explain things very well.

[@RACAPE]

I never considered to learn flutter. But I saw this video and I was: "Why not?". I'm sure that this will help me. Now I'm on front side with sass, javascript, react, vue. But why not? Every new thing you learn, it's a new step forward for a greater future.

[@streamerx4501]

Great Video ! Learned a lot of new things

[@sithumdasantha3147]

Very Useful! Keep it up!

[@eadoard]

Just an amazing tutorial and explanation ..... thank you so much

[@gauravbagul4730]

Thanks man, you explained it very well.

[@ishangoswami9462]

Genuinely thank you so much for this

[@sakibshaikh3447]

Thank you for this gem🤗

[@anweral_sanabani725]

I Like ur Channel So Much dude... Keep going 😎😎

[@megaman236]

man! u are the best ♥

[@Hangoutapp]

Really love your videos

[@fadwi5817]

thanks for the bonus video & great course

[@edulynczm]

This is totally unbelievable!!! Your tutorial is so easy to follow along!! Would you happen to have a full tutorial on a facebook clone available on your cources..... Please

[@chuggingCoffee_]

Trick for anyone using the VSCode Flutter extension. It gives you a shortcut key combo to do a few common tasks. When you get error messages under items like 'User' or when you create a stateless/stateful widget and have a million red lines under your code, it's because it's looking for material.dart, your data file or something else. With the Flutter extension, you can press CMD + . on mac to get a popup list of actions to take while your cursor is on an item with the red line under it. You can do this same shortcut key combo when you want to wrap widgets in a container/row/etc. Not sure what the key combo is on Windows, but I'm assuming it's Ctrl + . or Alt + . ? You'll have to look that up. Anyway..just know that a shortcut exists to do some common imports and wraps, and look up details on the extension to figure it all out. Just wanted you all to know it's there.

[@sknazmulislam9158]

Best tutorial ever man.. thanks for your hard work

[@wevertonsantiago4305]

New Subs Here! Thanks for your videos!

[@_aguskhaer]

i like the way you organize those files, i'm currently realized that all classes which want to be exported in another class, should include the export command

[@choirulaffan5730]

Great....! I was subscribed bro!

[@jaymitpatel6148]

Loved it ❤️very informative

[@aqeelshamz]

Great! Love it! 💙

[@claudedaiga5897]

Thank you very much, awesome job!

[@orgiel1203]

Excellent course! Thanks

[@grsdjjggfss3373]

You have got a new follower. ❤️

[@shamscorner]

I think KZbin puts some random dislikes in the dislikes button. Otherwise it will feel like, that dislike button is broken. How on earth there are some dislikes in this video. Makes no sense. Love your videos man. I pray for your success. Thanks 😊 🙏

[@danielphil4976]

This is the best. Thank you.

[@lakshanm8050]

Great video, Thanks so much

[@kenmaths8758]

Thanks, great flutter video

[@sharanbabu2001]

This is awesome. More content like this plz...

[@deblasiocorporationd.b.c.7603]

Great work man!

[@hoekbrwr]

I watched video after video and in every one of them I see other widgets appear with fancy features. I am a bit overwhelmed by all these specials, but I must congratulate you on the fact I followed your building of the UI to the end without problems. Now I have to dig into the code a bit more(and see it another time when done with that). This is in fact only the UI and the data are fake! Is there another video where you grab the JSON for your data? This is however a great store of rather fancy UI techniques. I also will look into your Netflix tutorial for more techniques.

[@hanspreinfalk8072]

I learnt a lot thank you for sharing!!

[@rohanpatil8417]

Awesome! Thank You!!

[@sachinkalkur]

Learnt a lot than speed code videos. Thanks bro.

[@saitejd8108]

One more awesome ui design

[@scottgodfrey7855]

Subscribed on KZbin and subscribed to your All Access Sub on your website. It would be nice to see some more firebase videos on either site. Cloud functions, messaging and such would be awesome. Best tutorials on the Internet.

[@vinitjain1186]

Thank you very much. You are too good 😘

[@odedisr]

Great video! thanks

[@CodingWithGhostInCode]

I considered myself a newbie before i followed through the tutorial. Right now i feel like i need to be hired by meta. lol. This is great stuff.

[@Gagandeep2805]

Great Video!

[@tejasmishra7226]

Thanks for the tutorial. 😊

[@sanamtamang1208]

New subscriber. Love it

[@user-ru3hf8xk6p]

just awesome thank you!

[@mindsetnuggets]

Excellently delivered tutorial

[@amjadshadid90]

great work😁😁😁 love that❤️

[@lobanovkirill]

Wow!!! Cool man!!!!))))) Thank you!)))))

[@hqshop8498]

thank you, i learned a lot in this video

[@narendrachouhan1746]

very nice video, i think people needs this kind of videos..

[@Hicham_SaAh]

awesome , ❤️❤️❤️❤️❤️❤️❤️❤️❤️ nice work