Build Flutter Chat App with Firebase Auth & Firestore Part 1/4 | Flutter Tutorial For Beginners

in this video, you're going to learn how to build this fully functioning chat app with flutter and we're starting right now before we continue first let me show you the demo the app how the app will work so that you can understand what you can expect till the end of the video so now first let let us register so this is the registration screen this is the sign-in screen sign in and sign up screen first we will choose our username by which we can search for the user we can send a message to so let me create an account by my name sanskar tiwari this is the username now let us select email ID so that we just go with remove it and start evaluate that using it now one thing which is taking care of that if the user is not including correct format of the email then there will be an obviously I am all passwords so it will be shown so like that password once we do that we will be able to sign up let me do the same as what is going to be just a random password and this is the scheme that she will be able to see now we can search for the other users of an example we can search for some user and if I search I will be able to see the user so this is the same account which we created right now so everybody iterates you got home I can click on message and you can see this is updated as a real-time because the chat room is created now I can send a message a and if this user everybody opens this up he will be able to see that message they can say hey sirs how are you and now he can reply I am okay and yeah this is what we will have some other features also at the end of the video I will be telling you how you can learn more as well you make it more so let's begin and without further ado so first I am going to click on file new and new flutter project for this particular project name let me name chat_app tutorial just making sure already you can keep the description how it is and click on next this company domain is not mandatory it can be example.com initially you can change it if you want or else leave it and click on finish now it will take some time to build this up let me in the meantime let me close this do let's just work with one so also let me know your preference in which one you are building are you using iPhone or are you using Android so that I can work them accordingly for the later videos for this one I am preferring to go for Android just to make sure most of the people are comfortable continuing watching it so so now let me expand it a little bit hopefully the next font sizes I'm pretty good now let me get rid of the comment comments first and then I'm going to remove this event last time one person asked a very important question like what is this visual density so you don't have to worry about it actually recently I have abated my retina so that's why I have this Mac OS option as well and after that only we have this so you don't have to worry about this one okay moving on what we have to do is let me go through and show you what are the reference means which we have so in this particular app we will be having a sign in this new sign of the screen homes page where we are going to see all the chat rooms so you can call this a child system and we are going to have this particular screen where we are actually chatting so we can call the back one jack Loosli and this is WeChat screen so let's go ahead and build all these things so we are going to create a new package which is going to be actually a folder and in that particular folder I am going to just name it views okay in that views I am going to create multiple data files which are going to be the actual screens what we are going to build so the first one which we want is sign-in then we will be also creating sign up stream so if we call sign up dot then we will also be creating our forget password so forget password then we also need so what should we call this one let's call it a truce chat rooms screen and click on ok so this is chatroom stream sorry for the naming convention if it's yeah then we will go and create another bat file for the conversation stream so okay so once we have all of these created the first task is going to be what should be first visible so right now I'm just going to show the sign-in because that's the screen which we are going to create but since we have raided the file for example this one but we have not imported or keyed in the stateless widget so first we will import but it will not that and then I'm going to say stick full because this is going to be a stateful widget I'm going to say sign in just to make sure you are clear about the state form and state stateless widget basically if we have some kind of content which is going to be updated in our screen then we will use a stateful widget if we don't then we will use this state less widget okay so in this one we will have something that's why haven't using stateful poacher okay so now what do we want in this particular string so let me go ahead and go sign out so that we can see this property so this is the sign-in screen we basically have two text wheel and then we have a small word password we have sign in we have sign in the Google which we will also integrate if you still watching till the end I'll try to do the system then we have this register in our streams these are the two screens which we will be working on so let's go ahead and break these so first initially what I would like to do I would like to go ahead and screen capture these so I have this this one I can minimize like an open of this strange shop and so we are just going to keep this sure to watch until that time let me run their app which we have right now so I'm going to just sign in okay and let me just give you this little bit down and have it looks perfect and so it is showing some air and that was reason was basically we haven't imported the signing we have nothing in the boom that's fine okay so the habits of Italy running but you can see that because we have initially using this container that's why it is fully black first let's get rid of this debug banner for that you just have to go over here and just do this you can type people show checker check mode banner you just have to make that false once you will do that just save and it will be reflected at so now just go ahead and rather than using a continue we will be using scaffold so what is the scaffold scaffold is used to build all of these different material widget is specifically talking about this app bar we will have a floating action button which we will use later on and things like that so that is all kind of out of the box if we use a stair hold then going to be creating that from scratch so let's go ahead and first build we have got now since what you will notice this app bar is going to be seen in most of the screens I am going to build this in another file so that we can utilize and use that I mean in again in the face screen so what we are going to do we are going to create a package which is going to be called widgets inside that I am going to create a new widget let me call that Richard art this is going to be a simple file which is in which one we will import but it is not arts list and in this one we are going to have that app bar so how that app bar is going to evolve we are going to basically create a function which will return our widget now this widget is going to be app this is the name of the function kind of what I'm providing ma and and we don't need any arguments we will actually require build context so we will accept that and then we will say return app okay now we can provide all the different properties which you wanted so let me use this app over here and to use that we have to import so I'm going to click on import he can just click on this and click on the purl Viking and you can import that like that ok once that is done now we want to provide different properties to it first of which is going to be title we don't want to provide these over here this one actually wants the context and now we are going to go ahead and provide the different properties first one is going to be the title so for the title it's a image actually it's not our text which I have provided rather it is an image so let's grab that image from my last project and we are going to use done so I'm going to actually grab all the images I am just going to click on reveal in finder it will be revealed in Explorer if you are using a Windows PC and you can just copy all these images now where will this particular images will be available for you I will link the github repository to link in the description so you just go ahead and download that when you will download that and extract it this is these are the files which you will get once you get this these files click on lip folder sorry click on asset folder click on images and just copy all of these images and click on copy 3 items now let's go to this one and create a folder in the main directory not inside anything you have to go and create directory and that's going to be called assets ok inside that asset we are going to create another directory which is going to be called images why am i commuting like images separately because you may have seen even myself like directly creating or adding the images in the assets folder because in this particular app we have a requirement where we want to add phones as well and that is something which we will do so let me add the images in the images and later on we will use the fonts as well Julie let's go to Red Rock camera file and over there we can specify that this is the directory of the asset images which we would like to use so the code is actually already written for you in the form of your comments so you just have to get rid of this hash and it will be for you now what do you want to do so you have to get rid of these hash select it all that's shift-tab and basically just make it over here so hopefully this should work let me go four packets vodka okay this should be packages don't get again okay so now this is this assets is defined correctly but we have to actually define it according to the section so we have assets folder inside that as a folder we have images and we want to use the images inside of that okay so we will say asset folder slash images and inside of that I want to use all the images because we have multiple options I can either say like this okay you can see logo dot PNG now according if I define like this I will be able to use this logo dot PNG but I will not be able to use search out right now if you want you can actually define all of these three images one by one like this but if you are creating a long bigger project there will be a lot more images than these so the better option is to get rid of this and just have it this slash so by this what we are representing is I will be utilized or use all the images available sorry I want to use all the images available inside this folder okay so once I will do that I will just click on package it's not yet and then it will show me this exit for 0 if you face any error make sure your asset is starting where you know head of this comment isn't starting so let's go back and utilize our title so as these are the images which we have available in the asset folder the way how to use this images is image dot acid because we have multiple options we have MH not network we have any short file we have image to memory you don't have to go to these but if you talk about file it's like selecting from the gallery selecting from the camera if we have from network you basically pass in the URL of image and we can show that image now since we are using an a certain age we will be using image dot acid now here we have to define the path of that so the path is as its / images / logo got PNG so let me have a look yeah exactly this is the one which we are going to use okay so now if I will see this you will be able to see it's pretty big we don't want that much so I'm going to provide it a height of Cody and I think that's exactly what I use or maybe I use different let's just check that out I think the 50 looks good so yeah we have now successfully added this title and it kind of looks like this we will be working on the colors we actually want to change the color of this scaffold because right now the color of the scaffold which is this one this is scaffold have a color of white but according to the theme of our app we want this color so let me just go ahead and grab the color code forest which is available over here and for that you just have to go to main door Todd Lincoln is the in the description for github repo you just can copy paste from it and I it's not actually very big so oh hey you have to just go inside the theater and say scaffold background color increase naturally it's this one 0 etc 1 F 1 F 1 F now if I can see this you will be able to see this is the exact color which way using actually we will be working on this top color as well which we can provide right now but we can work on that later on as well so that's not a big problem okay so now we have this apart what's next next days we want to create these text fields so how can we create that when this was the app bar now as I mentioned scaff scaffold consists of all the different material components so this is the app bar then we have this body section which will include all the things over here okay if we want we can have a floating action button if we want we can have a bottom bar and things of that nature so we actually want to have a body right now in the back body we have a multiple widget specifically text field and text and buttons arranged vertically okay arranged one above the other vertically so when we are arranging different widget vertically we use column so I will be wrapping up my column so I will first create a column it will say column will have children's I will be wrapping that column with a container so that I can control if I want to provide it any kind of padding margin or something like that for example what do I mean by padding because you can see there is a little space right so that it looks open or however it feels but basically a little bit of space from the side the side in that side and it's equal it's actually symmetrical spacing provided right for that we will be using a property called turning and in that we just have to say edge in sets and because we want to provide a symmetric padding which means that left and right will be same and if you want the top and bottom will be same so for that particular reason what we are going to actually do we will be using symmetry if you want to provide a single kind of from left only or from right only then you can use only if you want to provide from all the sides from top bottom left right that you can use all Elspeth so I'm going to go ahead and use the symmetry so now in the symmetric let me provide a horizontal padding which is going to be 24 now let's go ahead and use these text field and let's see how it looks like so first I will say text see inside that I will say because even just by like mentioning like this you will be able to see at x2 which is pretty interesting the next step is going to be having this you know in the text so how can we have that so for that it's pretty interesting easy actually you just have to say in our declaration input a creation and provide behind text now this in text is going to be email for this one and now I can just copy it paste it and call it a password ok that little bit first thing first I think it's not perfectly visible to you guys obviously we have to change the color of this to make it like this white so we have to provide the styling to a text as well as the text which is written okay so let's go ahead and so to provide the particular styling we are looking for which is basically this white allure of text white color of waterline we will be providing it directly and then we will integrate it so that we can easily use it in other scheme what do I mean by that we will see so to provide the particular styling which we are looking for which is this white intertext why it will be the next how we write something for example writing the email and also white important border for that we have to just go inside this decoration and then we will say in this type this is basically the style of the Hindu text which we have this is going to be next style and in that close let's provide the color so we can provide color start white but here's a hint text is never the same kind of opacity like actual text which we are writing right so to make that sure make sure that we are going to use 54 which is a shade or opacity of other colors which is what we are going to use if I will say this get rid of this so now you can see this is why so the next step is actually doing the same for this one which we will first let's work on this so we have made that white the second thing is we want to make this focused border which is this one which is right now blue to white color so what I'm going to say and who is it focused just a second so we have provided that we don't have to do that inside the inside we have to actually save focused border okay and then we will say underlined in put water inside that we will say water side and we will say side so what this will do this will basically make this water white now you can see it's it's white in color okay what is next next I also want that when it's not in focus right now it's not in focus basically it's not selected or we are not writing on that in that case also it should be white so how we can do that then this was the focus part at there is a enabled border which means when the exterior is enabled that we can actually write something in that so I'm going to get out of this first enabled water seems like being underwater we will save water side we will save water side and then okay now if I will see this you can see it's it looks better now it's much more easy to see or however you want to call it okay so what is the next step so this is actually the whole kind of input decoration which we want to provide but one thing which I can notice is I will be providing the scene for decoration to this password field as well and when I will be creating the signup screen there will be actually three text field right now username email and password which will all have the same input aggregation so rather than using it over here what we can do rather than or basically rather than writing it down again and again five times what we can do we can go in our visit which we created before and we can create a function like we did before we what that function is actually going to return our input declaration this one is actually going to be called let's call it text field input input declaration okay then we are going to also accept the Hindi URL because we know that the input declaration we the Hindu our hint text so if that hint text will be different for everyone for example for this when it is email for this one it will be password and for the signup scheme in the first one we usually write so Hindi except are different for everyone so that's time here we will have an argument in this one which is going to be in text okay exactly yeah then what we want basically we will be returning the same which we copied from this one i exactly copied this all and i pasted that now it will show you and i don't let me get rid of that and we just easily have to get rid of okay so now we have it here and we will be using hint x-ray the email itself so now what I can do I can go ahead over here to get rid of all of all of this and type what is it email and there will be no different so this is the lazy necessary we don't have to type this thing again and again and this lazy kind of leaving this is actually called modulation in programming so yeah this is good it's better to understand it's better to see the code so now like I don't have to write it again I can just say fast one and you can see that whole code has been converted to one line code and okay so one which we have not implemented is the styling for the text which we will be writing right so let's let's create a widget for that or let me first provide it over here back then I will show you how to create a separate for it so that we can use a territory so what do we want to provide it in styling into the text which is directly directly returned over there the we will use style and to provide style what we do we use extra style now inside this extra style we want to actually provide no color so I'm going to make that color okay so if I will see this you can provide so that's exactly what we want so what I can do is I can get rid of this this is three lines of code because this is going to be written again and again you don't have to this is just what I prefer so I move this gate at exercise and I'm going to make it simple next time and we don't have to accept any arguments this is same for everyone so I say return we don't have to say style like this semicolon so now what I can do like in this copy this simple text field list style and I can provide it here and we just have to actually do one thing like this okay so now you can see we basically provided this one simple line of code and it's going to be working same as it is so I can okay so you can see this working perfectly fine which is good okay what is next now we want a little bit of a vertical spacing right you can see there is a little bit of space and then we want to show this fixed which is actually aligned at the right hand side okay then we have these buttons so let's go ahead and work on this so just below this text field and create a vertical space between it a vertical space we will be using sliced box and to create a vertical space we use height in size box let's just move it over it should work fine now sorry okay now the next thing which we want is basically the scoreboard password there are multiple ways to do this you can you do this by using row maybe but let's let's try to use container for instance so if I use container I think I can see the child is actually for good password and if I will save this you can see it's available over here also I think I can just go ahead and provide simple text text field styling to this one is good I haven't provided the fonts weights to this so I can provide it for size is there any error okay now it looks a little bit bigger and better okay so now it is actually in the center we don't want that to be right one thing which I can do I can directly provided an alignment but the problem is I don't want this text to be hard to click because right now what will happen is when you provide a property to this because we want that when the user will click on this forgot password then he should be redirected to a screen where he can in put his email and the reset is possible right but since it will it's like if we made the text only like kind of separated or clickable X then it becomes a little bit hard for the user to click on it so we actually need a container so that we can provide some padding to it you know just to have a little just a space where the click and could be walking so I can provide it a cynical adding which is going to be horizontal something like 16 I think hopefully that is fine and vertical of around 8 so not very much but enough good enough now I can wrap this particular one inside a container so let's see we have that we don't so I'm just going to cut this all I'm going to say inert and then I'm going to say child and then we can use container now for this container I can provide the alignment and I can see a like mint dot what is it is right and so we can provide a set right and we can save this now so now what we have to do we have already successfully implemented this forward password the next step is to create these buttons for sign in and sign in with say let's let's go ahead and do this so let me just create a container okay so convenient we actually need a little bit of a vertical space so how do we use vertical space we use sense box and to provide a vertical space we use the higher than that okay so the next step is creating a container you may be wondering why am I not using directly arranged button because personally my preference is actually to go up 3 and clean a button which is actually flat this is kind of the UI thing if you want our button which is resist having a shadow you can even provide that to this one but if you want a kind of out-of-the-box then you can use a thing is the mechanism we will be using continue to create this kind of UI which is a flat button ok so now we are going to go inside the child I am going to make next to be sign-in and actually I'm a little bit not happy with the name of this one just for this because I'm using not just in the text view but other places as well we are we just want a simple styling so I'm just going to remove this field and distracted now this is the easiest way that once you will right click and click on refracted and then rename oh by this it will be renaming it every places so this is a good thing I'm not sure about the vs for but this is for yeah envious good actually you can as well a little bit of a different way but similarly like this okay so that I will save this we should have a sign-in option I'm going to just provide it a style of simple exercise this is coming very handy and I also I think this font size can be a little bit bigger for this one especially because since it's what I mean it should be let's go ahead and provide 17 for all of these so I think you should go with 16 for this I'm gonna actually do this I think we need to make this part a little bit testifies about compared to others so I'm just going to decrease that to 17 also I actually need as I mentioned this is a gradient color actually this is not a fixed ever provided to it this is a gradient which we used along with the border radius which you can notice so to do that we actually use decoration okay inside the equation you will use box decoration in that we will first provide the gradient part of it so we use the cleaning you just have to say grading and this is a kind of a linear what is the linear baby reading this basically linear arrangement of different colors one after the other so you can call them but that's this is actually the most used in major urban designs which I have seen they can be other but this is the most so this basically accepts colors as I mentioned this you just have to pass on the multiple colors and it will arrange them linearly so I have used to color coat so let me just copy them and now I'm going to place them forward so now we have actually pasted these others now if you see this so we have an error do now you can see this is what it looks like this is what we want it to look like also like I don't like this color is not making sure that we have the same you guys let me go ahead and grab the color for from this one so what we are actually going to do from the main itself we are going to just go ahead and change the primary primary color of our apps so the primary color will be changed to this one this is the color code which we are using so now if I will see this you can see it change like a fluid animation as that looks good so now let me just go ahead and now we have to work on the sign-in button so that it should look like this not like this so first thing you can notice is it should have some internal space right so that is called padding so I'm going to say padding edge inserts we don't have to work off the padding from the left and right hand side since we want this to take the whole space as much as it can according to the app you body which we have so we just want to work on the vertical padding so I'm going to provide that to be 16 and hopefully that should be included enough also as I mentioned we want to provide a bit to be equal to the width of the display I'm just going to say media we need out of context dot size dot weight and now I'm going to go ahead and save this looks good I think the vertical spacing little bit more but we will leave that first let's go ahead and make this in center so to make this in center we will use the alignment property and I'm going to say that's just how it wants to write it correctly now if I will see this it should be over here and so what is the next step well the next step is actually we want to make it the border radius like this so how can we do that well you just have to go ahead and just after this grading option you have to use the quadratus and over there you will say border radius dot circular and meet that round and now we can say that so once you will do that you will see we have this sign-in option and the border radius is pretty clear itself so what is next what do you want well we want to sign we will button well good for you good for us we have already keep something like that so we will just go ahead and copy paste and I'm going to pop it in a size four so that I can provide a little bit of spacing between them and that is going to be around 60 okay now I can go ahead and see this we have to get us we don't want that we just want one so I'm going to say sign in with Google also we don't want this color the color is going to be like let's just go get black so now we if you want to change that later but we actually want to change this one to white color right so rather than using this grading I'm going to say color because it's is going to be white and I'm going to say that so what is next well the next step is to have this we don't have an account to register now now for this particular specific requirement many people may say that we can use a rich rich text right that is a good option for this but the problem is if we use a rich text we will not be able to provide in the mutual clickable property so what I want is the you should be redirected to the register string only if he takes on the register now button okay so for that what I basically can do I will create a row which is a way to arrange different widget horizontally and then I will have to extend it okay so let me show you what I mean by that first let's have see vertical spacing just after this button so I would face to this size box here and then I'm going to say row and row is going to have children and then children we are going to have next row sticks so the next step is actually to provide be styling it takes to style sure if we can go with a simple style one this is me using this multiple times for example this a little bit larger if it takes this time I'm just going to grab this style as well and just obvious and means that there and also paste that one here so this one is not going to be simple this one is going to be big medium medium takes time you can name whatever this this actually you know this is kind of actually really helps for modernization or whatever because if you want to change this time usually change for each and every one point we can just change for a piece and it will be reflected each and every piece so that is really helpful washing his face just to make a get a little bit of space before that and then register now okay now it makes it distill now so if I do that you will have it now meet them in the center we have a special property in grow which is called mean X's and it is special but basically mimics is alignment across axis alignment are available for both column and row the mean X is alignment for a column is actually vertical axis the mean X is a line alignment for not alignment mean axis for row is horizontal so manage the climate in the main axis for row we will use minutes easily you say mean excess element and we want the elements on the widgets in the center so I'll use mean axis alignment dot Center and if I will see it now you can see is reflected over here pretty comfortable or whatever however you wanna call well now is the important part we want to provide that kind of whatever so this is a little bit different than what we have so I'm just going to copy that so that is type can be provided by using decoration we can say decoration and then we can say next decoration okay and then we can say under so if we use this if I will see this you can see that today to have that underlined thing there okay so now this screen looks good the only thing which is left is we want this to be aligned in the bottom not at the top okay so how can we do that we are basically going to grab this column also we actually are going to wrap it in a single child scroll you but let's let's first arrange this okay so in the corner so we have this container let's wrap this container in another container mix but it's not and it is finally now we can provide the align so I'm going to say I like and this should have not okay so the problem is this column is taking the whole vertical space we don't want that so I need to make them mean exercise is mean exercise drop many moves which means yeah so this is now perfect but we have one requirement we don't want this to be really like too much in the bottom so I'm just going to provide it a little bit of a vertical spacing in the bottom section and that's going to be around 50 over the height so if I will see that you can see we have an over here so what is going to be next step then we have this structured property but we are going to face one problem which is this bottom overflow would you go get rid of this problem you just have to go to the body side and wrap it with a widget which is going to be called a single child scrolling it's not going to be called it is going sorry for that and now we can save this and okay why are you the top click on that please okay so one thing that you can do we can go ahead into this we can test yes this is what I have done is basically I provided the hi to the main container because when I wrapped it up in a single child school the space which was not taken I think that was just a trade-off kind of I'm not sure how it works but yeah basically this may have a predefined property of mean excess to be minimum so I just provided it behind the main container and inside that container we have an alignment of bottom center for this container which consists we call them and that column consists all of this okay now the creating signup is going to be really really small I am NOT not kind of consuming since we have already printed this sign in so I'm going to close all the others and I'm going to open the sign up first things first we will import material dot dot and then I'm going to create a new state budget which is going to be called now inside the scaffold it's very easy to use the app bar we can just be straight like this and we just have to import that okay so that's the benefit of it we don't have to write a lot of code for that next thing which we want to implement is we want to use this single child is probably basically all of it so I'm going to just copy that come to the screen say bodies and we stay over here now we have these different properties we don't want these actually to be the same honestly so right now actually we are not going to be directly using navigator to navigate if you don't know what I mean we'll discuss about it but right now since we are working on the signup screen I am just going to call this item category from here so that we can work on it later on we will improve the navigation by basically calling a single kind of screen from here and then we will manage what we show the user according to if we log in if he is not wrong then also things like that okay so what is the status now so right now I'm showing the signup screen actually so inside the signup first let's change all of this sign in to sign up so that it should be visually Sanibel that we are actually the sign of scheme also we are going to use one more text we've done this way to copy that waste and I'm going to call this user me and let me save that so now we can see this is actually the sign of the screen and rather than having it don't have an account we will call it already already have an account have account sign in now something like that if I will say this okay so what is the next step well we have implemented the UI to sign in and sign up screen now the second step is actually to make it like it's the the front-end is done now the backend part is there so what is the back end that end by that I mean when people when the user will write something over here we should be able to get that text also we will be able we should be able to do something with that right so first before doing that let's connect our app with fire beast so that we can also work on the backend and how to indicate the sign in/sign up it fire beast for that we just have to open up the fire base this is my last project let's let me go to the main console and create another project and let me call that flutter oh let's call it a chat app tutorial and now I am going to click on continue I'm not going to use Google Analytics you can use it I'm just getting rid of it this is to make sure white you can see reading your project it will take a second or so in the meantime let me go ahead and show you how we can get that X which is available to get the text from these we will be using something called text editing controller let me show you how it works so we can say text editing controller and I am going to create we actually the sign-in actually let's let me first do this for signup since that is what we what is open so I'm going to say text between controller the first text editing controller will be created for using so I can say username text editing control is equal to new extracting controller okay similarly I'm going to say text editing controller and this time it's going to be for email email text editing controller so let me actually do one thing okay fixed and I'm moving upon this email then I'm going to are you oops concept okay so now we are going to make this possible okay so we have a user name we have email and we also have password so how can we use this we will basically go over here we will see user will say control and you see controller we will see controller and so was it it what is it happening right now well what we need to be basically create this list text editing controller and we assign them to these individual text me now what this text editing controller provides us is you can just say username extreme controller dot text and it will provide you the text which is written by the user okay so if it's not you don't have to worry about it so our project is ready let's just click on continue so now what we will do we will connect it to Android so for Android connection you just have to visit the project then androids folder inside Android go to the app go to build dock cradle inside that you are going to use where are you this one application ID in this before conflict of this Android which is this inside this app built out Gradle we also have a built out Gradle outside of this so if I will close this app we have this not inside this one you have to go inside this build out Gradle which is inside the app and then copy this application ID copy that paste it here click on register once you will do that you just have to download this Google services J so let me know that to chat up like I think it's perfect okay now I can show it in Explorer and I'm going to add this to my app so how can we do that I am going to just copy that first copy and paste and yeah what is next so I can click on next now it is asking us to add this so whenever you will be creating a flagger project this will be added already and this will be intense and let me show you what I do so this is something which we have to do in the this video tutorial file so you just have to go inside this filter plate will fine you will see we have this very descript you know this build script depositories and inside that we have this Google already you know I haven't done anything I have done everything in canvas you can see so then we have this all projects and we have this Google s then so we already have that what we have to use is this dependencies so how can we add this we will be adding that over here so yeah it's done next step is to do this inside app level build out Gradle by app level this one is called app level this one is called project level so inside the app level build on schedule it is asking us to add a dependency do you want it's a right now it's not remain it we just have to add this plug-in so what we can do we can just go ahead and apply this plugin so I can paste that over here and suppose us don't worry about this error the problem it is having is this Android studio right now it's kind of making the filter app so it's not able to understand that particular code but when you will open it like this clicking on right click and then go into flutter and open it Android module in Android studio in that case it will be able to understand that so don't worry about the error now it's actually connected you believe it or not but it is now we can just continue to the console you're ready to start building with firebase form of the five is tied where you will find the radius and stuff like that and just click on continue to console ok so we have that connected the great one let me show you how to connect the highways for myself for iOS you have to click on this i OS folder and right you don't have to actually open it oopss what I did go to the flutter and it on open iOS module in Xcode ok what is this happening I don't wanna breathing ok let's see what we did wrong open iris mod in an Xcode building for iOS ok this actually takes a little bit of time I don't know why it is doing that for now because usually no it will be directly open so if it's not opening like that let me do it like this we can actually cancel this process if you want I don't think we can understand it closes okay so you can actually go ahead in inside your expo and let me open up my directory where I have this particular one so I have this chat app we opened it before right so this was my last project okay so to open this particular directory can just click right click and click on reveal in finder and click on open another project and you just have to click this is directly and drag and drop it's just for I am like this but basically you have to visit the same directly which you are over here it will take a second or so and it will open that in the Xcode I'm not sure about this why it is building but it will not happen it have not happened before this video at least okay so you just have to click on the sadhana which is the mean one and then copy this build identifier after copying that you have to paste it here then click on this register app once you will click on that it will provide you this Google service info dot big list you just have to download that let me know that first and you have to open up the folder in which it is downloaded so I'm going to click on this show in finder which will be showing Explorer Explorer if you are using one thing which is very important and is something which most of the windows users are not happy about is that export is not available for Windows so you will not be able to do this if you are using Windows computer so once you will tell booth and select just closes also you don't have to actually because all the things which we will be doing doesn't require that basically this is something you can do at the end is once you are done so yeah that's only what we have to do you can just escape these step which is if you are doing this for the first time then you have to copy this and open up the CMD or okay and then please to this command and paste this command is it but if you have built any like iOS app before or run their that then you you don't need to do any of these just click on next in this click on continue console so we have successfully connected both of these app let me close this Xcode and also close this folder we have a lot of things going on and for now let's go to authentication inside the authentication we are going to setup sign-in method and over there we will enable this email / pars password and yeah that is perfectly done so now let me minimize that okay so what is next well actually now what we want to do we have successfully completed the front-end of the sign in and sign up but now is the time for the backend of Snyder in seinem so let me close these so the backend what I will do I will just go inside a folder create another directory or package depending on if you using vs code our Android studio respectively I am going to create a directory or package which is going to be called services now this will have first one which is the authentication so I have spotted coat rod god okay and this one is going to create a class which is going to be called both methods this is your preference whatever even upon it inside of this what you are going to do is we are going to give some functions okay so every function created inside the ultimate third will have firebase both used right so that is actually a package which will we will require for this so for that you just have to type Oh God dev and over there you have to search for firebase Oh then five is owed actually it's pretty easy yeah you can directly type it out as well but I am just going to be using the latest version so now you can paste it over here make sure I'm just pasting it below whoo protein y can see if you want you can paste it over here as well just make sure it's at the same start like for example over here okay make sure it's starting at the same place and then just click on package is scared so it will show our exit code which should be exit code 0 once that is done close the pub Specter dll file and now we will create some available or basically final firebase oh let's call it because this is actually going to be class you can call it but this have all the functions which we need right the function is like for example make sure you fire this is equals to firebase instance ok so basically the reason for doing this over here 5 is over defining this over here is whenever we will use this particular class we will be defining this predefined li because it will be used in every other function which you could create so you understand better how we are using this why I created this before let's go ahead and create the different functions we will use so the first function which we will create is going to be future that's kind of a return type what like because as I have shown you before as well we have treated functions which have a written type of widget we have create for integration now the reason why this is the feature because when we request some data from that server or we are adding some some data on the server we are calling some particular query we are saying that you want to sign in the user you are approving the data of your it's giving the reader if that is not correct or not and things like that for that it will take some time that's why this is going to be the future so I'm going to say sign in with email so this is what the function is going to do we basically can provide the email and password as arguments so arguments should be provided like this we are going to make a string email and strength password and then we will have this defined so this is the function which is going to be called sign with email and parcel now inside of that we can use this both before using this actually because in some cases this is going to show err okay this may cause an error so we want to make sure we don't like kind of critic close or shut the app and like crash happens that's not a correct user experience not just go to user experience it causes a lot of problems being it low ranking some please the word and things like that because Google is actually able to track all the things so what we will do we will track act so if any kind of error happens we can just leave out that we can print it out and we can see that that this is kind of the error which is happening but the Apple not crash okay so that's kind of why we are using try-catch now I'm going to say the result because whenever we do the sign-in with email and password thingy firebase we get some result right and that result is actually both visible so this is actually predefined comes with this firebase would package so this is not something which you have already you have got this from families both package which we just imported okay so now what we will do we have both result and we will save result is it goes to abate and then now this is really interesting you don't have to do a lot of users can say sign in with email and password you have to provide the email and password which we have over here in and password okay so to use this away first thing first as I mentioned I believe this is clear by BA using oath result because that is what we are accepting from this then we use this firebase both which we define as an instance which we use the main one and we have defined the fire resource instance now from that here calling this function which is sign-in with email and password we are providing the email and password to it but the reason why I am using this evade is because I want the compiler or however you understand that because you even understand like this will be checking by line by line that's for the compiler works so basically what we want we want to wait until this is complete before we go to the next step what do I mean by that well let's say for example this is a simple string okay and we are getting a string from the server I call that function that function is actually returning the string but what is happening before we actually receive that we are actually calling the others line of code now that line of code can be printed at extreme right because initially that string is going to be null that's why when we printed it there will be nothing right but we will think about it okay so are we not able to get the data from the server no the problem is we are not waiting to leave we are able to get the data that's why we will use a weed over here so that we will wait we will not continue further until this particular process is done what we can make sure by this is we are showing the data which is coming from the server not the null value hopefully this is clear and also I just want to mention if you have any kind of doubt any time just make sure of feel free free to comment and below either I will be happy to help and where we have a lot of community people are watching they can answer it as well if you have particular specific question which are not able to find online I have an online community which you can join as well I will link the Facebook drop link in the description you can join that as well so let's continue so to use this evade what we have to use we will use a sink over here okay so now this is clear so once we have this both result what we get is firebase user this is also something which we get inside this packet itself which is firebase user so this consists of all the properties of firebase is basically we have this user info which consists of all these different things URL a profile picture we do not actually want all of these because we will be saving all of these in our cloud file so we don't want it them to be saved over there of things like that so what I am actually going to do I am going to get first is firebase which I am going to say result not user okay now the thing which I am going to do is I am actually going to get the user ID I don't want anything else I just want the user ID of the user which I can use actually right now using the username I can actually use the user and easily so that's a kind of an option for you but that's what I want so what I want is I have this firebase user I want to convert that to a user ID okay what do I mean by user ID actually have no but I'll show you what their user ID is okay so so that's what we want we just want one is the spectrum we do the whole fire regimes which consist of a lot of different properties so for that let's create a different function for it which can do it for us so I am going to return a user from this what is user we are going to create a model so just go ahead and create a folders or package depending on you are using vs code or Android studio just and I am going to call it model okay model what in the inside that model I am going to call that the user okay so this is going to be class it's going to be user and it's going to have a single string as I mentioned before user ID it's going to have a constructor as well so that's this this dot user ID and ending that with a semicolon this is done that's all what do you want so this is what we are we want to return by this function which we are creating okay so what should we name this function so why did I use this underscore then this score is used to make this private so this particular function while these other functions like sign-in with email and password we will create a sign of the team will password reset fast all of those functions will be created so that they can be used outside of this particular class of both odd methods as well but this particular function which I'm creating of user let me import that first which is going to convert the firebase user to user ID is going to be used only inside this particular class that's why I'm making that private yeah okay so now we can say user from firebase fire base user then I can say firebase user what did I do it I did here well basically I defined the argument i define the datatype of the argument what we will be receiving so we are actually receiving a firebase user here which is this data right so I defined that this is this and this is what you will be receiving okay now what do I want to do with it well I want to return okay I want to return first I don't want to do some like as he did before I am doing this try and catch so that I can make sure I'm not crashing the app the night is even already I don't want to be the same over here I don't want to convert a particular user if it is null for example in some cases I may be receiving our null dealer right so in that case I do want to crash the app so what I will do I will just have a condition I will say user if not equals to none so this is a condition and then I will say question okay this is the condition I said question bar now I can mention two things the first statement is going to be called and then after this this particular sign the other statement will be called if this is false so if it is true this like let me just write it down so that you can see so if this condition so how this works is we have a condition okay then we have question mark and then we have if the condition is true then the first statement is going to be called and if that condition is false then this state is going to be called so hopefully that is clear now so what do we want to do if this user not equal to null is true then we will use that user constructor which we created so we can say UID user ID and that's going to be user which we get this firebase user dot EU ID that's all that's what we are going to return now let's say if it is now then use this return now this also gives us an option that when we are kind of calling this particular function we are receiving a null value you can understand that we are not accepting receiving anything okay so now let's do that so what we will do we will return okay we will return user from firebase user and we will call that firebase user if everything is clear till now just comment let's just go with it let's say okay so this function is created for sign-in with email and password now let's will be little bit with other function because they are going to be Center I'm going to say sign sing sign sign sign up with me email and password trials a string and that string is going to be email and then another string is going to be password similarly to the above one we are going to make this racing because we are going to use a key update option and we are going to do the same we are going to do that try-catch because we want to make sure we provide the best user experience and so I am going to print this error e tomu string we make the string as well not not a particular very mandatory but yeah then we will say auth result result is equals to a weight and we can say o dot sign up okay so sign up is not how the function is created in this particular package the function is actually called create user with email and password so now we can provide that email you can provide that password what is the next step similar to the last one you will say five we specify this user is supposed to result dot user don't think a little bit fast I have done that same thing before that I am little bit doing this particular function company to be a little bit first response so written now I can say user from firebase and I can say five receiver now we have sign up and sign in created now the next step is feeding that we set password options I'm going to say future I am going to say these pass I am going to make it string I am going to make it email because that's what I want to do in the reset pass physics the user will be providing us the email ID and then what I want to do with that email is I want to say that email a reset password link so that the user can reset the password off visit out okay so how can we create that so let me first have that these and then I am going to create the function for e so creating the function of reset pass is compare to be pretty easy to like just one line of code obviously we will first do my catch so I'm going to cry catch we have to make sure we are accepting her error and I can print that error and I'm going to say e dot 2 string which G is actually the error which VDC and okay now let's do what we have to do so how will the first say return okay what do we want to return of the eight okay I want to read away use these oh wait which is hopefully till now and then what I will do I will say oh god send password reset email and over here we have to pass the email which we have then next we have which we can have a function H we can create which is what sign-in with Google so to sign in the Google what we can do should we do let's just do the sign in sign out for now and then you will implement and sign into little bit later so let me do sign out we sink and I'm gonna make it like catch catch error okay now what do you do we want to do over here we will say return return and then we will return oh wait we want to make sure we wait till it's done sign out so this thing is done what do we want to do now we will be using these function inside of this sign in power not actually sign in lets you sign up first since that is open already so now we have it as we have defined these extraditing controller we have even assigned them over to the controller of each and every text field we actually want one more option that option is the validating option what do I mean by resonating option then very they are very reading is basically the process in which we check if we there is some text for example if I provide some clickable options over here I want to first make sure that the user have provided some kind of username you just have provided an email ID user have provided a password if these are blank then it does not make sense for me to send a coin to my server because it may cause me a little bit more and it is makes sense as well so to do that very dated validation option we will be using our text form field so let's see how we can do that so to use this particular text form field we it's pretty easy to say text form field but to validate all of these different for available forms in one single kind of all you don't have to make kind of call them individually just call them once what we will do we will wrap them all in a different column column and we will have that column with our children's now the reason is you will wrap them in kana means because I want you to have that particular column in a widget which is going to be called fall now what we will be let me tell you what we are going to do so I will provide the key to this form by that key I will be able to validate all of the different text form field available inside this form is that clear okay so let's now let's go and create that key so for that I will say final form key which is equals to and that is over type form States and then it is done now this form key will be provided to this by like this so we will say key form key okay so now now what do we want we want to provide a all click property to the button this one specifically this gruba so this is the container okay so you provide a click property to any widget can be text in the image it can be button it can be container it can be something any kind of digit you just have to grab that widget with a widget which is called gesture detector that gesturedetector have a home tab property which accepts a function so this is a function which I provided it right so this function and in that function what I am going to do I basically won't want to do some things the first thing is going to be checking the validation of all the different forms then I would like to show the user a loading option so I don't want the user to be thinking okay it's something happening it's something happening because this is something which you may have experienced yourself if you click a button hand it's not showing instant response you will click on that button okay okay so we can actually stop the button to be like kind of enable we can stop the clicking to be working but we have to at least provide a user a way to that so that we can understand when I click on the button it's loading so yeah it's doing something right so so for that what we will do we will show a loading option so let me go through one it's not once again first we will validate second we will show unloading option then third we will call that particular function to actually sign in or sign up before it this one we will sign up and then we will send the user to the chat rooms where he can see all the chat rooms available okay so now let's build that function for it so what I am i creating a function again over here then directly writing all the code over here because it becomes a little bit hard to handle if you have everything over here it will be much easier if I can just create a function and it can call that function over here so let me just write right now you can easily track it over here and now let me go here create a function so that function is basically going to be called sign me this is what I mean very fixed or so so what I will do I will say if form key which is the key to the form this one dot current state which is the state at that particular instant dot vendee it is going to validate now you may be thinking sister we have not actually defined any kind of validation for individual form feel like how is it going to work how is going to end it well that's true we haven't provided any kind of validation to them at least for now so we have to go ahead and provide that so how do we provide a validation we just say ready data and now this also accepts a function but that function it is going to provide us the value ever we have over here okay so for example if I call the very reader and I call the new over here this is actually providing me the thing which is available over here and it expects or return something in return so if I return a particular string from never so if I return a particular string over here it was always shooting this end so if I don't see this and if I sign here over here so if I can click on this you can see this shows this will never work so this is the how it works so we can provide a particular error which we want to show but you may be thinking since card we do only always provide this error if we want to provide this error only for example for the user we want to provide this error only if the username is empty or maybe or it is smaller than three characters depending on whatever you your parameters so I will say think so how can you do that then we have done it before as well hope you remember we use that condition thing before right true and false this one we will be doing this again how lady show so we will say this value okay the value which is this one dot is not anybody or let's let's go with empathy first okay is empty so that's the time when you want to show this error is empty or okay against this or what did you do you like kind of key to this lines when you saying yes so then we have a multiple condition okay then there are two options either we can have an end or we can have all what do I mean by this if we have two condition and if we use odd or means any number any one of if any of one of the condition is true then the whole condition will be true if any one of the condition like is true then whole condition will be true this is for or so and both the condition needs to be true for the whole condition to be true if any of the condition is false for N it will be false is that clear for this one we need odd because we want to make sure our if either it is empty or even if it is like want to click a character rabbit and but it is this then let's say three character which is my requirement of my requirement is I don't want the username to be less than three vending so I can say well not a length which will give me the length of the back string which we have written and I want that to be greater than 4 actually if it is less than 4 then I will show the air once I have written the condition I can say question mark and then I can provide that to value first and the false one little later on so this is what will happen if this is true so if this condition is true this is what will happen into this condition is false which means the user have provided our username which is actually the length of that is actually greater than 4 let's just let's just make it it depends on whatever your preference is for me and just am happy with it so yeah if you have provided a username which is greater than 2 then it should rather than is doing in this will never work let me show please provide user okay now similarly we will do this validation for others as well so I will say it's little bit complex so it's not just checking if the email is there because if it is empty or not because we can actually do that everyone but what is a better option is that we can check that if it is actually a email because the user can write 1 2 3 4 and he can try to login now what this will cause a problem is that when this request is sent to the server of ours which is 5 ways which we are using right now it will increase the number of queries we have ok so if you are using a pay plan it will increase the cost for the for your customer which is not a good option like being it over here it will not be able to good option from you and it's not something which we should do so what we can actually do because if we directly call even it that can be like that will be written as a kind of an errand which we can check and do things like that but what is a better option is first we will check this before even requesting any kind of sign-in option that's a cost-effective method and also a good so how can we do that when we check that we actually need to check a little bit kind of a different it's not a very simple thing to check if this is the email so for checking the email we use something called rag Rex regressive is basically kind of a whole big strain in which we provide and we say if the particular value which we have if it matches to that string then it is like even if it does not match then it is not a correct email so that regress is a long string you never need we'll need to learn it they don't worry about it let me just show you where it is yeah so we have this effect expression actually this is what it is called so this is the whole expression which we have and what we basically do is before this validation I can see a rec expression which is this expression dot has matched with this value then I will say question so if it is matching that means that it is a correct email so if it is a correct email do we want to show something no well say no but if it's not the correct email and say please provide row wide how bad it wide a valid username okay and then I'll use the semicolon yeah similarly let's go ahead and for the password possible suppose it's not going to be like this it's a little bit different condition for password do you want to make sure the password is theater then of six character this is actually the requirement of firebase itself so we cannot do something about it even if you want to so we will say value dot length greater than six if it is greater than six again this is condition true/false hopefully things this is clear and yeah so if it is greater than 6 then what do we want to do then if it is greater than 6 then I would like to show nothing none but if it's not then I would like to show please provide white password six this Eric okay so so what this is done it's why I would save this and try to sign up you can see everything is wrong so username is not theirs it says please please please please please so let me say and if I will sign it you can see this error is gone now if let's check email wrong so if I will enter it like this and sign up it is still showing me error if I say after it it will still show me error right if I will say Gmail it will still show me at a continuous we are using the exact option on the Gmail thing but we are using a correct way how their wheels are basically mail have this at the rate something got home right so that's or basically this rod phone can be see who as well for example sorry sign so you can see that error is not there okay now for the password if we provided less than 6 characters okay now the next thing for the password is we want to make sure the password is actually not visible it's kind of not visible kind of 0 0 NF dot dot dot that's how it is visible right you make it like that you just have to say obscure text and that make it true okay so it looks perfect now so if you click on sign up you can see that error is no Morgan okay so that's all for the validation now the next step what we want to do is we actually want to show the user the loading option will show the user that loading option we will create a boolean value which is going to be is loading we will make that true sorry initially it should be false and what we will do once we are going to call this function I am going to set the state that is loading equals to 2 now this is actually changing the name of the value of the variable how is it going to impact the UI so we are going to use the same thing condition true or false so how we are going to be user we are going to reuse it like this so I am going to say is loading I will go inside the body and if it is loading then if it is this one is true which is it is loading I don't want to show this single child scold you or the container which we have all this what do I want to show I want to show a container which have sorry child okay I haven't spend it correctly yeah which have a child of circular progress not progress indicator which is kind of a that indicator which like kind of circular circular it will also cause a one problems I will show you okay so now if I will click on sign up it shows me that now I don't want that to be the score that I want that to be in the center for that what you can do you can wrap your self in the progress indicator in a widget which is called the center so now you can see it's over here okay so once we are showing that to the user of usual input that yes we are doing something then what do we want to do when we want to get the text from these are different fields and you want to call that particular function this one so to call all of God you use any of these function we have to first call this Y and say let me eat instantiate it so I'm going to say o methods I'm gonna say quote and I'm going to use this now so I can basically call any function over it so I want to use a sign-up function and say sign up sign up that email and possible now I need to provide the email and password how can I provide the email and password to provide the email you have to say email text editing controller or text you provide the password controller you have to say password editing controller dot X once you will do that it is actually doing all of the work three so we don't have to worry a lot about it but we want to make sure we do something after once this is done so once this is done we want to actually check for the value which we receive free because we will receive some value after this and that will be the user ID so for now let's just print that user ID so that we can see what do we get okay so this is what mattered and let me open up the run clear it all and restart the app okay one thing which is important as well whenever you are using this port the result actually this whole package which we like kind of added once we add that we actually are we need to like restart the app again so I'm going to click on this closed here into that over here okay after closing the app will run the app again let me do one more quick thing so that we don't have to do it later you can just go visit whatever game and we use cloud Firestone so you can just search for fire it's going click on that click on installation copy the cloud file stored in go to project not resource manager project go to pub spit bloody hamon paste that here because after we use this one as well we need to restart the app also for the Android we face one problem which is of multidex for that you have to just copy paste to nine of core the first one is we will be enabling the multi text over here so let me go ahead and copy that from here this is you have to write multi necks enabled true over here and then what you have to do you have to copy this implementation again the code which I am using it will be available it will be available in the github repository link will be in the description and I don't want these of that I'm just gonna get I just want this particular implementation multidex I have done this multidex enable to do over here and I have done this over here okay so let me close that so now question maybe when do we need to do this multi next problem then it will actually show you this in the air but this is we are using the cloud file store one whenever you are using cloud files - it's recommended that you go ahead and use the multi neck's without even seeing the initially because we we do eventually so you can make sure this thing also even if you are following on iOS I don't think there will be any kind of error if you are facing any let me know because when I was grading this again because since I have it this before with a full project which is available there are lot of the instruction yeah so yeah so actually I have created a website which is called flutter and f connected which is actually a version of the same app but with a lot of different a lot lot of extra features which you can also check out I will link to that also in the description so you can check it out if you want it is just of a lot of lot more features and this will be like and and it is also open source so yeah you can get the source code of that is also so since it just take a little bit more time than expected I will wait for it so now it's perfectly done and now it's time to implement the

Channel: Sanskar Tiwari

Views: 229,975

Keywords: flutter chat app, flutter chat, chat app flutter, flutter chat ui, chat app flutter firebase, flutter chat app with firebase, flutter firebase, flutter full app, flutter firebase app, flutter chat app firestore, flutter chat application, flutter chat app tutorial, flutter chat firebase, build chat app flutter, flutter real time chat, flutter real time app, flutter realtime chat app, flutter firebase tutorial, flutter tutorial firebase, flutter full app tutorial

Id: FTju8w4zEno

Length: 88min 14sec (5294 seconds)

Published: Wed May 06 2020

Reddit Comments

[u/alorgajah]

Using firestore for chat app may cost lots of money. I hope the beginners keep this in mind. Cheers.