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

Рет қаралды 112,867

Күн бұрын

💬 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/

Пікірлер: 380

@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 • kzfaq.info/get/bejne/es5dlreCr82xXYU.html 2📱 Email Login & Logout • kzfaq.info/get/bejne/lZmHYK2mrryqnJs.html 3📱 Email Sign Up • kzfaq.info/get/bejne/p9KGnZBh29bFh2Q.html 4📱 Google Sign In • kzfaq.info/get/bejne/Z7tokrCilrfIiGg.html 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

@user-fq2yq4cy1b 2 ай бұрын

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

@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 6 ай бұрын

kzfaq.info/get/bejne/q7elq9WLqpjIoXU.html

@AbhinavMishraA-wc3ky Жыл бұрын

I was waiting for that! Thank you!

@createdbykoko Жыл бұрын

Enjoy! Let me know if you have any problems💜

@chiprecious9012 7 ай бұрын

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

@mrvui144 Жыл бұрын

Excellent as always. Thanks mate!👍👍👍

@createdbykoko Жыл бұрын

My pleasure 💜 let me know if you have any problems

@tennisbey 10 ай бұрын

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

@createdbykoko 6 ай бұрын

💜

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

@senorconfiguracion8067 Жыл бұрын

I love your videos, keep going ♥️

@createdbykoko Жыл бұрын

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

@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❤

@ghassanalkaraan 10 ай бұрын

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 6 ай бұрын

Congrats good job!!! 💜 keep it up

@thatolebethe8069 11 ай бұрын

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

@cossamkabaghe3195 Жыл бұрын

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

@createdbykoko Жыл бұрын

Thank you. Your words mean a lot to me 💜

@thisormaybethis 6 ай бұрын

Thank you, this was really helpful :)

@qalewold Жыл бұрын

bro what can i say you are legend

@emiliosantos9073 6 ай бұрын

Clear, concise, well explained. Thank you man.

@createdbykoko 6 ай бұрын

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

@minhduc8a21 7 ай бұрын

Amazing tutorial!

@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

@MustafaTurgut-nz1xd Жыл бұрын

very nice video , please keep it going

@user-qe5ls1hf9o 8 ай бұрын

I can just say that was fantastic 🔥

@createdbykoko 6 ай бұрын

💜

@prajwalvsangam9234 6 ай бұрын

Very helpful, thanks! 💜

@createdbykoko 6 ай бұрын

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

@hemalparmar8284 7 ай бұрын

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

@muhdwaffiq.9099 2 ай бұрын

great video bro! Thankss💜

@mugiwaranocoder Жыл бұрын

Nice work ✨🚀

@createdbykoko Жыл бұрын

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

@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 6 ай бұрын

how did it go?💜💜

@_say__my_name03 8 ай бұрын

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

@createdbykoko 6 ай бұрын

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

@karolkrakowski9263 10 ай бұрын

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 6 ай бұрын

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

@markjosephortizano5084 7 ай бұрын

It helps me a lot, Thanks with this video tutorial

@bentalla Ай бұрын

Great; Tkx you really helpful

@dragonball.46 Жыл бұрын

Thank You So Much ❤❤

@createdbykoko Жыл бұрын

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

@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.

@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

@abdelouahebbenouar6157 Жыл бұрын

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

@Abhicoder Жыл бұрын

Great tutorial sir!

@createdbykoko Жыл бұрын

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

@Abhicoder Жыл бұрын

Sure sir!

@MigwiKeith 4 күн бұрын

Thanks man. ❤

@charlierussell7260 2 ай бұрын

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!!!

@aldiaa_net 11 ай бұрын

Well done, your style is very easy

@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)

@nicolassasso6073 Жыл бұрын

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

@createdbykoko 6 ай бұрын

My pleasure 💜 how is flutter going for u?

@atheel5678 Жыл бұрын

Thank you for making this tutorial 🥰

