Do It Yourself – Tutorials – Flutter Facebook Responsive UI Tutorial | Web and Mobile

by | Aug 9, 2020 | 0 comments

Do It Yourself – Tutorials – Flutter Facebook Responsive UI Tutorial | Web and Mobile

by | Aug 9, 2020 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



» Check out my Flutter courses 🧠
All-Access Subscription: https://marcus-ng.com/

I’m going to teach you how to build Facebook’s 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.

Download the starter project to follow along!

» Resources 📁
Starter Project: https://github.com/MarcusNg/flutter_facebook_responsive_ui/tree/starter-project
Final Source Code: https://github.com/MarcusNg/flutter_facebook_responsive_ui

» 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

» Remember to like, subscribe, share this video, and star the repo on Github ⭐
https://www.youtube.com/MarcusNg?sub_confirmation=1

» Studying for coding interviews? 📚
https://algoexpert.io/marcus
Use promo code “marcus” for a discount!

» Socials📱
GitHub: https://github.com/MarcusNg
Twitter: https://twitter.com/MarcusLNg

» Music 🎶
Creator Credit: Jarico – Island (https://soundcloud.com/jaricomusic/island-free)

Joakim Karud (https://www.youtube.com/user/JoakimKarud)
#Flutter #FlutterUI #FlutterFacebook

source