💬📱Chat Messenger App • Full Tutorial from scratch / Flutter x Firebase

💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatA...
📱 Flutter Courses • mitchkoko.app/
👨🏽‍💻 I'm coding a startup.. / mitchkoko
/ createdbykoko
/ createdbykoko
/ createdbykoko
💰 Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
~ ;
⌚️TIMESTAMPS
0:00 Login Page
7:31 Register Page
11:15 Firebase Authentication
21:13 Display Users
27:16 Chat Functions
38:13 Chat Bubble
~ ;
📱 INSTAGRAM • / createdbykoko
🐦 TWITTER • / createdbykoko
📱 TIKTOK • / createdbykoko
🎧 FLUTTER POD • / @flutterpod
💬 JOIN DISCORD SERVER • / discord
💻 GITHUB • github.com/mitchkoko/
🖥 WEBSITE • mitchkoko.app/

[@createdbykoko]

💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass 📱 Flutter Masterclass • mitchkoko.app/ 🔥 I'm coding a startup.. www.patreon.com/mitchkoko What should I code next? 💜🔥 Let's chat on: 🐦 TWITTER • twitter.com/createdbykoko/ 📱 INSTAGRAM • instagram.com/createdbykoko/ ✌🏾 If you need more help on the authentication part, check out my auth playlist: 🔒 FLUTTER AUTH PLAYLIST: 1📱 Modern Login UI • kzbin.info/www/bejne/epmQlIeHf8yAY7M 2📱 Email Login & Logout • kzbin.info/www/bejne/lWS6Xn2rfrt5osk 3📱 Email Sign Up • kzbin.info/www/bejne/p525m2Bmq9WUjZI 4📱 Google Sign In • kzbin.info/www/bejne/Z4abkICnZraXjpY I hope this helps you 💜 happy coding!

[@mohamedadan8552]

Could you make a game using game console template flutter with flame

[@thelmailechukwu]

A music 🎵 app?

[@thisiswhatyoudid]

Hey mitch, i think make tutorial how to use library getX is good bcs soo simple for newbie than provider

[@RAJPATEL-ir7ly]

bro make a buy and sell app for old stuff for college students

[@ettitaiwo1642]

music app

[@Rigobert99]

Much love ❤❤. A model of mine. It's said that we should have a model to inspire ourselves from . In this particular flutter case, Mitch you are my model 😊😊😊😊😊. Keep feeding your community with such content and i promise we will reach 100k soooooonnn

[@createdbykoko]

thank you, I know you are a long time supporter. I really thank you and your words mean a lot to me 💜 how is flutter going for you nowadays?

[@Rigobert99]

Going slowly but surely , i am having a lot of fun 😊😊. Thank you Mitch

[@arslanrasit]

We reeeaaally need a video about state management

[@createdbykoko]

kzbin.info/www/bejne/q4LYqaWQepeXp6M

[@user-fq2yq4cy1b]

I like how organized your code is, unlike other youtubers. helps me learn to organize cuz I'm way too messy.

[@WetSockConsumer]

With this kind of content, you deserve millions of subscribers. Keep up the good work ❤

[@createdbykoko]

thank you! your words mean a lot to me 💜 how is flutter going for you these days?

[@WetSockConsumer]

@@createdbykoko Fairly well, all thanks to you : )

[@sammyjokes9613]

Every content of yours is breath-taking... Can't thank you enough ❤.

[@sammyjokes9613]

A quick question Mitch. While inserting data into cloudfirestore, what's the difference between set and add sample: Firebasefirestore.instance.collection("users").doc().set({}) ;

[@irfanganatra537]

@@sammyjokes9613 in doc() u can mentiond id..like autogenerated id

[@createdbykoko]

@@sammyjokes9613 Thank you!! you are a long time supporter, i really thank you for your kind words. Now for the 'set' and 'add' difference in firestore: The set method is used to set the value of a specific document, whether that document exists or not. If the document does not exist, it will be created with the provided data. If the document does exist, the set operation will replace all fields in the document with the provided object. The add method is slightly different. It's used to add a new document to a collection. When you use add, Firestore automatically generates a document ID for you. The document ID is a unique string that identifies the document. Basically, the main difference is that set requires you to specify a document ID and can replace an existing document, while add will automatically generate a document ID and will always create a new document. I hope this makes sense, let me know if you need more help 💜

