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

0 Comments

Submit a Comment


What Our Clients Are Saying

Travco RV

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really...

Rod, Travco-Rv.com

Dieno Digital Marketing Services
5
2018-04-27T20:16:51+00:00

Rod, Travco-Rv.com

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really takes care of our companies marketing with his expertise and has a lot of great ideas. We are very fortunate to  have him helping us with fresh new ideas.

British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all...

Tara, British Columbia Coalition Of Motorcyclists

Dieno Digital Marketing Services
5
2018-04-27T22:05:28+00:00

Tara, British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all the updates  to our website. Leland is always very responsive and able to answer all of questions or fix any issues in no time at all. We look forward to continuing to expanding and broadening our website with Dieno Digital.

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.
5
4
Dieno Digital Marketing Services
dieno digital marketing services