Flutter Facebook Clone Responsive UI Tutorial | Web and Mobile
» Flutter courses, writeups, and source code on Launch Club 🧠
https://drp.li/Iq9Bk
» Flutter Job Board 👋
https://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! 🚨
https://www.youtube.com/MarcusNg?sub_...
» Socials📱
GitHub: https://github.com/MarcusNg
Twitter: / marcuslng
» Resources 📁
Starter Project: https://github.com/MarcusNg/flutter_f...
Complete Source Code: https://github.com/MarcusNg/flutter_f...
Widget & File Structure Diagram by Miraie Yang & Allen Su: https://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