Flutter Chat App with Firebase Firestore Cloud Messaging & Cloud Functions Tutorial Full Course 2022

[Music] hello guys welcome to flutter and Firebase chat application course in this course we will develop fully functional Android and iOS chat application using flutter with Firebase file store as backend you will not only learn how to develop a chat app but you will learn how to implement the real time push notifications as well as many new Advanced features in this application so let me show you guys the full intro and the complete uh overview of this chat application which we will develop in this course so first of all as you can see this is our login screen first of all let's log in from here okay on this one sign in with Google you can sign in with your Google account okay you can add from here if you have another new account I will log in with this one and also let's log in on this phone so let's log in here from this [Music] account sign in success so first of all uh the first main new feature is that is the Dark theme and the White theme okay from here the user can switch to the White theme as you can see here okay if I go to the settings page you will see here the White theme also okay now also the user can uh turn it to the Dark theme okay just like this same goes here okay as you can see as we will develop the app for the Android and iOS that is for the iPhones as well as you know flutter support both Android and iOS so first of all uh on this device I am logged in as Steven McKenzie okay and let's give go with the White theme on this phone and on this device I am logged in as Muhammad Ali by my own account okay so let's go back and let's me show you guys the chat features so as you can see from here you can search for different user okay for example if I search for John Okay then if John is available if any John is available uh mean up a user then it will show us otherwise it will say no user found so anyways for now let's just go with any user from here which is let's say I mean Steve McKenzie as you know he is online now okay so this is Steve McKenzie now we have already some previous chat okay with Steve McKenzie as you can see here so now I'm going to open up the okay from Steve McKenzie account let's open Muhammad Ali okay as you can see here we both have some previous chats now what I want to do from here I'm going to send a message to Steve McKenzie and now let me maximize the sound of both phon so that you can see the notification so now let's check the real time push notification so let's say as you know now the both users are online okay let's say if I go back from here uh or let's say if the user become offline okay and then this user send a message to this one okay now when the op is app is open let's say on the second user phone okay let's say he's searching for different user or doing anything so if I send a message from here let's send okay I will simply say hello you can also send emojis okay let's select okay and now let's send this user will receive a message alongside with a post notification in order to notify Steve McKenzie that is the second user that is here you have a notification if I show you you can see here you have a message from Steve McKenzie hello okay and you can see the Emojis also alongside with it now this is when the user is let's say busy in doing some other stuff okay let's say if the user minimize the app then in that case what happened so I'm going to send another message from here that is let's say now this is the case when the app is minimized as you can see I hope you can hear the sound of the notification as you can see here this is our app icon this is our app name which is I chat and if I show you now then you can see also the second message which is how are you okay and then the Emoji now if I click on this it will simply open up the app as you can see here now let's go to Steve McKenzie and you will see these messages which are here okay so yeah that is so cool and so nice also you can uh send emojis as I told you and also you can send uh the stickers that is let's say I'm going to send this sticker as you can see here so you can also send different stickers as you can see here let me send this sticker now as you can see here okay different stickers and you can also receive a notification for the stickers as well for example uh I go back okay and now if I send any other sticker let's say this one and here you can see I received a notification okay which is the sticker name mimi6 okay now if I minimize the app okay and I I send another one let's say this [Music] one then here you can see I receive the next one notification also okay two notifications now so that is really cool and really nice and now if I click on it okay it will send me to the app and here you can see it now also you can send uh images let me just minimize the app I mean let's go back first okay in order to check the push notification also I'm going to send this image okay you can send images also so the image has been sent here okay here you can see you have a message from Steve McKenzie and here you can see the image uh name or link okay if you click on it it will send you to the app I mean as you can see here now also if we minimize the app then it will also send the notification in case let's say if the user is busy somewhere so I will send this image [Music] now and here we go here you can see it you have a message from Steve McKenzie so let's open it as you can see here okay also the next thing is you can open any image you want for example if I want want to see this image in full size I will simply click on it and here you can see this is the image full size screen so here you can zoom any image you want okay I mean you can view the complete image in full form okay as you can see here using your hand you can zoom it un Zoom it and so on now so now the next thing is this call feature hope you can see this icon if you click on it then it will allow you to call the user using the phone number so this is the call feature now the next feature is if you go back and here uh as I told you you can turn on the white mode and black mode and now here we have the settings if you go to the settings in the settings you will see your profile picture name and all the information and also you can update your phone number here and name etc for example if I want to change my name I will simply say Steam let's say Steve Parker okay and if I want to change my profile I will simply click on it and from the gallery I can simply choose any image I want let's choose this one so it is now updating your profile picture I change my name then let's say you can change your uh info also so I mean your bio for example let's say I will say programmer and similarly you can change your phone number also simply by clicking here you can choose your country for example I'm going to choose United States okay and now if you click here you will simply write your phone number here so I'm going to write here the phone number okay and then you can simply click on update in order to update the information update success if if I go back and if I come back here you will simply see it okay Steve Parker if I also go back from here then here you will see it Steve Parker programmer if I come back here then you can see it here Steve Parker so now it has been changed also similarly the profile picture also okay I mean here you can see the profile picture alongside with the chats as well as the DAT and time okay so that is really cool and really nice so yeah this is all about this application which we will develop in this course and if you want to log out from the app you can simply click here on this sign out so that's it for this course and I hope you will love this course and you will learn many new things in this course for example the post notification the dark mode and the Dark theme and White theme of a app so yeah see you guys in the course

Channel: Muhammad Ali's Coding Cafe

Views: 40,383

Keywords: flutter 2.5 app, flutter 2.5 release, flutter 2.5 changes, flutter 2.5 template, flutter 2.5 tutorial, flutter 2.5 features, chat app with firebase, chat app android studio, chat app flutter, chat app flutter firebase, chat application in android studio, chat app with flutter, chat app with flutter and firebase, chat app with flutter and node js, chat app with firebase android studio, flutter chat app, firebase push notification flutter, firebase functions flutter, android, ios

Id: Ob5JkM0_ppM

Length: 10min 33sec (633 seconds)

Published: Mon Oct 11 2021