Transcripts
1. Introduction: If you know Alda basics of Flutter and Firebase, whether you have lunch on your own. So after that, the next step will be applying for your first job interview. And you have your resume ready there that a recruiter will ask you to show them some practical projects as red, because on debt basis only they will judge your skill set. So in this course, you will learn to build a basic chat application with Flutter and Firebase as that back-end. This course is for beginners who are new to real-world application projects. People who know that basics a flutter, but want to build something from scratch to practice whatever they have learned so far. I hope you will enjoy this course and get your dream job in your dream company.
2. Create a new Project: Hi, welcome to this course where we will build a basic chat application using Flutter and Firebase. Some before proceeding forward, I am assuming you have got earlier basic concepts cleared, such as dark, flatter and how to implement Firebase authentication and use Firestore database as well. Because in this module, we will only talk about that intermediate concepts because we will build a complete chat application. And for that, you must have your basics reading. Some without wasting any more time. I would like to start by creating a new project. So let's go to the folder. And here I would use the command line and just died Flutter. Create chat application like this. So this will create our new flatter project. So yes, this is our chat application. Now just bring up your VS Code and append your project here. Okay, it's done. So just remove this test file. Now, I will not just have learned in my emulator right now, I will first create my Firebase project. So go to firebase dot google.com and click on go to console. Then here simply click on Add project and gave it a name. I will name it flooded chat app. Okay. And then continue. I will not enable Google Analytics for now. And then click on Create New Project button. And then it will just take few seconds. See my new project is ready. Then click on Continue. Then. Here we are navigated to this Firebase dashboard. Here you can see the other options like what indication database storage hosting an owl. And very middle you can see get started by adding Firebase to your application. So we have to configure Firebase with our flutter application. And I will configure an Android version. So just click on the Android. Here. You will see the other options that is tech skills. First is Android package name that you can find. By going to Android folder, then app, then source. Or you can also go to within the Android ID is this building. And here you can go and see this default config and your application ID. This slide, this here. You can name it anything. I would name it chat app. Then, since we will be using Google sign-in authentication. So we have to use our debug signing certificate for it. To get your debug signing certificate, you have to get the SHA-1 key from your device. For that simply append new directory, that is system directory. Go to C folder. Very odd. And write files identities we did inside program files, you have to go to Android, then Android Studio and JRE, Dann bin. And here. You have to bring out their command line. Now. You just have to paste this line of code here. If you want, you can just pause the video and get the SHA-1 key. After you type it and press Enter. You will get your SHA-1 key from here. Just copy it. And then, and then paste it in this debug signing certificate section. And then click on Register. Again. This key is used for go well, sign-in phonons indication for this kind of purposes. Now, you will have to download that config file. This is important as it contains the APA keys and the critical information for Firebase to use. Just download it and then go to that folder weights being downloaded. Cut it from there. Now in your flutter project CO2 android folder, then inside the app folder, and here paste your cuckold services.js and filing. Then simply click on Next. Now we have to do some Firebase configurations in our Florida Project. Copy this class part line of code. And in your android folder, we have a build-up Gradle file inside it that just this here. Then inside the Android folder, and then inside the app folder we have another file where we have to pay this line of code. Let's go here. You can see here, paste it here, and then copy this, apply plugin and paste it at the very end. Also, one thing you have to do is right here, multi ydx dy, dx enabled to this code is required when we are dealing with Firebase. So this you have to remember, always. Then simply click on Next, and then we click on Continue to the console. We are navigated to the Firebase console. And here our Android app is ready to work. Now, before we run our application in the emulator, we have to do some configurations here. So just put two main dot, dot file and here make the main function as a sink. And then right, dendrite this line of code. First, rigid data binding and short initialized. So you have to write this line of code. It is taking some time for their binding that ensure initialize this and then simply iterate firebase dot. We have to first import Firebase as well. But as you can see, before importing Firebase, we have to write that dependencies spec dot YAML file. So for that, the cost to access any external package, our feature, we have to use dependencies. So first it was called, second was Firebase. And then since we really using Google sign-in via, we will use that leg in Israel. And last thing is cloud Firestore. So these are the required packages. Just copy this package, go to file and paste it here. Then similarly copy, paste it, then Google sign-in, copy and paste. And then finally, our Cloud Firestore. These dependencies required. And all these fibers plugins are collectively called Flutter fire. You can just search this term and you will find all these dependencies. Now go to main dot dot file. And let's write, let's initialize our Firebase. And here we have trade await. Firebase dot initialize that it on that configurations are done properly. Now, if you want, we can just, we can just run the application in the emulator and also make sure indication you enable Google sign-in. So set up Google sign-in. And here in that third, you have this disabled, just enable it. And I'd save. Now Google sign-in is being enabled. Similarly, you have to enable it via Google, Firestore as well. So here, just click on Create Database and then choose, choose a location and you do it in that testimony and alphabet, you will be sent to this cloud Firestore console Israel. So that's it for this video. Make sure you start debugging because since it will take some time, I would like to stop the video here so that it doesn't waste our time and we can continue in the next video. Thank you.
3. Building the Auth Screen: Hi. In this session, we will build up authentication screen. Because before going inside the homes clean are the chat screen definitely the user has to create an account. So far that Let's create a folder inside our nib and name it screens. And inside that, create the file called ARP, spleen dot-dot-dot, like this. So as usually board Material. And then let's create a state for login and naming scaffold. Since then Vardy, I would have looting. And then within that child, Let's have a column. So what I am simply planning to do is create that this first finger will be a logo. That then after there will be the app name and then a button called signing with Google. That said, so that is why I'm using them. Using this column within the coelom. Let's have a container. Container nets have a decoration box decoration. Inside it. I would like to view the image collision image. And now within this, the collision image when given network image widget. So you can just simply open your browser. You can chat, chat logo, suppose chat icon, like this. You can just, and then there will be lot of options. You can choose whichever you like. What I will be doing is just wait, let me check if I get what I want. So I will just using my own, which I have already used before. You can simply right-click and click the Copy immediate dress, and then paste it here. Make this simple as that. So it is the art screen. Let's go to the Main.jack. We move on that previous code. In the home. Make the odd screen is the initial screen like this. And then let's see. Is it showing images showing or some error? Is there? It's check it out. I guess. What I can do is suppose if I give expanded, then let's see what happens. See, because obviously you should give some height to this container. So I have given expanded means, take all the available space within this column. So that is the meaning lambda. After this expanded widget. And we'll have a text and flood the shed. And let's give some styling. Foreign size, 36, font-weight, font-weight, bold. Let's save it and see. Since I have used expanded, so it has just pushed to the very bottom and investigate on the space here. After this, we need to create a signing with Google button. Let's do it. Let's haven't alleviated. But then on viscerally default now on just for the UI. And within that child, let's create a role so that they can be imaged as well as text. Let's make the main exists. I mean that center and that children. First thing I need is imaged not network, and then get a Google logo. I would just copy my own this image, but you can just go to Chrome as usually search for image and copy its address and paste it here like this. And to this image, Let's give it a height. Height of 36. Third, this image in that row, we will have a size of 10 so that there is some spacing between their logo. That is the image and text is the text. And x will be signing with glucose. Let's give some styling, basic styling as always. Then. We will have a font size of doing D. And that said, let's save and check. What's the output. See, we have this logo and we have this button. First thing, I would give us some padding to this button. Let's go and then wrap it with Berlin and give adding not symmetric. And then horizontally. Then what decal, vivid two in d. Let's see. Nice-looking, at least decent. Then what I will do is to this button. Here, I will give some styling to that button. Style. But then style. Sorry, it should be just Merton stale like this. And then within it ever given background-color, my state put the dot, then the less black and then some padding. So more bedding can say. Let's check because padding needed to make sure that button is not. But let's not this narrow, so let's give it some padding as well. Met ADA state property on edge insets, not symmetric. And then only the vertical. Let's give 12. Let's check C. Now, this home screen, sorry, the odd screen is looking perfectly fine. And just again am expanded because of this expanded it has taken are less space till here. And then the other widgets, that means that text and button are pushed down. So yep, that's it for this authentication screen. In the next video, we will implement Google sign-in functionality.
4. Implement Google Sign in: Now the UI part is completed. It's time we work on Taco Bell signing functionality. So far that in the arts greens file, I will simply go at the top. And first thing, I would create a Google signing instance. So it will be cuckold signing is equal to sign in like this. And then after, I would create an instance affair Firebase by a store that is first to database as well. Because I would store the user's data in Firestore also. It is all the authentication data. So after this, let's create our future function name is Signing function. It will be a sinc. And this is the procedure that is, this code is fixed for the calcining. Await. Go calcining dot sign in. So this will pop up menu. You can choose your account. You might click Back button, and that current will be null. In this case, I have done this check so that if the user clicks on sign in with Google but doesn't choose any account and directly goes back, then the below code won't be executed. After this. Let's a 10 decayed. Google is equal to await, will use dot-dot-dot decayed like this. So let me get the access token that I need to control it. And then that's how our credential. And I go provider. Credentialing. Here. It accepts access token and it will link Google Art. Just make you smile. Will go access token and then the ID token in the cookie ID token. Then what we have to do. Now we have to use the Firebase art instance as well. So I will just simply write user credential. User can then share is equal to await. Firebase dot instance. I have created the instance here only, but signing with credential. And you have to pass the credential. So simple words, this code was required to get authentication or the credentials from the Google. And after that, we will use this line of code so that our own Firebase authentication can access this account and store the information. Now we have successfully signed in. But what I want to do is I want to create or save those data, the Firestore database as well. So you can simply write a weight fire store collection. I would create a collection called Users dot DOCX. Document ID can be user credentials dot dot UID. And it is showing this because it cannot be left Nelson using this exclamation and assuring that it won't be null. And then this set method. Let's do it. First thing I would store is that email, simply late user credentials, user e-mail. And as always, you have to use this. Then I would write name, user credential. The user. Dot display name. Then I would save that image. And immediate Canadians user credential dot user. For a URL. Then it will be UID. Uid will be user credential user UID. And the last date at what did this account was created? The date, time. But now we have our function ready. Let's try it out. But first, make sure we call this function in our on press button. So simply write on this sink and await Signing function like this. So this function has been called. Now let's check if it is working or not. We have our Firebase ready. Now if I click on it, it might ask me are it may it will directly yeah, It has asked me. So I will click on My Account. And obviously right now, we're not being navigated anywhere. But let's check if it has been saved or not. See, this has been saved. And in my Firestore database. Here also, the data has been saved properly. The e-mail image name UID, and now everything is working fine. Just one thing, one thing I have to make sure that suppose the user logs out and then he, if he clicks on signing with Google again, then this data will be toward updated again in that fires to the database, which simply means, suppose while using the chat application, the user change the image. In this, in our flood application, which is the image. But if it goes out and click on sign in with Google again, then again, this image will be changed to the default image of which Google account to be because we haven't done any check. So first thing I would do it check that documents snapshot will be datatype and write user exist, which implements if user exist in the database. I would have got collection users. But doc and document ID will be user credential dot user dot, UID dot get like this. And this UID should be make sure it's not null. Now, this will go to this file stored in here, check if the user has already registered or not previously. So after that, we can simply do an if, check. If the user exists, dot exists. If the user exists, then we can simply print for our debug that user already exists in the base. But if not that stuff first time for this user, then we can create a new entry in our Firestore. So this thing was very important. Now suppose if I click on the sign in with Google, again, see user already exists in the database. So at least the previous data is not being updated. Our pushed forcefully to the same document ID. Now, we have our Google sign-in working perfectly. But after the user signs in, we have to make sure that we navigate to the home screen and also cannot eat then back to our screen until we sign out manually. So we have to check the odd state of Firebase. But before then. Let's create a file inside screens directory and name it home screen. Dot, dot. Like this. Yeah, let's import our material package. Let's get this state free login. Name it home screen. And we'll remove the default constructor. Then we have this fall. Now in that AB bar. Let's simply have that done of text. Then center that through. Then background-color should pick colors start. Okay? And here I would have a button that is for the logout button. And just give it enough. I dot k. And after the AB bar, I would give a floating action button. In our home screen. Floating action button. Then in that child, I would write, I can, I can start search. So why I've done this, I will explain. Just let us create the CUI first. Now we have this UI. Let's go to the main dot dot. And just for testing, let's see how this UI looks. Now I restart. And let's check. See, This is the home screen of our message application. So I have this search tree, search button so that the user can search his friends in this application and message them from there directly. That is the only purpose, The purpose of this button. And in the body we will have on that chats that the user has been talking to. But it is, it will be on the later video because right now, at least he has to first start a conversation with someone. So that's it. I would make it the odd screen again. Now, just imagine I registered application, but really I have already signed in, but we are not navigating to the home screen because we are not checking the authentication state of the Firebase. So in the next video, we will do that exactly. That's all for this session. Thank you.
5. Check Authentication State: Hi. Now to check the authentications, State v have to use that current user method provided by Firebase. And accordingly, we will show that screen whether the user has signed in or not. And let's go to main.js file here. First thing, I would create the future function, which will give us a virgin. I would use signed in. Yet I will check the user has already signed in. Which we can do is by calling firebase dot instance dot currentUser, simple as that. Then I would check if user not equal to null. Then return home screen. If it is null, that is, EA is not signed in right now. Then done art screen, let's say. So this is the function required. Now let's implemented in the home property of our widget. Simply use future Winder. And here, the future will be user signed in. And that builder will usually give us context. And seeing snapshot. At this, it will return us a widget, as you know from the function. Now, we will simply check if snapshot has data. Return snapshot data. That simply means that they tend to have visited. And we have to make sure to give this exclamations so that it is not none. And we are leading noted one we did will be at least they're either home-schooling or doubt screen. So it cannot be null. And if it, if it is not, then I will just show a circular progress indicator. And then HF and Janice executing. Now let's save that and check if I'm directly navigated to the home screen. See, now, if I restart my app, I will be navigated the home screen until and unless I click on this, that means lava button, which is not working right now, but we should click on it and then only we should go back to the login screen. Now, since we have that user data coming from the fires, that is this data, obviously we will be using and sharing this data across the application. And it will be in JSON format. It's by 10. We create our own model class for those data. So let's create a new folder inside lib and name it user model dot, dot. Then study. It should be named models. And inside it, we should get a file called User model dot dot. Let's start creating our model class. I would name it, use a model. Now. It will have on now values of this class, that is this data. So let's start with string. String name, string, image, timestamp, which is from Firebase. We can date. Then string UUID. Let's create a constructor that's required. This required this.name required, this image required this. And then similarly this dot UID. So we have our model ready, but as you also know that get our functions to serialize and de-serialize our JSON data. And usually this call dot from JSON. And all these concept is the basic concept of later on the models. So I hope you know this concept from Berlin will just say UserModel dot from JSON I'm naming. It will accepted documents snapshot. Snapshot. So what is this documents ship snapshot. This data is calling document snapshot. Now I would just simply turn a user model. Now, let's start with the mean will be snapshot image. Then let's copy it. Set can really be name. And then name. Obviously you can. I didn't any order. I just like to have this ordering. Same way. It looks good. The date and then UID will be ID. So these are nothing but these key on the image and all these keys. Now let's make sure that we send this UserModel class while navigating to home screen so that these data can be used toward application. But first, let's convert Firebase user to our User model, Hutu main dot dot. Then here we have this user sign-in and that user data type which is coming from the Firebase. So within that if statement, I will simply write documents snapshot. Using data. To Firebase, Firestore dot instance dot collection users. Then simply with that document ID of uci.edu AD, I will get that data from the fires, that is this data. Earlier we had this data, which is the user data. From that, I'm fetching the Firestone and then simply converting it to our own model glass. And use models using model.fit some JSON and send that user data, which is a document snapshot. And within this home screen, I would like to send it when navigating. So in, inside the home screen, we should make sure we're accepting it like user module. Then user, and we just name it simply user. And then through that constructor, I am accepting it. So the error will be done. Now, when we sign in with Google, we have been navigate to home screen. And for that, I would use that my average and that is I won't directly send it to the home screen. I would just simply send it to my app so that it will again check and fetch data from the file Store and then create a model or else we have to do it. Again. What I mean by that is let's go to odd screen dot, dot. And we didn't have sign-up funding assign infants. And at the very end, I would just write Navigator, the push and remove until then here. Within that new route. If I write material page route Bender and contacts, and if I write if I write homeschooling, see if I add homeschooling, then I have to send the user, which is the user model. So lot of thing I have to do. But if I write simply myapp, like this, if I simply write my app. So it will normally go to this screen again. Then it will show a user indicator and it will get the data from the file store and converted and ultimately send it to home screen. So this is a much better approach. We don't have to write the code again and again. So let's check if I restart. Let's see. Obviously I cannot check does sign in because we have already logged in. So let's at least create and make use of this logout button. For that, simply go to the home screen. And here I would make us think, sorry, not this search to this icon button. Async await is ahd dot instance dot sign out. And then I would a navigator. But push and remove. Until now, I can simply write my app on our thou art screen because as as we know that it is not authenticated and he has to go and sign in again. And aspirin is not asking anything as a parameter. So it is, it doesn't make any difference. Let's see. Now if I click on it, see I've been signing, been navigated to the art screen. And now if I click on sign in with Google, let's see what happens. And then loading indicator will show and the medically I have been sent to the home screen. So this is how the state work. That means how I'm utilizing the odd state and make sure that user sign in automatically and then log out as well. So that's all for this video. In the next session, we would work on this search button so that the user should have the ability to search his friends in this chat application. Thank you.
6. Search User UI: Welcome. In this session, we will simply create a search screen for this button so that whenever a user clicks on it, he should navigate to a screen where he should be able to search for his friends. Let's simply play it a new screen. And I would mean we search screen dot dot. Let's import our material package. Make it a stateful region. And I search screen. And as I did with the home screen, by navigating to this screen also, we would require that model class that this UserModel user. And let's have it in that constructor. And then return a scaffold. That's haven't AB bar rated title of search your friend. And then in the body, what I'm planning is first region will be just a text. We'll any search button, whatever the user clicks on it. And after he clicks on the search button, then only the function should execute, which we will do it in that little video. But right now, only the US position, I would require a column. Then children, and as I said, I will be using text field. So we would declare the text editing them taller because search controller and it didn't control them like this. And within this, Let's start with the row, the first element I want the row because I want the Botha widgets, widgets in the same horizontal manner. So let's have that children. Then, a text field that controller would be searched controller and decoration. Let's give it input decoration. Text with the username. And border would be outlined in boot bordered border. And within it, Let's give it a border radius. Border radius, not circular. Give it 10. So let's check it out. But before that, we have to make sure we navigate on the button that is using the dysfunction and go to home screen. And here on the on-premise, just simply write navigator dot push. Then my page layout, context, previous screen. And we have to send the user and which is rigid, that is here. And let's save it. If I click on it. What I have is I did something wrong since it was row two, column of bleeding. So first thing, I would give him wrap this thing with a padding widget and give bedding or 15, and then wrap it up by adding widget. We then expanded. That means take all the space. Rapid. Within bonded not wrap. I will just write expanded your knife. I save because it daft their DevOps like what should be the size of this? And they have done something wrong in this column, shouldn't be there. And remove this widget. That means we have a problem inside it. We have a row inside it. Now we have this expanded and everything. Let's check it out. I guess because of that extra Columbia editor was there. Now if I click on it, see we have our text frame with this by adding another unexpanded so they are less space here. Now after this expanded widget within the row, I will give a icon button. And let us give the icon to be icons re.search. So that's it. Let's check it out. See, it is looking the sink. At least we know that we have to type here and then click on it. And after that, the results will be shown here and that we will do in the next video. So that's it. We have successfully built.
7. Implement Search Functionality: So in this session we will work on that search functionality. So we have that text field and a button really mad when we type a username, then the data should be shown in that body, that is from the Firestone. So before moving forward, let's go to the home screen. I just want to write one line of code. When we are sending out. We should write this as well. That is Google. Google sign-in, sign in, sign out. So we have to use both this line of code in order to sign out. Because if we don't use Google sign-in, sign-out, then we won't be able to login because different account all that time, only one account we will be able to use. But that's why we have to make sure we write this line of code. Excellent. Let's go to the search screen again and start working on it. I would create some variables, which will be a list containing maps. And I would name it search result. It will be empty at the very beginning. And a Boolean value of loading. Just to make sure when we are fetching data. We can show loading indicator in the UI. And this list stuff map is nothing but when we search for users and the data is coming, that is, this data is coming from the firestorm. It will be in JSON format, that is map format. And I will store Alda, all those map in this list. That is suppose Directory uses, then there will be three mapping it. And since it is a list, I will use a list view builder to output all the users in the body. Then let's work on the search function. We have to write on search like this. I would name it on search. Then start with our Firestore that this Firebase fires store plugin instance that collection. And here I would go to users and use a where clause so that I can filter and get the exact name that is whatever the username we want to search. We can get that day down. Lee will be stored in search controller and then I will just write dot get. So now after that, I will use it then clause. So that as soon as we get the documents that is here, list of documents. We will check if it is empty or not. That is, whatever the user has searched. Does it exist? So I can do it just using the length. And if it is less than 0, we can show a scaffold, not scaffold so that we can, so as snack bar shows snack bar and then a sniper. And we can write the content like no user found. That said. And also as I said, I am using this loading indicator. So here, as soon as we click on the search screen that is on search, I would write the middle loading indicator as true. And if it is null, that is, there is no data, then I will again make it false. And then return from here. That is, we don't need to execute double-quotes if there is no user available. But if we have a list of users, then we will use this value variable. Then the all the documents. And then I will loop through it. And it will give us details of a particular user. And simply, simply, I would write search result, that is that variable. Dot add and user data like this. Also. I don't want that the user could search himself. That is, suppose he has a name of John. And if we write John, I don't want that in the search result. He could see him cell because then he would be messaging itself only. So to make sure it is not there that the user who is searching is not coming. We can just write data is not equal to rigid dot user.email, that is the current user. If they are not equal, then we can use and if they are equal, then that wouldn't be stored in this list variable. And after that, I will again use this set state is called the false. Also what they want is when we click on thus on search function, then it makes sure that does search result variable is empty. Because we might search multiple times. Suppose that one time that uses such that you, all the details will be stored in this variable. But if he types another name, then the search results should be empty. Like that. The function is ready. Let's work on the body portion that is within that children. We have this row. And after the row, I will use an if clause. That is, if search result dot length greater than 0, that is, if some data is there in it. And if not, I will write as if is loading is equal to true. Then show a center rigid width, circular progress indicator. And let's work on now. If search isn't dot length is greater than 0. Let's start with an expanded region. Since we are using a ListView builder. So we have to use expanded so that it will take all the space and since it will be scrollable as well. So in the item count will simply write search result. But land, Let's write shrink, grab through. So they takes the database is required. Then down below we have context and the index. And then I will simply return a list style. I would've done a list tile with leading, as I said. And the child will be Image.all network search index. And then that image property like this. Similarly in the title, I would write down name, that is search result, index, and then name. In that subtitle, I would write like bread dough, email, index, email. And then in that trailing, I would give it an icon button. This will be empty for now. And I will be Icon icons. Message. I can, I can start message. Leg this. Let's save it. But since we have only one user, it won't work. Let's logout and signing with a different account. So we have multiple, at least two users in our application. Now, if I go to the search screen and let's see, does it come? Okay, sorry, I forgot to assign this function. That is this function to the icon button. Search, like this, then only it will work. Obviously. Let's test it again. With this new account. I would search might be VS account. And click on search and see. It is working so perfectly. And if I have something like John which is not there, and if I click on it, so just imagine, if I click on this, then no user font and the previous data will be removed since I made sure that search result gets empty. Because of that on live. So that's it for this video. In the next video, we will work on this chat icon that is so that when we search a user and they use it appears, then we can message him with this icon and there will be chat screen. So see you in the next video.
8. Building Chat Screen: Let's start working on the chat screen. So create a new file inside screen static tree and name it. Shadow screen, dot-dot-dot, like this. And here, let's import material and then make IT estate less rigid Chat screen. I will remove this default constructor. Because now just imagine when we have a chat screen, at least we should know who is the sender and the receiver. That is who is actually the current user and up person he's talking to. So far that we have to read requires some parameters are some data in this chat screen. First will be the user model. That is current user who is messaging. First thing is this. Then second is the friend ID, that is to whom is talking, we need user ID, that is unique ID. Then we need friend name. And then we need final string. Friend image. Some why I need this friend name and image just to show this data. But that is too high if you have used their WhatsApp and you know what I'm talking about? It is at the very top and image will be there and the name of that person will be done. Now, let's create a constructor. And except that is reading all the data, got end-user dot, dot, name, this friend image, like this. And then in that bill function, let's say done a scaffold in the app bar. Let's give that background color is color start field. And then that title, I will use a row so that we can output multiple widgets together. Firstly, widget will be the image and I would make it circular using clip rect. Rigid border. Dds is equal to the radius dot circular it like this. And then in that child image.net friend image, that is the string and give it a height of 35. Then it uses size box with five just to give some spacing and then text. That person to whom he is talking to this day, current user is talking to and gave a different size. So not to navigate to this page. We have to go to the search screen. And then in this style we have this icon button. And here we would navigate, that is navigator, dot push, material, page route, context. And we're sending to the chat screen, which requires all this data. Let's write it one by one. Current user will be rigid. Dot user, which we are already accepting to this screen. Friend ID will be nothing but this index that the search index and here you AD. Similarly name will be name and image will be this image variable. And also while navigating, I just want to set the state and make the search controller empty. Just I just wanted when he returns, that is when he clicks on the back button, then he can search another user if he wants. That's it. So let's test this. Now if I click on the Search button, again, search for a user. Then if I click on this chat, I can now see this is layout is similar to what seven you can just say. But we have the image and we have done in. And just remember, I'm sending the image and named via the constructor that so it looks so fast. If I had used, again, their future will learn there and then fetch everything. It, an experience would not be that great. Now, in this chat screen, Let's create a text field here and a Send button so that the user can at least stipend send them messages. So inside that chat screen, after the bar, Let's go to the body. And the first thing I would use an expanded widget. So data text field would take Alda space, then a container. And here I am building like this. You will just understand because this expanded is different, sorry. This I will explain a meeting. Let's first write it down and inserts on. Then. Then decoration, box decoration, color, white, border ADS, border-radius. Only. Left. Let's give radius circular 25. And right, Let's again gave radius circular 25. And for the time being, this, that child inside it, let's leave it as an empty container and we'll work on it after some time. And just want to show you that here. This expanded widget will take all the space here. That is our lead chats will be shown here later on. And at the very end, we will have our text field. And I would like to separate that code since TextField will have lot of code inside it, including Firestore services. So it's by terrorists, create a separate file for it. So the code will be clean and manageable. I would inside the split that suppose we have models, we have screens. Let's create another folder called widgets. On the widgets that the separate widgets will be returned here. And I would name it message text field dot, dot. Since it will be used to send a message, it will be a stateful widget. I would name it message text frame. Now, as usual, I will remove the constructor. And in this screen, what we would need just that today down the current user ID and a friendly string. Current ID. And since this current ID is by default. Labor from the firestorm. That is why we have to use that. And then a constructor, this dot-dot-dot NTID, this friendly. Now, let's simply go to the chat screen. And after the expanded message text field, current ID would be user dot UID. And really friendly. Let's see one thing. This UID is string only, so let's go and make it available. Make it a string like this. And we can make it final as well because it won't change. Now, inside the function. We would run a container and then give it a color. Let's first thing I would do is give it a lot of white settlers start wide. And then some padding. In sets. Let's have a row, because I will show a text string, any icon button together. So this expanded we did is very useful. It will be used a lot of time. Because here I want this text field to pick all the space available space. In that declaration. Let's give it an input decoration and label. Text should be labeled, should be type a message. Fill color. Let's give it a shot. And then simply outline in order. Let's give it a 0 padding. Then EDS, EDS dot circular, give it 25 ADS. And since it is a text field, we would require a text editing controller. This controller, let's see what is there. See, this is looking so good. Message and null. After that, I just wanted button here. So within this F that is expanded, nets have a sized box of width dy. And then I would foster file, give it GestureDetector on damp will be nothing for now. But in that child, Let's have a container edge insets and give it a box. Shape will be box shaped dot color with blue. And inside it that child will mean icon simply. I can start send color. Let's save it. And see this is that submit button, Send button. We will type the message and we will send it to the fire store. So that's all for this video. In the next session, we will implement that fires store functionality in it.
9. Storing messages in Firebase: Now this is done most important section where we would save the sent message in Firestore. So that concept will be, I will create a new collection called messages inside user's collection, that is inside this and inside a user, I will create a new election messages. Suppose like this. And then, and then it will have the ID of the user to whom this user is talking to, his friend nailing. It will be like this. Suppose messages. Then it will be ID of the person he's talking to. And then in that collection, again, inside it I will have a collection called chats. And inside this chat, we will store all the messages, like suppose message Hi, friends, suppose then another field will be date. Suppose another field can be type. It will be text message. And this will be auto incremented. Not that uses because here, there can be lot of chats. Somebody's one message only in this video can be a lot of messages. And here two more. Data or T will be the L1 is centered ID and one is they say, Well, I didn't like this. I would create these messages collection in both the users who are talking to each other so that both of them have recent messages displayed in their profile. And here I will also have something called suppose here, this is a user ID. Inside this here I will have a last message film. Just, you will understand why I'm using this last message field. But right now, you have to just try to understand properly what I'm about to write. Whatever I shown you, I will write everything in that code. So code to message, text string. And here in the GestureDetector. First thing I would write a variable called string message is equal to controller dot text. I will have the message inside it. And then I would clear out the controller. That is what they want to have. Type will be removed. But we have only distorted, so not an issue. Then I would use the Firestore instance. Yet in that collection, users, I would get that document of this user with that is the currentUser. Inside it, I would create a collection called messages as I showed you. Then inside it, I will create a document to that person. This current user is talking at his friend. And then I would create another collection called chats. And then add like this. I know it can be a little overwhelming, but this is how we can do it. Obviously the ADA and other ways as well. But I came up with this solution. Now, what we have to save is fasting sender ID. Second is receiver ID. You might be thinking why we are saving receiver if you have already stored those data. But I'm just explaining why I'm using this so that if it is a sender, the message will be shown on the right side. If it is a receiver, suppose the message will be shown on the left side like this, just to differentiate than the message itself. Like this. Then our masses when we type of Beck's. But if you want, you can implement later on for those are files as well. It's up to you. And date is very much important. So it will be date, time now so that we can filter and bring their recent messages in a descending order. Now, what I want is after this is stored, I would again have a Firestore, that collection. Again one query, then Vg, current user. But collection messages. And here I would set something in this document that is reaching friendly, but set only one. That is last message, like this. And here it will be shown like this, this last message, if you have, if you are using what separate now and if you've seen the homepage, you can see in the subtitle that last message you sent or you received. And then you can click on the chat and read the whole chat. So that is, that isn't. Let's try and test this code at first because it will only store in in one user's collection. As I told, the same code should be for a receiver as well. But let's test if it is working properly or not. See, it is now removed. And we are hoping that it will be stored in that current year. That is this user's collection. If I click on this, see these messages, then this ID and this user's ID is same as I was explaining. Then he is talking to this user. And if I go to this user, that last message was handed down. And chat was just one check that this, this message only. Now, the same thing we have to do for the user who is receiving as well, so that it will be updated in his profile as that is the message. And right now I'm just removing this because we need the same message to the user. Now saved the same message in that collection of the user with the current user is talking to this ending. It is ending here. After that it matches, have the same code. File, this file store, dot collection users. But doc. Now here it will be friend. Just remember that current user, we are going inside the friend user and getting a collection called messages. Then they use that friend is talking to is this user, which is virginia dot current ID. And we will create a collection and add in, say, nets have the same net ID as rigid dot current. I did this, this message was send Vida. This user. Then the receiver ID. Id. Then message will be type, will be text D. It will meet the dying. Now. And after it is done. And again, saved the last message. It is fair to that instance, not collection users. Dot, dot, dot, dot collection messages, dot doc. But current ID. That's just straight. Last message is a message. So I know this is not to digest, but I will suggest you to just pause the video and try to understand that code line by line. Because this concept is not that complicated. But there are a lot of code involved that this way. Now, let's test. If I go on and again search, get the user. And now if I type how you and send this message will be stored on, should be stored in that users. See first and the second. And here it is talking to this person. Last message was how are you? And then who send message date? So that's it. For this video. You have to understand that concept and the court properly. In the next video, we will work on fetching, send SMS messages and show it in this body. Thank you.
Rahul Agarwal, Flutter Developer & Trainer