[@sammyjokes9613]

@@createdbykoko thank you so much. I understand better now❤

[@tennisbey]

NICEEE, just continue this kind of tutorials man, this was really detailfull and not a empty dummy :D

[@createdbykoko]

💜

[@ghassanalkaraan]

YAY!! My first chat app ever ! It was challenging for me, but I was able to understand everything ! Now, I will go for more tutorials... Thanks !!

[@createdbykoko]

Congrats good job!!! 💜 keep it up

[@cossamkabaghe3195]

your mode of delivery is intuitively awesome Bro....keep it lit 🔥

[@createdbykoko]

Thank you. Your words mean a lot to me 💜

[@AbhinavMishraA-wc3ky]

I was waiting for that! Thank you!

[@createdbykoko]

Enjoy! Let me know if you have any problems💜

[@chiprecious9012]

i need the repo for this chat app please@@createdbykoko

[@irfanganatra537]

I am a teacher and learning flutter.... I like the way you make code easier....

[@createdbykoko]

Nice!! you are a teacher. I respect teachers haha 💜 I love being simple, so I can understand myself

[@mrvui144]

Excellent as always. Thanks mate!👍👍👍

[@createdbykoko]

My pleasure 💜 let me know if you have any problems

[@senorconfiguracion8067]

I love your videos, keep going ♥️

[@createdbykoko]

thanks for your words! really gives me motivation to help others💜

[@karolkrakowski9263]

I really wanted to start my Flutter journey with some working projects, and your tutorial proved to give me the most useful information in the shortest span of time. Thank you! The (Legendary) Purple Heart 💜

[@createdbykoko]

I am glad I could help you! 💜How is flutter going for you these days?

[@emiliosantos9073]

Clear, concise, well explained. Thank you man.

[@createdbykoko]

my pleasure 💜how is flutter going for you these days? what are you trying to make?

[@thatolebethe8069]

this video is kick ass , thank you so much. Helped me alot on a side gig . appreciate your videos thumbs up

[@durgeshjadhav01]

i always love the way you use color combinations and shades of color . will start new series on nodejs projects

[@createdbykoko]

Thank you for noticing those details haha. It really bothers me if the color combinations are not good haha.. I need to make it look nice. Also yes I am exploring different backends. Do you recommend nodejs?

[@codewithdallah]

@@createdbykoko Yes nodejs please

[@chepurisaivignesh]

@@createdbykoko yes nodejs please

[@durgeshjadhav01]

@@createdbykoko yes nodejs

[@durgeshjadhav01]

@@createdbykoko mitch the last part of authentication is not out yet , which is the apple sign in . so yeah i am waiting for it . hoping it will come soon

[@MustafaTurgut-nz1xd]

first time building a chat app , it feels amazing!! Now im gonna improve it and then show it to my friends :DDD Thank you so much for the video

[@createdbykoko]

how did it go?💜💜

[@abdelouahebbenouar6157]

Does the receiver get messages in real time (does he need to refresh the page?

[@qalewold]

bro what can i say you are legend

[@user-qe5ls1hf9o]

I can just say that was fantastic 🔥

[@createdbykoko]

💜

[@thisormaybethis]

Thank you, this was really helpful :)

[@_say__my_name03]

this is my first video of flutter and now i hv already learned so much thanks mitch 🤟

[@createdbykoko]

wow first video haha good job! how is flutter going for you these days? 💜

[@youssefhelwa8312]

Great video Mitch! I have a question, what is the point of using Provider for accessing services function when you can call the functions directly via class name?

[@kashaf8863]

Provider is a state management

[@createdbykoko]

For simple apps like our one, you don't have that many pages so you can call the function directly via class name. But as you have more pages, state management becomes essential, so provider will be helpful for that. For reference, here's the provider tutorial: kzbin.info/www/bejne/q4LYqaWQepeXp6M 💜

[@kashaf8863]

@@createdbykoko Hy Mitch can u plz make video on how we add pics and documents on firebase storage ang cloud firestore

[@charlierussell7260]

Is there any chance you can do a more advanced chat app as a direct continuation from this? Including things like push notifications, unread message markers, home_page.dart sorted by who messaged last, etc. Great work of course Mitch!!!

[@fritzmarsden5707]