@fritzmarsden5707 5 ай бұрын

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.

@Codepotatoes 11 ай бұрын

Your tutorials are easy to follow. Thank you for existing

@createdbykoko 11 ай бұрын

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

@omarmostafa651 Жыл бұрын

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

@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.

@mo_shuqair 16 күн бұрын

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?

@brunoganonthapayang3953 11 ай бұрын

Thank you so much 🥰🥰

@saddamwassan897 Жыл бұрын

💜 Thanks Mitch It was Awesome...

@SolLiberalizm 7 ай бұрын

thanks man

@samitech7966 11 ай бұрын

Thank you it was very usefall

@user-ob9ju8xn7v 10 ай бұрын

Very helpful..best tutorial for chat app.

@7_hernanhuwae745 11 ай бұрын

thank you so much bro for your lesson

@kosionaga213 11 ай бұрын

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

@rishabhbajpai648 11 ай бұрын

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

@user-mg3kz7yj7f 7 ай бұрын

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?

@kaachi1748 5 ай бұрын

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.

@DailyFXsignal Жыл бұрын

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

@onuaugustine7276 10 ай бұрын

Great piece. 💜

@createdbykoko 10 ай бұрын

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

@onuaugustine7276 10 ай бұрын

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

@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 7 ай бұрын

Provider is a state management

@createdbykoko 6 ай бұрын

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: kzfaq.info/get/bejne/q7elq9WLqpjIoXU.html 💜

@kashaf8863 6 ай бұрын

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

@victoriawoodard3208 6 ай бұрын

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

@sumirandahal76 11 ай бұрын

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

@lizcodes123 9 ай бұрын

Thank you 💜

@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

@tangenimatheus1971 4 ай бұрын

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.

@aronejerome 10 ай бұрын

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

@oussamasbisiane4544 10 ай бұрын

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 ?

@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 7 ай бұрын

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

@raghavmundhara4702 Жыл бұрын

Hey can you provide a detailed Tutorial video on Provider please

@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?

@sumirandahal76 11 ай бұрын

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 6 ай бұрын

kzfaq.info/get/bejne/q7elq9WLqpjIoXU.html

@laminothiam9912 5 ай бұрын

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

@thatolebethe8069 10 ай бұрын

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

@user-wg2jf7su7v 4 ай бұрын

Thanks a lot, Mitch! The Best Flutter Tutorials 💜

@tradevievv212 11 ай бұрын

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

@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

@mmathems395 5 ай бұрын

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.

@connectSanjayMali Жыл бұрын

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

@moazyaseen2580 9 ай бұрын

Great✨✨

@supratik93 11 ай бұрын

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

@_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 💜

@natnaelgetu 11 ай бұрын

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

@ButterDog11 6 ай бұрын

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. 💜

@user-qn9jj7gk9x 7 ай бұрын

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 6 ай бұрын

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

@coderdave2317 6 күн бұрын

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

@johnwendellsenados7878 7 ай бұрын

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

@TheMonkey987654321 29 күн бұрын

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.

@rakshithgowda8782 8 ай бұрын

Push notifications not added

@vikrantt22 2 ай бұрын

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.

@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 6 ай бұрын

did u fix this? 💜

@navyapreethamreddy1616 Жыл бұрын

can you create a separate playlist for flutter animations

@richard2845 5 ай бұрын

your app does not subscribe to remote change when the other side of user push new messages

@user-ny8hw3iw2s 2 ай бұрын

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?

@AI913 5 ай бұрын

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

@abdellahahbar5292 7 ай бұрын

thank you

@suhaibkamaruzaman6219 6 ай бұрын

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

@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

@mulindakevinbruce8773 3 ай бұрын

hello, asking bout the link to that firebase authentification

@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

@meganova609 11 ай бұрын

Vro I made a very complex app and I need ur help tell me how can i reach u?

@ashwinnandihalli3961 8 ай бұрын

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?