Flutter Chat UI Tutorial | Apps From Scratch

Sign up at https://marcus-ng.com for updates and courses!

» UDEMY: The Complete Flutter UI Masterclass Coupon
https://www.udemy.com/course/t....he-complete-flutter-

» UDEMY: Flutter and SQFLite Coupon
https://www.udemy.com/course/f....lutter-and-sqflite/?

Welcome to the first video in my new series Apps From Scratch! This tutorial series will teach you how to build awesome user interfaces with Flutter and Dart. In this video, you will create the layout of a chat UI.

» Clone this repo to follow along
https://github.com/MarcusNg/fl....utter_chat_ui_starte

» Timestamps
0:00 Introduction
0:29 File Structure Breakdown
3:30 Home Screen
6:46 Category Selector Widget
12:30 Expanded Home Screen Container
14:32 Favorite Contacts Widget
22:57 Recent Chats Widget
38:47 Chat Screen
45:00 Chat Messages
54:10 Chat Message Heart Icon
58:29 Message Composer
1:02:52 Unfocus TextField to Minimize Device Keyboard

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

» Resources
Source Code: https://github.com/MarcusNg/flutter_chat_ui
Design: https://dribbble.com/shots/642....8387-Messenger-Mobil

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

» Flutter Firebase Instagram Series
https://www.youtube.com/watch?v=PJr2kWgXf8s&list=PLzOt3noWLMtgHRNVd1w20L_FW3ZS9BB6i&index=2&t=0s

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

» My Gear*
Logitech Master MX 2S Wireless Mouse: https://amzn.to/35BZoYy
AirPods 2: https://amzn.to/2MdpJVb
Apple Magic Keyboard: https://amzn.to/2nCXqpu
Blue Yeti USB Microphone: https://amzn.to/32cs6wM
JBL Charge 3 Bluetooth Speaker: https://amzn.to/2IZuxeT

*Affiliate links

» Outro Music
Harmony - Joakim Karud (https://www.youtube.com/channe....l/UCVBUm9ccjHy0utvlC

#Flutter #FlutterTutorial #AppsFromScratch