Mitch, can you make a list or a playlist of all your projects that use Provider for state management. If not could you start to put it in your description, as it helps when I want to just plough through your videos that contain a particular thing that I need to practice.

[@hemalparmar8284]

greate video mann!!! really really helpfull!!!💜💜💜

[@loloof64]

Thank you very much for this tutorial. Did you also make a video on flutter application architecture ? Because I like very much your organisation style. Also, it seems that you forgot to release the TextEditingControllers when done with them.

[@prajwalvsangam9234]

Very helpful, thanks! 💜

[@createdbykoko]

no worries. How is flutter going for you these days?💜

[@minhduc8a21]

Amazing tutorial!

[@mo_shuqair]

Thank you. I came to check the design of the collections and found that you implemented the same solution that I thought of 😀, but I have a question regarding your use of the Provider in the Auth Service. Why did you use it? In this application, you did not need notifylisteners, if it was a normal class. Will anything change?

[@user-tl5uw3kt8d]

its so unusual not seeing your face in video 😄 But still so cool to watch, im learning by your videos, thank you so much!

[@createdbykoko]

haha do you prefer the face in the video? takes me longer to produce 🤣

[@user-tl5uw3kt8d]

@@createdbykoko yeah, it’s just feels more cozy, I think)

[@1786martin]

Hi Mitch, could you code a reservation app? Using a calendar view for months and show the reservations either as a list or on the calendar. Each event a different colour and editable by clicking on it. E.g. a booking of a hotel room.

[@createdbykoko]

yep okay noted 💜

[@chiprecious9012]

i cant find the repo for this chat app. i need it please @@createdbykoko

[@muhdwaffiq.9099]

great video bro! Thankss💜

[@mugiwaranocoder]

Nice work ✨🚀

[@createdbykoko]

Let me know if there are any problems. How is Flutter going for u?

[@nicolassasso6073]

You are amazing man!! Thanks for all the tutorials 💜

[@createdbykoko]

My pleasure 💜 how is flutter going for u?

[@kosionaga213]

just created a github account just to follow you. Thanks Genius.

[@Kaachii]

Good day Mitch. Can the instance of the AuthService be used in 17:04 instead of using provider? If not, can you please explain why? I am a beginner in flutter. Thank you.

[@rishabhbajpai648]

Hey, I'm just curious, why didn't you use the elevated button to create the sign in button?

[@aldiaa_net]

Well done, your style is very easy

[@BurtonJohnson-lg7ol]

The FirebaseAuthExceptions being caught in AuthService, which in turn throw an exception, don't seem to be caught by the catch clauses in login/register. In other words, if I try to login in as an non-existent user, I don't get a SnackBar with the message, the throw halts execution of the program.

[@createdbykoko]

did u fix this? 💜

[@Codepotatoes]

Your tutorials are easy to follow. Thank you for existing

[@createdbykoko]

Glad u like it haha lmk if u have any problems 💜

[@MustafaTurgut-nz1xd]

very nice video , please keep it going

[@sumirandahal76]

Hey mitch Could you please teach us more about state management like providers in much more detail. Thank you for quality content mitch. Purple heat💜

[@createdbykoko]

kzbin.info/www/bejne/q4LYqaWQepeXp6M

[@markjosephortizano5084]

It helps me a lot, Thanks with this video tutorial

[@DailyFXsignal]

Please I have a question about the back end video you uploader. Please for flutter which backend language should I learn?

[@user-mg3kz7yj7f]

Hey man, my friends are creating a project like grab wherein you can book a ride. I want to create a messaging feature where both the passenger and the driver can communicate. can i implement this project in our project?

[@bentalla]

Great; Tkx you really helpful

[@user-qn9jj7gk9x]

Hey Mitch, Really super video! I also watched your video on sending push notifications from FCM. I had a couple of questions. For example if I wanted to send a message to a group of people that their table is ready would I use FCM or chat messenger? I'd want to make sure they received the message even if their app was minimized. Facebook messenger and What's app give notifications even when minimized so I'm confused if they use something like FCM or it's a chat feature? Thanks a bunch!

[@createdbykoko]

it would be something more similar to FCM and just notifications in general 💜

[@dragonball.46]

Thank You So Much ❤❤

[@createdbykoko]

My pleasure, let me know if there are any issues 💜

[@saddamwassan897]

💜 Thanks Mitch It was Awesome...

