Flutter Tutorial - Build A Chat App With Flutter & Firebase

with firebase and flutter you can create great chat applications and rebuild this chat application which you are seeing here this video is sponsored by invoice ninja invoice ninja is one of the largest open source platforms for invoicing if you search for something to manage your invoices with flutter and handle also your online payments this service might be something for you and to get started with this invoice ninja plugin you find the link in the description box of this video and the first thing we like to build here is the ui and then we connect to firebase as our back end to load all the data inside of the ui and also to send shared messages to different people i have created here scaffold and here inside we create two things so we create two widgets where we want to lay out our whole application the first one is the header widget and this is basically this here at the top and then we have also this body widget which is here our scrolling list of the users and inside of both of them we need the user properties and first of all we like to load these users from firebase now i have created here a new class firebase api and here inside we want to create this get users to actually fetch the users from our backend and here inside we first of all need to access here our plugin the firebase firestore instance and therefore you need to set here in the pub spec drama file the firebase plugins and i will also link you in the description box a video about how to set firebase correctly up because there are some steps needed and from there on you simply can then access your collections and documents so basically how firebase is working we have here collections and documents and collections you can store many documents and instead of restaurants we have then our users and then each document represents a single user and here inside of this method we simply tell firebase okay get me the users from this collection and then we also can set here some ordering so we can decide and tell firebase okay we want to get the data in a specific order and after it we call here the transform method and inside of this method we call the user from json because inside of our firebase there is everything as the raw data and we want to get the objects and we basically want to get the user here from and therefore we put here our transformer inside from this utils and this is basically caring about that the transformation is doing from this raw data which firebase stores and it is then transforming it to the user data and you can get the whole source code with the first link in the description if you want to get more details about this and by the way you can also get my flutter course where i teach you how to become a better and more efficient flatter developer with the second link in the description and if you don't understand what's going on here for now it's fine because simply call this transformer and he will do all the transformation for you and that's all what we need for this method so basically we are only getting the users from firebase and now we can go back to our chats page and now here back in the page we set the users so we want to get them with the get users property so we want to use here a stream builder and inside of this builder we put here the stream and we call here exactly the method which we have created before to get the users and then in our snapshot we actually get the users so here we can extract this data and now we have here our list of the users inside and by the way this is here returned by this get users list of users so i have here this user object which is returned and this is here inside the from json and the 2js method to actually do the transformation from firebase to an object and now that we have here the users they are going inside of our two widgets which we later create and now we also want to add here some error handling so basically we add here this snapshot connection state and now we can decide what should happen if the data is loading then we show a progress indicator and also the other basic stuff so here if some error is happening then we want to show here an error text and also if the user is empty then we want to say here okay we don't have any users and then we also create here this build text method where actually the text is created if we have any error messages which we want to show on the screen and that's it what we first of all need to do to get the users properly and now we can simply show them in our ui so we first of all create here this chat header widget and now here inside of the chat's header widget we want to actually display here this row which you can scroll and then you see all the users which we have and here inside we first of all get the users which we have loaded from firebase and now we go here into our build method and create a column and here inside we want to create first of all the header so here we have this chats app header so it's a basic text widget and i have also created it here with a different style and after it we have some space and then comes interesting part to actually show the users and we want to show the users only with the height of 60 and then we have our list view builder and here the important thing is to set the scroll direction to horizontal because we want to scroll horizontally our users and now we can add here all our users so we go over all our users and then we get here an individual user which we need to display and for each user we simply want to add here some margin so that we have some space between the images so this is basically the space to the right side which we have to each image and inside we want to add the circle avatar so i create here first of all the gesture detector because we also want to get the interaction of the user if he clicks on this image and then we build here the circle avatar and to also accomplish this design we put here at the beginning this search icon inside and therefore i simply look here if the index is zero then i put here the search icon inside and if it's not zero we simply put here our user inside and that's all what we need for this widget and i think we can not hot reload it because we have too many errors right now so let's fix them i will commence this here out and now if i hot restarted this application you see that we have here already the users and we can also scroll through them and then you see here all the users which we have in our database and here on this website consolefirebase.google.com we have all the users which i have put in front of this video here inside and there we have all the names of the users and i make also a script for you that you can insert them automatically so you don't need to type everything on your own all right now we continue here with the second part to scroll between all the users which we have and therefore i commences here again out and we create this chat body widget and let's look at the example beforehand so we have here also an avatar and next to it we have the username and we also have here kind of a panel and this is rounded and that's also what we want to create right now so first of all we create this rounded feeling so i add here container and some padding and we add here decoration to actually make it around it we put here first of all the color white so the background is white of this widget and then we make it rounded on the top left corner and on the top right corner so these are here the corners which we are making rounded here and now inside of this widget we want to place all the chats so i create a new method and inside of it we go over all our users which we also have here going inside and now like last time we get here again the user from our users list and now we simply want to display here one of this list star so we have the circle avatar and the username next to it now we add here first of all a container and give it some height and then we add here the list tile where we actually want to put our circle avatar first of all inside and then the username and i get it every time here from the user property first of all the name and i also get here from the user the url avatar which is this image and we put it here into the network image to actually show this image and now if you hot restart we have already here this application we have a scrolling list with all our users and it is also here bouncing which is kind of cool i have also added here this bouncing scroll physics and if you see right now this ui it is almost finished from this perspective and now comes the second part of this tutorial where we actually want to build the chat application where we can chat with the user and the inside we create a new chat page and this is basically our individual chat page which you are seeing here and here we have at the top a header and i have already created it because this is not really complicated we have here some icons and some text so i have added here this column and we have here the profile header widget already and now comes the important part and this is basically here at the bottom we have the type message and then we also want to show here the messages at the top so we create here first of all this new message widget where we can type our message and here inside of this new message widget we want to put a text field and a button to send the message so what i'm doing here is to create first of all some container with a color and a padding and now we want to build the text input field so i create a row and if you see here the picture again then you see that we have here at the bottom first of all this text field and then the button which is rounded and here we have some icon inside and how we can create this we create basically a text field and then we set here controller inside to control this text field so i set it here at the top up this text editing controller and then we want to add here some properties so you can enable suggestions so that some words are suggested for you and auto correction is enabled and so on and then we want to start with the decoration of the text field and if you notice we have here a rounded text field at the bottom and inside we have type your message and this is what we want to build right now so we create here some input decoration and i put here some color which is grey and also this hint text which is type your message and we also want to set here this rounded border so what we are doing here is we set here this border radius rounded and now we also want to handle if we change here this text field so if we change and type something on the keyboard that we get here the value actually what was typed and this value we want to store at the top so we have here our message stored inside of this field and now if i hot reload you already see here this text field which we have created and it is rounded and has this hint text and now we want to display here the button afterwards so i create here first of all some space between the button and the text field and now we create here a container and then we put you some decoration inside for our button so we set it to a circle shape and a color of blue and then we put our icon inside and now if i hot reload you see here our send icon and if we tap on it nothing will happen right now we can already type here but nothing will do here anything so what we will do here is we will wrap this here around a gesture detector and inside of it we basically want to send the message to firebase and then we want to store the message inside of a collection called chats and here we put all our chats inside so we have here some messages which are here displayed and then we simply put here the message inside this user which wrote this message and also the date when he wrote this message and this code is what we want to write now so that he sends it to firebase into the collection of chats and messages and therefore we create here this send message method later but beforehand we want to check if the message is also not empty because if we have not typed anything then we don't want to send it actually to the firebase server and now comes the important part to send the message to firebase so first of all what we want to do is we want to unselect the current keyboard because if you for example have here the keyboard open you want to remove the focus of this input field that the keyboard goes away again and then we want to create here the connection to firebase so we upload here the message and we will here create this method later but beforehand we like to put here some data inside so we put here the user id of the user who is writing this message and also the message itself and after we have uploaded the message we want to clear the controller so this means that the message is cleared and then the text is here not displayed anymore and now we can actually implement this upload message method and now here inside of the firebase api class we create this upload message method and he inside the id user and the message goes inside and then we connect here to firebase so we get here the firebase collection and like i showed you before we want to store it in the chats and then in the messages collection and then we create here this message object and the inside we set all the data which we want to send to firebase and basically the most important thing is to actually put here the message itself inside and then we also put here this date inside when this message was created and some other information of our current user so we add here for example our current username and our current url and this is actually currently hard coded but in later tutorials we will change this and now that we have here this message object which we want to send to firebase we simply call here our ref messages so this is the connection to firebase and then you have here the method at where you can add your data and then you need to transfer your data from this object to a json format so this is the raw format which firebase accepts and this is basically the inside of our message class so i have created here a class with all the fields which we send to firebase and then you have here at the bottom these two methods and the second one is really important because this is what we want to send to firebase so we actually send a map with different kind of datas to firebase and yeah that's it for the main part so we put here our message to the firebase collection messages and now comes the second part to actually also inform the second user that he gets the message and therefore we call here our collection users from firebase where all our users are stored and then we put here the id of the user insights to which we send the message and he inside we update his collection so that he get notified that it is the new message for him available so we said here that the last message time is to right now and then the user knows okay right now he got a new message and that's it what we need for this method and we can try it basically out and before we can test this upload message api out i quickly want to go to our chat body widget which is this one here and here inside of our list style which is one of these individual fields we want to add here some navigator so basically every time we want to navigate to this chat page which we have created before where you chat with the user and this is what we want to import here and we also put the user inside and now i can simply press here on one of these fields so let's say i press on sarah field and now i can type here a message to this user and let's type for example hello world and then i click here on send and you see that the message is deleted and cleared from this input field and now we can look here at our firestore so after i've reloaded here this page you see that we have here the chats inside and he has created here this message and then you see here all the information and the most important information is here our hello world and here we have sort this message inside and now the next thing is to actually show also the messages itself so basically here inside we want to show all the messages of the different users and therefore i create here in our chat page where we already have the header and also this new message widget between we want to add actually the messages so i create an expander to get here the whole space for the messages and then we put your container inside and we give it some decoration and it's the same thing like before we have here panel and this is rounded here at the top and therefore we use here this decoration and put here again this border radius around it inside and now comes the important part to actually show the messages and therefore we create here this messages widget and here inside we want to handle that the messages are displayed and inside of this messages widget we first of all create a stream builder because we want to load all the messages from firebase and therefore we need to build here this connection up with firebase and here inside we get first of all this builder and there we get our whole messages from the snapshot data and this is basically our messages which we load later from firebase and the messages we need to display right now so i create here list view with all the messages and if we don't have any messages then we have here some message which is saying say hi so that they communicate with each other and now comes the part to actually build this messages widget so i first of all put here the item count inside which are all our messages and then we want to build each individual message inside so we create here a message widget and he inside it's the most important thing what we put inside is the message itself and also we say here okay is it actually me or not because if we are on the right side then it's me and if it's on the left side the message then it's the other chat partner all right before we actually build this message widget to display this message itself like you can see also here in this example this is what we will build later beforehand i want to establish the connection to firebase so i call here the stream firebase api get messages and here we put our user insight and then we can go here to our firebase api again here inside we create this method get messages and now we call again here this firebase instance and then we go here to our collection chat messages and if you remember before we have put here our messages inside and now we want to actually get the messages so we ask you the same messages collection to actually get the messages and then we want to actually get here an order so we want to get the new messages first and then we simply transform here again our messages so that we transform the raw data which firebase stores to our message object and therefore we use again this utils method to actually do the transformation and now if we go here again to our messages widget which displays all the messages this is now here going inside and gets us all the messages which we now need to display so we create here this message widget to actually display now this message and here inside of this message widget we create now actually this design so basically for the other user we have always an avatar sharing and then his message and for us we only show the message so we don't need to show also the avatar and therefore i have created here a row where i want to display the avatar and the message next to each other so first of all we create here this avatar so basically if it's not me then we create this avatar of the other user and there we put the url avatar of this user inside and now comes the second part which is actually to show the message and there we put here some container and padding inside and now we add here this decoration of our message and if you notice is that we have here all rounded except that here on the left corner and for my messages which are displayed here on the right side it is also displayed here rounded but in this case we have it here on the right side that we have no corner and now we add here then this border radius inside and here we define so if it's me so if the message is displayed on the right side then we want to show it all rounded except the bottom right corner this should not be rounded and if we have here the other side on the left side that the message is there showing then we have it all rounded also but not at the bottom left corner anymore and now comes the important part to actually show the message so this is only the decoration and we built this message here in a new method and inside of it we first of all want to align the message to the left or to the right side depending on if it's me or if it's the other user and therefore we create here column and then you can set here the cross axis alignment and then you define if the message should be shown here on the left side or on the right side and then we simply put here the message inside which should be displayed we give it some style color and so on and we also align it here to the left side or to the right side again and then actually the messages are displayed and now if we actually restart this application and go to a specific chat for example here to sarah field you see also the message which we have already created and you also can add here new messages so you can add here some other message and it will also be displayed here on the right side and you also can obviously chat here with other shed partners so you have always here the possibility to take here another chat partner and write him also a message and if you want to change actually your person you can also do it right now we have it hard coded so inside of the data you can change the id of you and instead of for example this user we take from firebase another user so basically i go here into the user's collection and i choose here one of the users i like to take so let's take for example this one and then you need to copy the id the name and also the uil avatar right now and then you can restart the application and now we are here this user and yeah then you can actually type your new messages with different people and as a hint invoice ninja has built an app with flutter for managing invoices and this flutter app is open source and you can check it out this app and also the source code on github hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music]

Channel: HeyFlutter․com

Views: 101,227

Keywords: webdev, app development, lesson, tutorial, firebase, flutter, flutter firebase tutorial, flutter chat app, chat app, firebase chat app

Id: wHIcJDQbBFs

Length: 24min 15sec (1455 seconds)

Published: Thu Oct 29 2020