Flutter Chat UI Tutorial | Apps From Scratch

» Flutter courses, writeups, and source code on Launch Club 🧠

» Flutter Job Board 👋

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.

» Resources

» 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 :)

» Socials

» Outro Music

#Flutter #FlutterTutorial #AppsFromScratch

[revantsingh]

I'm not coding along and just watching you code is really WOW

[Zach-rwjf]

Bro this is the most useful app building video I've ever seen.

[aserlink]

I am from native android development and new to Flutter and I am so happy for this tutorial.
I have learnt so much and all I can say is Thank you so much sir !!

[generahben]

I was watched for 6:43 mins and I started downloading straight away. I think this is what I need. Doing it in real way, not just explaining widgets after widget

[SuryaAditya-exgo]

Bruh, youre the first youtuber that make me understand

[noural.hajali]

If you are struggling with flutter read this : My first tutorial that i actually understand fully on flutter :), I actually tried to follow this course(along with a lot of other ones) before and i thought it was not explainatory enough and i was just confused and quit.. then i decided to go the basics and learn dart first, i followed a guy name Wckd i believe and i really understood dart, did some basic projects on it (3 projects took two days) and then jumped into this tutorial again after not finding a better one, and here we are :)

[JosephDicdican]

Kudos to this tutorial.. new flutter dev here. have learned useful tricks..

[markvillarina]

I was amazed how compose you are about explaining everything. I'll avail your udemy course for sure. Thank you for making this video.

[yashwanthkrishna]

The way u do all the things are so grasping into the brain bro

[stefanporrmann]

Best Flutter Video I have ever seen on YouTube! Next step is to build the technical stuff 😁

[aytj]

Man the way you explain things is fascinating , thank you

[brenninyoung]

Thank you for having apps from scratch! I am new to Flutter and you have geared me to loving it even more!

[ChristianMoise]

I watched couple tutorials just to get a hang of Flutter. I always felt they were missing some core concept I needed to learn. Your tutorial touched on a lot of subjects in under 90 mins. That is amazing. your tutorial gave me confidence that I can build Flutter apps. Your tutorial is a great blueprint for beginners. Thank you @Marcus

[imdy]

Very Smooth. To the point. Thanks for sharing the tutorial. Period.

[agreensh]

Excellent work. Love it.

I personally don't like how the keyboard appearing/disappearing looks on the chat screen with the red behind... I would remove the background colour from the Scaffold and add a Stack, first entry being a Container (say 100 high - just enough to show behind the rounded corners of the Container) with a colour of primaryColor, and the second entry the GestureDetector. The keyboard then looks better (I think) without the red behind, and especially while it's showing/hiding.

[ardeanadventure]

Wow, you are so good with Flutter and good explanation for users. Probably I should hire you

[Mark-mobo]

Really really good tutorial. Lots of universal concepts covered in a logical way.

[stinger]

Glad I found your channel.
I'm going to watch every single previous videos and will always active on your channel.

[jangeisler]

Thanks! Perfect pace, it sits just right between those speedcoding vids and the long and dull ones. Good job 😊

[petermsamson]

much prefer the voice walk through then the music, its good to know what your tweaking or adding as your typing / develop.. Really helps out learning Flutter / Dart, then just the music.. I have programmed alone with you on many of your App found this time much easier... Thanks...! Also thanks for the code to github, its great to be able to check over your code if i get stuck on errors..