[@mustaphamaulid2541]

Hey bro there some error that i have each day about "no firebase app '[default]' has been created - call " and I always you see in your video there some dart file you don't show us how you solve it you name it "FIREBASE_OPTIONS.DART" since in your the wall video and until now I fail to solve it can you help me

[@Abhicoder]

Great tutorial sir!

[@createdbykoko]

thanks glad you like it! let me know if u have any problems 💜

[@Abhicoder]

Sure sir!

[@omarmostafa651]

💜💜💜💜💜💜💜💜 great work man thnx a lot can u teach us the state management ?

[@atheel5678]

Thank you for making this tutorial 🥰

[@ghulammurtaza7959]

That's great but please add more features like sending images video, show user last seen and also add if the user has seen the message or not

[@createdbykoko]

yep sure. Just the chatting function itself is a 40 minute video haha. I will work hard to produce more

[@ghulammurtaza7959]

@@createdbykoko that's good also add push notifications

[@createdbykoko]

@@ghulammurtaza7959 ah yes ofc. Notifications good idea

[@chepurisaivignesh]

@@createdbykoko push notifications tutorial from you would be 🔥

[@stanleyvudikala]

@@createdbykokoyes! Please implement push notifications

[@user-ob9ju8xn7v]

Very helpful..best tutorial for chat app.

[@jy_maloba]

This is amazing, These videos are really helpful. I'm currently learning Dart and Flutter. Can you create a bus tracking app? 😁Also how did you get so good?

[@createdbykoko]

yep okay noted 💜 I learned by creating simple apps and slowly building up the complexity! I still have a long way to go haha

[@_infinity_2008]

Next you do the group chatting in this app and also remove the chats we don't use and a search button for search the chats and a global search for new chats at last a deleting the chats and messages

[@createdbykoko]

Good idea 💜

[@akz2430]

Hi, I have a simple question about Firebase DB, can it be used in e-commerce applications such as the restaurant application? Big love ❤

[@victordziedzorm]

Yes

[@createdbykoko]

yup

[@natnaelgetu]

when a keyboard is appeared it will be overflow bottom try to correct that , the rest is awesome

[@MigwiKeith]

Thanks man. ❤

[@sumirandahal76]

purple heat mitch, let's build more !!!! peace

[@aronejerome]

Hello. How about when you click the chat bubble . The timestamp will display. Then sending chat realtime

[@0000z2]

the real world apps are functioning based on application server instead of coding everything inside the app............would u do server based app for us?

[@thatolebethe8069]

how would you add notifications for this app, like notify users when there is a message

[@prathamgangwal1735]

Bro one video for push notifications too please created an chat app now getting notification is what i want to learn ! and only you can make things easy to understand 😅😅

[@oussamasbisiane4544]

I don't understad why option:defaultFirbaseOptions.currentPlateform doesnt show up and when I wrote it problems apear plus what's the rule of it ,is it okey if i avoid it ?

[@mmathems395]

I haven't watched this yet, but does this tutorial cover unread messages? I'm seeking the way of covering badge number for iOS notifications, and unread messages seems to cover a part of the journey.

[@tangenimatheus1971]

Hi mitch i am having difficulties Fetching the messages from firebase for each chatroom, how ever i did everything you did and explored AI for help but i failed. I need help.

[@onuaugustine7276]

Great piece. 💜

[@createdbykoko]

glad you like !💜 how is Flutter going for you?

[@onuaugustine7276]

@@createdbykoko going well for me. Thanks 🙏🏼.

[@ashwinnandihalli3961]

This is super helpful. Thank you. Question 1: Do you have any tutorial on firebase emulator? especially using emulator with real android devices? Use case is I want to give the chat app to 2 people in the room and ask them to chat and check on emulator and tweak it Question 1: When to use firebase Realtime database? example if i want to show that other person is typing do i need to use fire store or Realtime DB?

[@7_hernanhuwae745]

thank you so much bro for your lesson

[@TheMonkey987654321]

Does anyone else have an issue with the messages displaying once sent? I am using a windows computer and emulating through Chrome, so I wonder if that is the issue.

[@muhammadhassan4289]

hey mitch, its the best chat app tutorial uptil now, can u please add like if a user has got a new message from a user, he should be shown at his homepage a count value that 1 message is new or something like that. Btw, keep up this good work

