💬📱Chat Messenger App • Full Tutorial from scratch / Flutter x Firebase
HTML-код
- Опубликовано: 12 июн 2024
- 📱 Flutter Courses • mitchkoko.app/
💰 Hire Me / Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
❤️ True Fans • / mitchkoko
~ ;
⌚️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/ 
Наука
🔥📱 Flutter Templates • mitchkoko.app/
🥷🏽📱 Minimal Social App • mitchkoko.gumroad.com/l/MinimalSocialApp
💰📱 Minimal Ecommerce App • mitchkoko.gumroad.com/l/MinimalEcommerceApp
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 • ruclips.net/video/Dh-cTQJgM-Q/видео.html
2📱 Email Login & Logout • ruclips.net/video/_3W-JuIVFlg/видео.html
3📱 Email Sign Up • ruclips.net/video/qlVj-0vpaW0/видео.html
4📱 Google Sign In • ruclips.net/video/1U8_Mq1QdX4/видео.html
I hope this helps you 💜 happy coding!
Could you make a game using game console template flutter with flame
A music 🎵 app?
Hey mitch, i think make tutorial how to use library getX is good bcs soo simple for newbie than provider
bro make a buy and sell app for old stuff for college students
music app
We reeeaaally need a video about state management
ruclips.net/video/uQuxrZE2dqA/видео.html
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
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?
Going slowly but surely , i am having a lot of fun 😊😊. Thank you Mitch
I like how organized your code is, unlike other youtubers. helps me learn to organize cuz I'm way too messy.
Every content of yours is breath-taking... Can't thank you enough ❤.
A quick question Mitch.
While inserting data into cloudfirestore, what's the difference between set and add
sample:
Firebasefirestore.instance.collection("users").doc().set({}) ;
@@sammyjokes9613 in doc() u can mentiond id..like autogenerated id
@@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 💜
@@createdbykoko thank you so much. I understand better now❤
With this kind of content, you deserve millions of subscribers. Keep up the good work ❤
thank you! your words mean a lot to me 💜 how is flutter going for you these days?
@@createdbykoko Fairly well, all thanks to you : )
NICEEE, just continue this kind of tutorials man, this was really detailfull and not a empty dummy :D
💜
I was waiting for that! Thank you!
Enjoy! Let me know if you have any problems💜
i need the repo for this chat app please@@createdbykoko
I am a teacher and learning flutter.... I like the way you make code easier....
Nice!! you are a teacher. I respect teachers haha 💜 I love being simple, so I can understand myself
Excellent as always. Thanks mate!👍👍👍
My pleasure 💜 let me know if you have any problems
your mode of delivery is intuitively awesome Bro....keep it lit 🔥
Thank you. Your words mean a lot to me 💜
I love your videos, keep going ♥️
thanks for your words! really gives me motivation to help others💜
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 !!
Congrats good job!!! 💜 keep it up
Clear, concise, well explained. Thank you man.
my pleasure 💜how is flutter going for you these days? what are you trying to make?
this video is kick ass , thank you so much. Helped me alot on a side gig . appreciate your videos thumbs up
Thank you, this was really helpful :)
i always love the way you use color combinations and shades of color . will start new series on nodejs projects
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?
@@createdbykoko Yes nodejs please
@@createdbykoko yes nodejs please
@@createdbykoko yes nodejs
@@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
bro what can i say you are legend
Very helpful, thanks! 💜
no worries. How is flutter going for you these days?💜
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 💜
I am glad I could help you! 💜How is flutter going for you these days?
I can just say that was fantastic 🔥
💜
Amazing tutorial!
this is my first video of flutter and now i hv already learned so much thanks mitch 🤟
wow first video haha good job! how is flutter going for you these days? 💜
greate video mann!!! really really helpfull!!!💜💜💜
Your tutorials are easy to follow. Thank you for existing
Glad u like it haha lmk if u have any problems 💜
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?
Provider is a state management
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: ruclips.net/video/uQuxrZE2dqA/видео.html 💜
@@createdbykoko Hy Mitch can u plz make video on how we add pics and documents on firebase storage ang cloud firestore
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
how did it go?💜💜
Nice work ✨🚀
Let me know if there are any problems. How is Flutter going for u?
great video bro! Thankss💜
very nice video , please keep it going
You are amazing man!! Thanks for all the tutorials 💜
My pleasure 💜 how is flutter going for u?
Does the receiver get messages in real time (does he need to refresh the page?
Great tutorial sir!
thanks glad you like it! let me know if u have any problems 💜
Sure sir!
It helps me a lot,
Thanks with this video tutorial
its so unusual not seeing your face in video 😄
But still so cool to watch, im learning by your videos, thank you so much!
haha do you prefer the face in the video? takes me longer to produce 🤣
@@createdbykoko yeah, it’s just feels more cozy, I think)
Thank You So Much ❤❤
My pleasure, let me know if there are any issues 💜
Well done, your style is very easy
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.
yep okay noted 💜
i cant find the repo for this chat app. i need it please
@@createdbykoko
just created a github account just to follow you. Thanks Genius.
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.
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.
This was fun to watch. Thank you for an excellent tutorial! 💜
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💜
ruclips.net/video/uQuxrZE2dqA/видео.html
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!!!
💜💜💜💜💜💜💜💜 great work man thnx a lot
can u teach us the state management ?
Thanks a lot, Mitch! The Best Flutter Tutorials 💜
Great piece. 💜
glad you like !💜 how is Flutter going for you?
@@createdbykoko going well for me. Thanks 🙏🏼.
Thank you for making this tutorial 🥰
Great; Tkx you really helpful
💜 Thanks Mitch It was Awesome...
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.
Please help i can't differentiate sender's chat bubble container color from mine Chat Buble container color, please help
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
yep sure. Just the chatting function itself is a 40 minute video haha. I will work hard to produce more
@@createdbykoko that's good also add push notifications
@@ghulammurtaza7959 ah yes ofc. Notifications good idea
@@createdbykoko push notifications tutorial from you would be 🔥
@@createdbykokoyes! Please implement push notifications
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
Good idea 💜
Hey, I'm just curious, why didn't you use the elevated button to create the sign in button?
Very helpful..best tutorial for chat app.
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?
thank you so much bro for your lesson
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?
yep okay noted 💜 I learned by creating simple apps and slowly building up the complexity! I still have a long way to go haha
purple heat mitch, let's build more !!!! peace
Please I have a question about the back end video you uploader. Please for flutter which backend language should I learn?
Thank you it was very usefall
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!
it would be something more similar to FCM and just notifications in general 💜
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. 💜
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.
did u fix this? 💜
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.
Awesome ❤
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
My flutter's journey is going great, btw thanks for your efforts, Keep Going, you'll definitely have millions of subs.
thanks man
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
Thank you so much 🥰🥰
when a keyboard is appeared it will be overflow bottom try to correct that , the rest is awesome
Hi, I have a simple question about Firebase DB, can it be used in e-commerce applications such as the restaurant application?
Big love ❤
Yes
yup
Hello. How about when you click the chat bubble . The timestamp will display. Then sending chat realtime
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 ?
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?
Hey can you provide a detailed Tutorial video on Provider please
thank you for the learning video, permission to save the video for me to learn
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.
how would you add notifications for this app, like notify users when there is a message
Thank you 💜
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.
Great content but where is 1080p?
good point. I'm not sure why haha I will fix that💜
@Hey Mitch, You been doing great stuff. Have you ever thought of playing around with web + apps.
Hey i have a question, can we use realTime dtabase instead of cloudfire store?
Hey mitch can you please extend this tutorial and show how to display unread messages to the receiver and possibly do push notifications
💜noted
may i know why is my messages not showing in the chatpage even thought every line of code is fine
Push notifications not added
Sir there is an error in the home page stating that type null is not a subtype of type string,could you please tell the solution..
Hey koko, can u make a lacture on realtime api calling through bloc, ex-weather api.
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
😅😅
I wonder how to implement a phone call function, with or without video. Is it possible without a phone number?
💜
Can you add like a notification to show that you were sent a message?
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?
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?
your app does not subscribe to remote change when the other side of user push new messages
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.
I am this early!
you are also a long time sub. thank you for always being supportive 💜
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
noted💜
can you create a separate playlist for flutter animations
Hey Mitch, it would be very helpful if you would guide me through the state management using Provider.
ruclips.net/video/uQuxrZE2dqA/видео.htmlsi=nT8ln325ivGJNRsN