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

hey what's up welcome back to my channel where we create apps using flutter from scratch in this one I'm going to teach you how to create a messenger chat app and it's actually really fun so let me show you by jumping into the code so I've opened up a brand new flutter project and you should just get this demo home page now I'm going to delete everything below the main function so that we can start this from scratch so in my app let's have the material app and we're going to start off by creating a login page so this will just be a blank scaffold now if you come back to the main.dot file you can now click on this to import it so you should just get a white blank app and this is where we'll start so in the login page for the body I'm going to have a big column and let's have a bit of a plan here so I'm going to have a logo at the top let's have a kind of Welcome Back message and we're going to need two text Fields so one for the email one for the password and then we need our sign in button and then finally if the user is not already a member then we want to register now cool so let's go to the beginning and start filling this out now you can place any logo for your business or app but I'm just going to use an icon here and let's just use the default message icon now you can see it's there in the corner so I'm going to Center everything and you can see it's covered by that Notch area so one useful widget to use here is to wrap everything in a safe area so this will just avoid that Notch bit also now let's have a little text widget just saying welcome back you've been missed and let's style it up so maybe I can make this just slightly bigger so font size let's say 16. now when it comes to the text field we're going to use this a few times throughout the app so I'm going to create a new folder called components and in here I'm going to create my own text field so what we need in a text field is first of all the controller and then the hint text and then the Obscure text which is going to be a Boolean so let's require all these and I'll explain what each of these three things will do so if you just type text field then the first thing is we have to give it the controller so that we can access what's inside and the Obscure text let's just give it the Boolean obscure text this will be for if we want to hide the characters so if it's for like the password or something and then in the decoration let's just have a simple input decoration for now so I'm going to have some borders here if I come back to my login page let's just see what this looks like so if you start typing my text field you can see there it says Auto Import and we have to give it those three things so let's just create that real quick so the first thing is our text controller which we're going to need two of them one for the email and one for the password so let's just give the email one for this first guy and the hint text we want to say email and we don't want to obscure this so if you save this and run it again then there's our text field and you can see we can start typing in here awesome now I like to make my apps look pretty so I'm going to just decorate this up a little bit more so if you look at this Focus border I'm just going to have the same outline border but maybe make it white and let's fill in some colors in here so let's see what this looks like if I save it okay looking good now in this overall scaffold let's make the background color a gray with a strength of 300. and also I'm just going to wrap the entire column with some padding and I just wanna on the horizontal now I think the fill color we could make it lighter actually yeah that's looking a little bit better awesome now let's just copy this and do another one for the password now for this I want I want to obscure the text so what that does like I mentioned before you can see for the password field we can't see what we're typing in so that's what the Obscure text is doing now at this point I think we should have a think about how we want to space this out so one thing I like to use is just some sized boxes so this will just be empty space sweet that's looking pretty good so now it's time for our button so I also want to create another component here called my button so that we can reuse this later on now when it comes to the button I want to have a gesture detector so that we can tap on it and if you hover over this on tap you can see this is the method that it needs so I'm going to just require that at the top and for the physical appearance I'm just going to say maybe make it black and let's just put some text in the middle which I should also ask for at the beginning and so let's just save this and see what this looks like so if you start typing my button you can see there it is Auto Import so just hit enter and if I tap this button what do we want to happen Well for now let's just execute nothing and for the text let's give it sign in okay so there it is now it looks like we can't even see the text because we should make this white and maybe even bold as well cool and I think this could use some padding nice and you guys all know I hate sharp Corners so let's make this border radius much more curved and looking at this I think the text for the button could be just a little bigger so wait this is looking pretty good now one thing is in the text field I think the hint text is a bit not visible so let's change the color to Gray yeah that's a bit more better it's just grayed out awesome now let's just continue this on so let's just have some more space and the last thing we need is just some text here saying not a member so if the user is not a member we want to have an option to register so let's just have a text widget saying register now now just to show that the user this register now is clickable this particular text widget I want to make it bolder awesome so now that we have all the UI elements on the screen if you come to this overall column and you just main access alignment to the center that should make it look pretty nice maybe the logo here could be a little bigger sweet so this is our login page now we also need to create a register page which is going to be very similar to our login page so I'm just going to copy what we have here in the UI and let's just copy it in the build method here so import what we need to import now the main difference for the register page is I want one more text field now just to reflect the changes as we code this up if you come back to the main.dot file let's actually just return the register page and so we're gonna have to change this up just a little bit so for example the welcome back message we probably want to say something like let's create an account for you and when it comes to the text fields we just need one more text field to have a confirm password which means we're going to need to create one more controller called confirm password controller and then the button so we don't want to sign in we want to sign up and just at the end here we want to say already a member then you can log in now awesome so if you click on this sign up button we want to have a method here called sign up and we're going to fill this out a bit later on so let's do the same thing if I come back to the login page I want to sign in if I click this button now what I want to do right now is I want to be able to toggle between the login and the register page when I click on this text at the bottom so if you come to the top of this code let's create an on tap and just the register Now text widget let's wrap it and adjust the detector and let's do something similar for the register page so I want to wrap this login now text widget with a gesture detector so that I can make this tappable great so now what we want to do is if you come back to our main.dot file we're either showing the register page or the login page right so just to know which page we should be showing I'm going to create another thing here called login or register and for this one I want to put this in a folder called services and in this folder we're going to have one for authentication so I'm just going to call it auth and let's create this file right now so all this is going to do is we're just going to initially show the login page and then the main thing here is we need a method just to toggle between the two pages okay so if I hit this method then we're just going to show the other page and if you come to the build method just depending on this Boolean so are we showing the login page if we are then just show the login page and you can see that it requires the on tap that we created earlier so if I tap on that text widget then we want to toggle pages okay and then else let's return the register page awesome so if I come back to my main.dot let's just import this guy and let's run this awesome so you can see here we've got the login page and then if I click on that register now at the bottom it will go to the other pages and so we can just toggle between the two sweet awesome now let's hook it up to Firebase so if you go to your console let's add a new project and I'm just gonna disable Google analytics for now and let's create this sweet so we want to authenticate the users so let's click on this Authentication and let's get started cool so I want to enable the email and password and also let's add a test user so I'm just going to call that test gmail.com and just give it a password sweet so if I come back to my code we're going to need to hook this up to Firebase so I'll go through the process right now but if you need some more information and help on how to authenticate using Firebase you should check out my authentication tutorials so I'll link that below make sure to check that out if you haven't set it up already so in the terminal if you type Firebase login make sure that you're logged into the same Gmail and then now we can say dot Pub Global and we're going to activate the flutterfire CLI and by the way if you're on Mac looks like we get this uh error so if you just copy this then you can just paste it in and let's hit flutterfire configure so hopefully you should be able to see your Firebase projects and so there's the one that we created just then and we can select which platform we want to do so I'm just going to do Android and iOS cool and I'm just going to hit yes to continue and everything should be good so what we just did is if you come back to your Firebase console and you go to your project overview and if I just refresh this page hopefully you got these two apps here that are connected so the Android and the iOS sweet so now we can say flutter Pub add Firebase core and actually what we want now is the authentication so Firebase auth if you didn't know what we just did is if you go to your pop spec.yamo this is where we handle all of the dependencies so you can see those two we just added from the terminal so in this auth folder I'm going to create a new file here called authgate dot dot and essentially with this I just want to make sure to check if we are logged in or not in the body of this scaffold we're going to have a stream Builder and we're going to listen for this stream Firebase auth and we're going to listen for any auth state changes and then in the Builder we can say now depending on if the user is logged in and if the user is not logged in okay so for the user being logged in if the snapshot has data then let's return the home page which we'll create in just a second but else if the user is not logged in then we're going to return that login or register page so let's create a new file called home page and just real quick I'm just going to put something in the app bar just saying home page okay so if I come back to this we can now import it so if you come back to my main.dot file instead of returning this we can now return the auth gate and in the main function we always have to set this up so widgets flutter binding initial initialized and we're going to await for this Firebase okay we're going to initialize the app so we always have to do this when working with Firebase awesome so now let's fill out our authentication so so in the auth folder let's create a new file called authservice.dot and so we're going to create a class here to handle all of the different methods okay so at the beginning we always just need an instance of this auth to know if we're logged in or not and then we're going to need a sign in method and a sign out method just for now so I'm just going to call this sign in with email and password and all I want to know is the email and the password so we're going to put this in a try catch statement so we're going to try the sign in first okay and you can see if you go to your Firebase auth you can see that sign in with email and password method and so we can give it the appropriate fields whoops this should be async and so we can get the user credential like this and then if there's any error we can catch this exception and so this e dot code so that's the error code and we're going to throw that if there's any errors so once we sign in we should also return the user credential okay so let's see if this works if you go to your login page if I click on this sign in button then it's gonna trigger this sign-in method which is currently blank so just before I fill this out I'm going to need just a little bit of State Management and so I'm just going to use a really popular and simple State Management solution which is provider and I've used this in many of my other videos as well so if you have any problems just let me know and so once you got that we can come back to our auth service and we just want to extend this to the change Notifier so if you come back to our sign in method let's first of all get the auth service let's import that provider and this way we can access all of the methods so we're going to do another little quick try and catch and so this all the service if you hit dot you can see there's our method that we created so we're going to give it the email and password which should be in our controllers right so we're going to just get the text of whatever's in those controllers and if there's any error we're going to display it with a snack bar and that's just going to be something that shows up on the bottom sweet and the last thing we need to do is if I just come back to my main file here the my app we have to wrap this in a change Notifier provider so if you have any questions about this State Management just let me know but essentially we can access these methods within the widget tree at any point sweet which naturally means we should have some sort of button here to log out right so let's just create that method real quick in the auth service and this one is really easy just go to your instance for the Firebase auth and you can see how you can sign out easy so let's come back to our home page and if you look in the app bar you can see this actions and so here we can put our sign out button so let's use a icon button and on the Press we want to sign out which we'll create in just a second and for the icon let's use the log out icon cool so let's have this method at the top so we're going to get the auth service and you can see here sign out sweet so let's save everything and just run it again and while we're in the auth service let's also create a method to create a new user so that's for this register page right so creating a new user is also pretty simple we similarly just need an email and a password to create a user and again we're going to just use a try catch statement and the only difference here is if you go to your Firebase auth instance you can see there's a method here called create user with email and password okay and if there's any error just return that error awesome so if I go to my register page you can see this button is going to trigger this sign up method and so in here we can now do a quick check and I'm just going to make sure that the password is the same as the confirm password okay so if they're not the same then let's just show a little snack bar at the bottom just saying passwords don't match just to let the user know cool but if the password and the confirm password is all good then we can get the auth service and then we can try to sign up and just display any error in the snack bar if we need okay so if you save everything and just run this up again let's make sure it all works so I'm going to say Mitch gmail.com and just put in some password and if I sign up then it takes us straight to the home page nice and you can see there's our logout button at the top right so if I click this then we should just sign back out looking good now if I come back to my console if you go to your authentication you can see that there's our users that we created so now it's time for the chatting ability so we're going to need a cloud firestore so if you click this we can create a new database let's hit next and just choose your location I'm just going to leave it at us sweet now the first thing is if you go to your rules I'm just going to change this to true so that we can write some new information and then in the data here this is where we're going to store all the chatting information awesome now let's come back to the terminal and we're going to add the dependency for the cloud firestore so just make sure that that's in there now we've created a new user so under this when we create a new user let's also create a document for the user in the user's collection okay so if you come back to the top we've got the instance of the auth so let's have another instance for the firestore so now we can go to the firestore's collection let's call this collection users and under users we can have a few documents okay so for the documents we're going to put the user's ID and let's set a couple of fields so let's store the user ID and also and also their email so we're doing this when we create a new user now it's probably a good idea to put this same bit of code for when we sign a user in just to make sure that we add it if it doesn't already exist you know sometimes we might manually create a user like we did earlier in the back end so let's just make sure to merge this if it doesn't already exist sweet so if I say okay let's sign into the Mitch at Gmail and if I come back to my console and I refresh the firestore hopefully we have a collection here called users there it is and you can see that's the uid and now we've stored the two Fields here so so far so good now if I come back to my home page right what do I want to display I want to display let's try to display the all of the users in our app so if I grab the instance of this auth in this scaffold so under this app bar let's create in the body we're going to create this user list now I'm going to separate this out into another widget just to make the code a bit more clean and readable so we're going to build a list of users except for the current logged in user okay so we just want to display everyone else so that we can chat to them so we're going to return a stream Builder and the stream that we're going to listen for is the firestore and specifically the collection of users then we can build and just do a couple checks here so the usual like if we have an error let's just say error uh if it's loading we also just want to return loading and then finally we can return a list view so we have to give it the children now what we're going to do is we're just going to get all of the documents in our firestore and we're going to build a user list item and so again I'm just going to separate this out into an individual widget just to make the code a bit cleaner and so when I build a user list item I'm going to need a document snapshot which I actually don't need the parameter for the first method I just need it for this guy and we're going to make sure the data is in a map format so that's kind of the field that you saw earlier in firestore so we want to display all of the users except for the current user so let's just do a quick check here in the auth if the current user email is not the email in the list then we're just going to return the user as a simple list view so let's just see what this looks like now it's got an on tap method which we'll figure out in just a second so when we tap on this we want to go to that particular chat page so if I click on someone's name I want to start talking to them and let's create the chat page right now so just to make sure that this works let's get the chat page and accept a string for the user email and let's also get the receiver user's ID so when we send a message we're going to know who it's going to sweet so in the app bar for the title let's just put the receiver's email now if I come back to my home page you can see the red squiggle so let's import this and we have to fill out these couple parameters so the email just give it the email and the ID let's give it the ID cool and otherwise this return a blank containers so let's give this a go so I'm going to create a new account here just let's say like candy and it looks like we have an error here string is not a type of oh we should wrap this in a text widget there we go sweet and we can actually see if I click on this particular user we can go to the chat page awesome so again just to do another Quick Test let's create another account and this time I'm going to call it Bobby and you can see we can see all the other users that are signed in except for Bobby great and then we can start talking to them great so now it's time to have the chatting services so in our service folder we've been doing auth this whole time let's create another folder called chat and we're going to create chat Service as a class so let's start by getting the instance of the earth and the firestore and the main methods we want here is we want to send a message and we also want to get the messages from the back end so let's just start off with the Sending message I just want to know who are we sending it to right so the receiver and also what's the message and again just to have a bit of a plan here we have to firstly get the current user's information so we know who's sending the information and we have to create a new message and this is the main bit here which is we have to construct a chat room ID for the current user and also the receiver ID and then finally add the new message to the database so each pairing of two different people are going to be their own chat room ID so I'll explain that in more detail in just a second now come back to the library and we're going to create a new folder called Model because we have to create a class for the message so when we create a message what do we need to know I need to know the sender so let's grab the sender ID and also the email and let's get the receiver's ID and what is the actual message and let's also get the timestamp cool and then one last thing is we need to have a just a quick method here just to convert it to our map because that's how the information is stored in Firebase awesome so now we can come back to our chat service and just getting the current user is simple and let's get the user email as well and also the timestamp so that we can kind of show the messages in order right chronological order and now we can create a new message so make sure to import this which is what we created just then and let's create a new message so when we create a new message we have to fill out these parameters now the sender ID let's give it this current ID and the current email and everything's good now for the main brain of this so construct a chatting room ID so what we're going to do is let's get the ID of the two people right as a list and we're going to sort them and so the Sorting part is important because we just want to make sure that the chat room ID is going to be the same for any two people right like John Mary is the same as Mary John so we just want to sort them make it its own chat ID and let's just join it with like a little underscore between them and then finally we can add this to the database so if you go to the file stores collection let's create a new collection called chat rooms and inside the chat room we're going to have in the document the individual unique chat room ID and in a chat room we're going to have another collection called messages and that's where we're going to add this new message so we'll see this in action in just a second when we test it but just to finish off let's also have a method to get the messages from the database okay so once we know the user ID and the other person's user ID then let's try to get that chat room ID so we're going to do something similar we're going to sort them and join them with a underscore and we're going to look this up and for the timestamp let's say it's descending is going to be false so is going to be in chronological order as you'll see in just a second these are the two main methods so sending a message and also getting the message yay now let's come to the chat page and let's start displaying all this here so one thing about a chat page is we're going to need a message controller right we're going to have to have an input for the user let's also create an instance of my chat service that we just created and also get an instance of the auth sweet so let's just create a little method here called send message and we just want to check that we're only sending a message if it's not empty okay so if that's all good if there is a message to send then we can go to the chat service and there's our method send message just give it the appropriate information and once we've sent it we just want to make sure we want to clear the controller after sending the message great now it's time for the UI so let's go to the buddy we're going to create a big column and at the top I just want to have the messages to fill out most of the space so I'm going to expand this and then at the bottom we're going to have just a little text field so for the input so like I said I'm just going to separate out these widgets just to make our code a bit more clean and readable so we're gonna have to have three things here so building a message list building a message item and then building the message input so let's just start with the input so this is going to be a row because I want to have the text field for most of this space so again I'm going to expand it and then we can give it the controller for the hint text let's just say like enter message and of course we don't want to obscure this and right next to the text field let's create a icon button for the user to tap on it just so that we can send a message so maybe like an up Arrow would be appropriate here so that's the input part done now let's go to the building the actual message list so I'm going to start with the item and for the parameter I'm going to need to know the document snapshot so let's create the map for this and as you guys know when you look at a chat app right when you look at some some kind of messaging app we want to have the other person's messages on the left and our message is we want to align them to the right so and so that's why we should have the alignment depending on if it's the sender or if it's the receiver right so one's going to be on the right one's going to be on the left now I can return a big container and just give it the alignment and let's just have a little column here because I want to say the sender's email on the top and the message underneath sweet looking good so finally we can put this all together in a list so we're going to create a stream Builder here and the stream we're going to listen for is is the chat service getting message so let's try to retrieve all of the messages from our firestore and in the Builder let's do the usual error checks and also if it's loading and then finally we can return the list View and we can put the data in the children and so for each document so basically for each message we can build a message item now and why is this red oh there should be children sweet I think that's looking pretty good so far so let's save it and let's run it again and you can see yeah there's the text field at the bottom now I think we should add some padding but let's just test this out first let's say hello and if you send it it goes on and you can see it works sweet so the functionality works and just to test this out again I'm going to sign out and let's sign in as Mitch right and we click on that same chat room and you can see depending on if you're the sender or the receiver so again depending on the current logged in users perspective it will be aligned appropriately so that's what this alignment is doing now I think we can even make this better we can make it even prettier and if I just send another message just to show you guys more clearly what's going on you can see like if I comment out this alignment then everything is just automatically going to be in the middle right so so that's why this alignment is useful for us another thing is the in each message item for the cross axis alignment I want to make it at this the end as well as the start so yep that looks much cleaner and yay so now that the functionality is is pretty much done let's try to make this a little bit prettier so in the components I'm going to create a chat bubble and in a chat bubble all we need to know is just the message as a string and let's create a container here so once I'm padding and I know I'm going to need some decoration and specifically I want the Border radius to be curved and let's make it blue sweet and we can just give the text so if you save that and you come back to the chat page if you go to where we're displaying the message which is this text widget let's replace this with chat bubble and just give it the message to this parameter and you can see that's the little chat bubble we just created now when it comes to the decoration that's just going to be completely up to you and your preference on how you want this to look but I can see the first thing that we should do is probably make this text widget White and I think we could add some space between the message and the user's name now oh yeah we should add some padding to the bottom like this text field let's just add some sized box first on the bottom and let's add some symmetrical padding great and that's it that's how you build a simple chat app if you made it this far into the tutorial leave me a Purple Heart in the comments just so I know you did a really great job I want to continue building functional apps like this so if you have any recommendations on what you want me to build let me know below I hope you learned something thanks for watching and I'll catch you guys in the next one [Music]

Channel: Mitch Koko

Views: 100,983

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: mBBycL0EtBQ

Length: 40min 16sec (2416 seconds)

Published: Sun Jun 18 2023