[@createdbykoko]

noted💜

[@ButterDog11]

Dude thanks a lot for this tutorial, I am a complete flutter beginner and this video helped me understand the flow of things in flutter. There were times where I was thinking what's going on in that code but that just motivated me to learn more. 💜

[@raghavmundhara4702]

Hey can you provide a detailed Tutorial video on Provider please

[@technicalguy.]

Awesome ❤

[@createdbykoko]

I recognise your name, you have been supporting me for a while. I really thank you for that 💜How is flutter going so far? Let me know if you need any help

[@technicalguy.]

My flutter's journey is going great, btw thanks for your efforts, Keep Going, you'll definitely have millions of subs.

[@suhaibkamaruzaman6219]

Thank you! This help me a lot. But can you make a video about a chat app with voice recording feature😄😄

[@vikrantt22]

after importing cloud_firestore the blue dots appears under firetore word in the code and on hovering it says firestore is an unknown word. This is the issue regarding import statement in VS code can anyone help me to solve this.

[@divinemacdonald1675]

💜 Can you add like a notification to show that you were sent a message?

[@connectSanjayMali]

@Hey Mitch, You been doing great stuff. Have you ever thought of playing around with web + apps.

[@supratik93]

Hey koko, can u make a lacture on realtime api calling through bloc, ex-weather api.

[@tradevievv212]

thank you for the learning video, permission to save the video for me to learn

[@cameron8791]

Hey mitch can you please extend this tutorial and show how to display unread messages to the receiver and possibly do push notifications

[@createdbykoko]

💜noted

[@samitech7966]

Thank you it was very usefall

[@Faneshnsh]

Hi I like ur videos so much you helped me a lot to learn flutter I really don't know how to thank you, I am very glad that I saw ur fantastic channel 😁😊💜. By the way in ur previous chess video u didn't include the assets in the description but it's ok I can download assets from the internet but next time please include the assets in the description or in a comment it will be helpful u don't need to give us all the source code, the assets only will be fine.

[@createdbykoko]

💜💜💜

[@AshishKumar-ii7sg]

Hey Mitch, it would be very helpful if you would guide me through the state management using Provider.

[@createdbykoko]

kzbin.info/www/bejne/q4LYqaWQepeXp6Msi=nT8ln325ivGJNRsN

[@victoriawoodard3208]

This was fun to watch. Thank you for an excellent tutorial! 💜

[@user-xz3it6ve8y]

Please help i can't differentiate sender's chat bubble container color from mine Chat Buble container color, please help

[@abonyizion3828]

I can help with that , just creat a Boolean to keep track of current user and other user

[@nabenz5120]

17:51 why we need to wrap this in a ChangeNotifierProvider?

[@hoangviet1280]

ChangeNotifierProvider is used to provide AuthService for child widgets which wrapped in "child". You use this in root of app, then initial AuthService by "create: (context) => ..." then child widgets can use this class to listen to state change and call that class functions

[@user-ny8hw3iw2s]

Thanks for the amazing tutorial :) I'm trying to create a page where it fetches all chat history for the current user. The problem I'm facing is that I cannot fetch any chat documents. I think this is because the chatRoomId is custom built using userId and otherUserId. Any ideas?

[@brunoganonthapayang3953]

Thank you so much 🥰🥰

[@laminothiam9912]

Hey i have a question, can we use realTime dtabase instead of cloudfire store?

[@AI913]

I wonder how to implement a phone call function, with or without video. Is it possible without a phone number?

[@user-wg2jf7su7v]

Thanks a lot, Mitch! The Best Flutter Tutorials 💜

[@user-ow5wb2bj9r]

hi! i'm watching this part 11:15, and i have a question, I understand that in the 'login_or_register.dart' file, it returns 'LoginPage' and 'RegisterPage' based on a bool value. I'm aware that 'register_page.dart' and 'login_page.dart' have an 'onTap' function, but there doesn't seem to be any commands inside the 'onTap' function. It's just an 'onTap' function without any apparent commands, so why does it work when I click on 'Register now'?

[@aadityashah829]

Now i am happy that my internet bill is worth paying. Hi koko, woukd you please make tute on provider?

[@coderdave2317]

What if I want to create a group chat which has several members?

[@johnwendellsenados7878]

may i know why is my messages not showing in the chatpage even thought every line of code is fine