andriajah Thu Sep 2021 2 years ago

Flutter Chat Ui Tutorial | Apps From Scratch

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.

» Check out my Flutter courses on Launch Club 🧠
https://www.LaunchClub.io

» Resources
Clone this repo to follow along: https://github.com/MarcusNg/flutter_chat_ui_starter
Source Code: https://github.com/MarcusNg/flutter_chat_ui
Design: https://dribbble.com/shots/6428387-Messenger-Mobile-Concept

» 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/MarcusNg?sub_confirmation=1

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

» Outro Music
Harmony - Joakim Karud (https://www.youtube.com/channel/UCVBUm9ccjHy0utvlChyrPHA)

#Flutter #FlutterTutorial #AppsFromScratch
flutter chat ui tutorial flutter beginner tutorial flutter chat ui flutter chat tutorial flutter chat flutter chat design flutter chat app how to build a chat app chat ui tutorial flutter ui flutter ui ux advanced flutter beginner flutter how to build flutter chat flutter beginner course flutter ui course flutter for beginners app from scratch fireship kalle hallden whatsapp one day flutter build app development programming tutorial mobile dart firebase