Build an E-commerce Mobile App without coding using FlutterFlow - Backend - Part 2

Hello guys, welcome to another video tutorial by No Code Africa. In this tutorial, I'm going to be teaching you how to build an e-commerce uh mobile application without writing code, using FlutterFlow. So, we already had the very first part of this same uh course, but it was purely the front-end uh part. And this particular side, we will be focusing on uh the back-end development of this application. So, let's jump right into it and get it started.

Okay, so um, let's say you've also been able to replicate what I have done by checking the very first part of this course, right? Let's say you have completed all the screens here, just like I did. Uh, we can just go ahead and take a look at the screens that are available for this project. So, these are the screens. I can just like, you know, quickly minimize, and we can use these um uh arrows, like, you know, these arrows to just move from one screen to the other. And um, before we even proceed, if I told you you want to share the front-end of this project, like let's say you've done yours and you want to share the front-end of your application with somebody else, you can just go ahead and click on "Share" here. When you click on it, it makes the project public, and then you can uh copy the public link and share it with anybody. The person can now go ahead and also see all these designs like this. Okay, so so this is one of the ways you can share your product with anybody else. So I will just click here to make it private because I'm not going to be sharing it anywhere else.

So, um, the next thing that we need to do, I I just wanted us to walk through what had been designed already. So, here in this part, we are going to be focusing on the back-end, not the front-end. We had already worked on the front-end. So, now this is our uh application in FlutterFlow, all right? And um, what you have to do first, the very first thing you need to do when you want to start your back-end is to connect the um, to connect your FlutterFlow project to a Firebase project. Now, for you to connect your FlutterFlow project to a Firebase project, it simply means that you have to, you need to have a Firebase project, right? And what is Firebase? So, Firebase is the uh, the the part of these application, right, that will be handling authentication and storage and a couple of other things, right? So, but for this particular class, we're going to just be uh focusing on authentication and storage, okay? So, every single thing the user will be doing, you know, when the user comes to create an account, for instance, puts in their details here: first name, last name, email address, and password, and, you know, clicks to continue, it is going to go into Firebase to save it there, all right? The password will be encrypted, of course, but but every other detail will just be passed into the Firebase platform. And then when the user wants to go ahead and, you know, uh sign in, it will now use the information that was previously stored in Firebase to authenticate the user into the application, okay?

So, now that we have gotten away from that, where can we find uh Firebase? So, you can just go to uh firebase.com, all right? You can just go to firebase.google.com. Let's, let me just go back to how it was. So, you will see here firebase.com like this. I believe that you already, you already signed to your Gmail account, and so you need to have signed in to your Gmail account, and then you will have access to these. The next thing you need to do is just click on "Go to console". And when you click "Go to console", it will take you here. And if you've not had any Firebase projects, like for this particular uh email account, I don't have any Firebase projects. So, I can just click "Get started with Firebase project". I will click here and then give my project a name. Well, the project is already called "Clot", and I will go ahead and click to accept the Firebase terms. And I will also confirm that I will use Firebase exclusively for purposes relating to my trade, business, craft, or profession. This is very important. Then I will click on "Continue". And this is for Google Analytics. We won't be using it in this project, so we'll turn it off. And we will click "Create project". We'll wait for a couple of seconds, and then uh our Firebase project would have been created.

Now, after the Firebase project has been created, how do we use it? How do we connect the two of them? The Firebase project and the FlutterFlow project? This is our FlutterFlow project. How we're going to connect it is by coming here to "Settings", and then here in "Settings", you will see "Firebase". And so, here, um, you would have also used this particular part in your FlutterFlow dashboard to to create the Firebase project, but we didn't want to go through that route. Now, we are going through the route where we go to Firebase itself and then create the project. So, um, when you open the Firebase project, you need for you to connect it, all right? You need to put the Firebase Project ID, and then from there, you can connect them. So, let's go ahead and click to continue. Uh, it's going to take us to our Firebase dashboard. This is our Firebase dashboard for our project, and we are currently in the Spark plan. If you click on it, you will see that you can actually switch from Spark to Blaze. All right, Blaze is uh, you know, has a lot of features that we will need at some point, okay, especially when we want to connect the payment gateway, uh, because it requires um, uh Cloud Functions. So, we'll need to, you know, use the Blaze plan when we get there. We'll cross the bridge, okay? So, I'll close this.

And the first thing we need to do is click on this to go to "Project settings". And here, you can just copy the Project ID. This is the Project ID that you need to put back here in FlutterFlow and then click on "Connect". Now, we're going to run into an error, okay? It says here, "Project ID must be alphanumeric". And I, so I think the reason is because there was a space here at the beginning. So, I'm just going to click to remove it, all right? Then I can click to connect. It will give me another error: "FlutterFlow does not have access to this file account. Please add Firebase@flutterflow.io as an editor to this project." Now, that simply means that we need to give permission to uh, you know, uh Firebase so that they can like, you know, manipulate what we have in FlutterFlow. So, here we're going to go ahead and click on "Users and permissions", and I'm going to click here to add a member. And I'm going to say "Firebase", all right? So, Firebase@flutterflow.io. Then I will click here and say "Editor", all right? Then I'll click on "Done", and I click on "Add member". Now, when I do this, I have successfully added Firebase@flutterflow.io on this uh, as an as a as one of the administrators, you know, administrators, okay, of my project. And then since I'm connecting it to FlutterFlow, it can now manipulate what is happening here. I can now click on "Connect", and it tells me "Success".

Now, after I'm done with that, the next thing I need to do is click to "Generate configuration files". The configuration files are basically small, tiny bits of files that your application needs to work. So, I'm going to go ahead and click on uh "Generate files", okay? And I'll wait for a couple of seconds, and then it will generate the configuration files for me to use in my project, okay? So, we're waiting for this to finish up. Then from there, we can go ahead and uh continue building our app. I'm going to close this preview menu. It's going to come up very soon, and then we can, you know, deploy and start. All right, I hope you're enjoying this particular course so far. Please, if you're enjoying it so much, like I am enjoying teaching it, just click on the "Subscribe" button and subscribe to this YouTube channel. And also, uh, share with your friends who want to learn how to build apps without coding. And then also, uh, like this video as well. Thank you.

Okay, so, uh, we have gotten these. The next thing we need to do is, um, it says here, "Firebase Storage not deployed". We will need to do all of these at once so that we will not, you know, have errors that that we find it difficult to debug. So, let's come back here to Firebase, and you click on "Build", and we need to connect, um, the first thing we should do is "Authentication". So, I'll click on "Authentication". I want to add the the way users will be able to authenticate into our application. So, we have "Get started". I'm clicking "Get started", and it will show me all of these. That means our users can get authenticated uh using all of these means, okay? So, we want to use email and password for now. I'll click to turn it on and I'll click to save.

Now that I've gotten that, the next thing I need to do is click on "Build" again and click on "Firestore Database". Now, it's going to load up. Then I need to just go ahead and then create the Firestore database, all right? So, now I'm going to just go ahead and click on "Create database". Uh, it picks a location here. I can leave it like that, or I can change it, okay? Then I will click on "Next". It asks me to set the security rules, basically for my project. I can say "Start in production mode", or I can say "Start in test mode". I choose to say "Start in production mode". "Create". Then from that, I clicked on "Create". Now, with these, I will have my Firestore database ready. The next thing I need to do, which is the final thing for the setup on Firebase, is to turn on my storage, okay? Then after that, we will start focusing on just uh FlutterFlow dashboard. Let's click on "Build" and scroll down till we find "Storage". We click it. We are going to also uh, you know, get started with it. I'll click on that. "Start in production mode" as well. "Next", and "Done". Wait for a while, and then this will be completed. So, when that is done, we will successfully just click on this and say, it says, "Are you sure you want to deploy the storage rules now?" Uh, if I told you tried doing this, tried doing this before you did all of what we did in in Firebase, it will give you errors. So, you need to do what we did here first before you come here to click on "Deploy" and then click on "Yes". It will load for a while, and it will tell us "Success". All right, so yeah, it's deployed because what we were doing here is also deployed successfully. All right.

Now that we're done with this, okay, the next thing we need to do is we will come back to our project and, um, let me see, uh, Firebase, okay, there's something I didn't do. So, here you're going to click on this "Firebase wizard setup". Just click on it. When you click on it, it will show you some other things. So, here are the basic stops. These have already been checked. So, just click on "Next step", and then it will bring you here. So, you have to click to allow uh the the users to log into to your application. So, what I need to do here is I'm going to just go ahead and click to enable authentication. I'll click to create uh to, I'll turn this on. That means it should automatically add a "users" collection to Firestore for logged-in users. That means it's creating a table for me. Now, um, the next thing that I need to do is I'll click on "Start building". And if I come here, this is where we have Firestore. If I come here, I'll see my "users" collection already created for me. Other create other collections, you need to create them yourself, okay? Then we have some errors here. So, it's telling me that "Project has authentication but entry page is not specified". "Project has authentication but logged in page is not specified". Now, this is how we're going to fix this. If you come over here, all right, if you come over here on the, let's say the pages, right? We have the one called "Splash Screen". In fact, let's come here to the main screen. So, we have the one here called "Splash". After this is the "Sign In" uh screen. So, you can click it to sign in, uh, and then automatically just brings you here and all of that. So, what we can do here is going to be quite simple. We need to, what, what I would normally do is instead of separating these two parts, I would just bring the two of them into the same screen, all right? Yeah, I would just like bring the two of them into the same screen. You put here, click on "Continue", and then here, "Password". Well, we, we can always, we can always use it the way it was. I, I think we can use it like that, but that means I will show you how to do some semi-complex things, all right? So, this is the first part. This was "Create Account". Sign, okay, this is "Sign In". This is "Create Account". So, let's, this is what we're going to do. We're going to come to "Splash Screen". Where is it? We're going to look for our our screen, the one called "Splash". I think we called it "Splash". We can search for, okay, this is it, "Splash Screen". So, now the way it's going to work is that the, when the user opens the application, it's going to take the user here first, and then there's going to be like a delay of maybe 3 seconds, and then the user will now be taken to the page where they need to, you know, create an account. So, we can bring them here first. In fact, let's bring them here first to sign in, and then we will now show them all of these other things. So, let's go ahead and do that. For us to create a scenario where the user will be delayed for like 3 seconds here before they taken to the next page, we have to come here. Let's go to the widget tree and click on the scaffold, this one, and then now we want to start adding actions to it. So, we'll click to add an action here. An action is more like, uh, just like it's its name, action, like what do you want to happen when a user, you know, comes to this screen, for instance? Let's say if I thought we were trying to add it on a button, that simply means what do you want, uh, what do you want to happen? What do you want to see, all right? Uh, what do you want to see in your application? What do you, what experience do you want, uh, your user to to have when they, you know, tap on the button, all right?

Okay, so, um, the next thing we need to do here is I will go ahead and click to open the uh action flow editor, okay? I'm clicking to open the action flow editor, and I will add, uh, an action. The action is going to be called "Wait Delay". "Wait Delay", and, uh, we want it to wait for 3 seconds, all right? So, 3,000 milliseconds is 3 seconds. And then after that, we want to click here to navigate the user to, let's go back here and check where we want to take the user to. So, I want to take the user to this screen, "Sign In". So, I think we'll have a screen called "Sign In" as this one. So, let me go back to my "Splash Screen", and I'm going to click to open the action flow editor. And then the next thing I'm going to do is I'm going to go ahead and click this to add another action. That means after there is a we delay action, what should happen next? And so, now this is where I now add another action, and it's going to be a "Navigate To" kind of action. This is it. So, uh, it's asking me where do you want the user to navigate to? I want the user to be navigated to "Sign In", all right? You can add a transition if you want. You can say "Fade", "Instant". I want it to be "Instant", all right? And then it takes, it's going to take the user to "Sign In".

And, um, now if you come to the storyboard, at first, there were no connections. We're supposed to have something here in our storyboard. "Reset the positions of all your pages and components in the". Okay, error: "Unable to initialize storyboard. Please ensure you have set the initial page on the app details." Okay, yeah, this is a problem. Now, let's go and set this particular, the, the app, the initial pages. So, I'm going to click here, this on the arrow. It's going to bring me here. The initial page is the entry page. So, I'm going to click here and say "Initial page is going to be Splash Screen". That's fixed. Now, then the logged-in page is going to be "Home". All right, this is going to be the logged-in page. So, so now we've fixed those two errors. If we come back here to the storyboard, we can now successfully see, uh, you know, the connections. So, the storyboard is just supposed to show you the the connections. I think that crashed somehow. Uh, okay, so, yeah, this is my storyboard, all right? So, um, this, after this screen is this screen. So, I'm going to come back to my widget tree, okay, well, my pages, and I'll go to my "Sign In" screen, and this is where the user types in the email address, and then, uh, the next thing the user is going to do after typing in the email address is to, you know, uh, click on "Continue", for instance, and then, uh, well, this is just the UI, uh, that we have. Normally, you're supposed to just type in your email address and password and click on, you know, "Sign In", but here, according to the design, after typing this, you click, it takes you to another screen, then you put your password and click to, you know, "Sign In", right? So, let's do it like that. So, I'll click on, uh, what I need to do is in this text field now, and I'm going to change it to "Email Address". I'm going to say "Email", uh, "Email Signing", all right? "Sign In". And then here, for this one, uh, before we continue, let me add an action to this "Create One", you know? So, if you come to this particular page and you don't have an account, you need to click "Create One" to take you there. So, for us to do that, we need to click to add an action, and here I'm adding an action. It's going to, it's going to still be "Navigate To" kind of "Navigate To" kind of action, all right? So, I'll click on this, and then we go to "Create Account", okay? Then I will just make it "Instant".

Now that we have that, the next thing we need to do is I will just go ahead and, um, let me see what we're going to do. "Create an account", that's done. Uh, we will settle all of this later on. In fact, we can do it just now at once. So, I'll click on these, click on "Add Action", and we will go to, this is for you to "Sign In with Apple". So, I'll go to, uh, "Backend Database", I will say "Firebase Authentication", "Login", all right? Then the platform is going to be "Apple". That's it. Then for this one, in fact, let's click here and copy this action. I'm going to click on this one for "Google", and then I'll paste it, and then I will change this to "Google". That's all. Then for this one, I will click here, and then I'll paste it, and I'll change this to "Facebook", all right?

Now that we have that, let's just go ahead and then, uh, you know, create what is supposed to happen when the user clicks on "Email Signing", like types in value here. Now, when the user types in a value here, we need to click on "Continue", right? Now, when we click on "Continue", the information that is being stored here needs to be saved somewhere. It's not saved into the database yet, the Firebase, uh, database. We want it to be saved in something called "AppState", all right? So, AppState is like a temporary storage system for your application, all right? It's not going into Firebase. How can you assess that? Uh, let me see. Okay, so it says there, "When using Facebook login, you must provide the Facebook App Name and App ID and all of that." Okay, so we are not going to go into so much of all of these. So, let's just click here and just take this off for now, all right?

So, um, the next thing we need to do is we need to create an AppState, like a temporary storage space where we can store information. Now, we can store that information in something called, uh, let me come here. Here we can store the information in a "PageState", we can store it in in an "AppState". I would prefer AppState so that it can be available app-wide. If it was just PageStates, the information can be stored just in this page. You will see that eventually, okay? So, uh, I will come here to "AppState". This is where we have the app values, right? And, uh, it says there, "Set up your elements that you want to keep stored in your local device". I'll click here. I want to call these "email signing value", just "email", maybe "email signing", all right? And it's going to be a string because the email is just like a string of, uh, different characters. So, it's a string. So, I'm going to say I want it to persist. I want it to be persistent, that means if the page refreshes, all right, if the application refreshes, I still want it to be stored in the app, all right, until something changes it. So, I will say "Persisted", and then I'll click on "Create".

Now that I have done that, the next thing I'm going to do quickly is I'm going to go ahead and, um, uh, add an action to these button that says "Continue". So, I will click here to add an action. The action I'm going to be adding is going to be called, is going to be under "State Management", and it's going to be "Update the AppState" because I want to put a value inside that AppState variable I just created. So, I'm going to go ahead and click here to add, uh, to select the field, that's the the name of the AppState. I'll click here, and then this is the only one we have. And it's going to ask me, "Select your update type". So, how do you want to do it? I want it to be a "Set Value" kind of update type. And it's not asking me what value you want to put there. I'm going to click here and go to "Widget State", and I'm going to say, whatever is being typed inside this, uh, text field, that is going to be the value of what I want to store inside the AppState variable, okay? Now, after I have done this, I want to go ahead and add another action that is going to take the user to another page. So, where is that? That "Sign In Continue". So, I'm going to click here to open the action flow editor. I'll click here to add another action, and say "Navigate To", "Sign In Continue". Right? So, I'm going to look for "Sign In Continue". Change this to "Instant", and that's it. All right.

So, now I can go to, uh, "Sign In Continue". This is "Sign In Continue". Now, it needs me to put the password. I will rename the text field here. I'll just come here and say "Password Sign In", okay? That's it. And then I will click here. I can change this to, can say "Continue", you can just say "Sign In". I can change this to "Sign In", all right? So, "Sign In", okay? Now, now that we are here, we're doing a pretty good job, actually. So, now that we are here, the user is going to click on this to sign in. And how can the user sign in? We're going to add an action here to say, "Add Action", and we're going to go to "Backend Database", "Action", we're going to see "Firebase Authentication", because we're using Firebase, and then we will click on "Login", which is "Sign In". And I'm going to say we're using email as the authentication provider. And now he's asking us, where is the email field? So, uh, where is it? For some reason, this is not allowing me. Okay, this is not allowing me to select somewhere else. Okay, so it's, it's not seeing a text field here, so it doesn't allow me to select anything. But I can click on this to fix it from variable. So, I'll click to set it from variable, and I'll click here, and I'll go to "AppState", which is where our variable is, and I pick "Email Signing". That's it. Now, when I have authenticated my user, I will be taken into the path that I said that the user should be taking in when they log in, which is "Home". Now, let's go and see how our "Home" looks like. If we come here to our "Home", this is how our "Home" looks like. The homepage looks like, okay? So, now we can just go ahead and then, you know, uh, test our application. So, I'm going to click on this to, you know, launch the debug mode of our application so we can test it. So, I'm like testing it right now, like running it. After a while, this will be completed, and then we can now go ahead and see it. All right, so while we're waiting for that to run, let's look at what is happening on the storyboard. Now, this is the storyboard. I can minimize it a bit so you can see it. Now, look at how it's working. The user comes to this particular screen, waits for 3 seconds, and then is been taken to this particular screen. And when they click on "Continue", it takes them to this screen. And when they click on "Sign In", it takes them here. If they click on "Continue" with Apple, it takes the user straight to here. If they click on "Continue" with Google, it takes the user straight to here. And if they click on "Create Account", it takes the user to the page where they can create an account. All right, meanwhile, we haven't done, uh, you know, created the part where the user can create an account. So, let's quickly do that. So, if we come to "Create Account" here, right, uh, we want the user to type in their first name here. So, let's change this to "First Name", um, "First Name". Then this one, we are renaming the text field to "Last Name". And then here, we're renaming these two "Email", "Email Create". Let's just call it "Email Create". Then this one is going to be "Password", uh, "Create", okay? And then "Continue".

So, for before we continue fixing this page, let's click on this "Reset" and add an action. So, this is going to be for "Forgot Password". I think we have that somewhere here. Yes, so we're going to add an action. "Add Action" here, and we're going to say "Navigate To Forgot Password". This is it. Change the transition type to "Instant". That's fine. Now, we can actually just copy. Let's copy this quickly. The copy the action and take it to "Sign In". Let's find "Sign In" because we have something like that. Uh, wait, where did I see that? Okay, no, not not here, actually. We have it in the second one, one here, "Password", "Forgot Password". So, I click on this, click on "Add an Action", and paste it. Fine.

Now, let's go back to "Create Account" and then, let's set up these. So, what we're going to do is quite easy and simple to do. We're going to click on "Continue", and we will click on, click here to add an action, and then "Add Action", and then we will say "Backend Database", and here it's going to be "Firebase Authentication", "Create Account". Now, we can go ahead and click on the authentication provider, which is going to be the email. And then the next thing we need to do is pick our, you know, email field. So, this is going to be "Email Create". Then the password field is going to be "Password Create". All right, we don't have a "Confirmed Password" field, so no problems. If you have it, you can just select it. Then for this other one, we have the name, the first name, and the last name. And, uh, if we come here to Firestore, all right, we'll see here "Display Name". We don't have the field for first name and last name, so we can easily just add it. "First_name". We just say it's going to be a string. This is like the data type. This is the variable name, all right, which is also called the field name. Then I'll click on this. Then this is going to be "Last Name", and it's also going to be string, and it's going to be, I'm going to click there to check it. Now, I've added the two fields here. The next thing I need to do is come back here and say "Add Fields". So, I add field, not the email. I'll click here, and then I'll check "First Name". It's asking me, this field you want to add to the database, is it going to be a specific value? Do you just want to write it here? I say no, I want to write it. I want it to come from a variable. So, I click on this and then click on this, click on "Widget State", because all of the widgets have like a state, which is the, let's say the spirit, the soul of the widget, and that's basically where you have the content of what the user had typed inside. So, I'm going to click here and say "Widget State", we're going to say "First Name", exactly. So, that means whatever the user types in here is what will be saved in this variable, like will become the value in this, uh, field called "First Name" in the database. And then for this one, we add another field. It's going to be the second one called "Last Name", and we're going to say "From Variable". We're going to click here and click here and say "Last Name". Now, that way, we have successfully done that. When the user has clicked on "Continue", they will be taken to the page called "Home" by default, because this is the page that they should go to when they've logged into the application. So, now let's go ahead and then just reload our test mode. Let's come here and click on "Instant Reload" to, you know, load the latest backend functionalities that we have added to our application. In fact, if you come back here and come to your storyboard, you see the storyboard has changed to now we have some extra complexity leading to this particular screen called "Home". Now, if we come here and just wait for a couple of seconds, we will see the the screen of our application, and then we can now just test it. So, um, this particular part is just for you to understand how to handle authentication with Firebase, all right, authentication with Firebase. Now, we can always like use another kind of storage system called Supabase, but in this particular course, we're just dealing with, uh, Firebase. So, I'm going to come here. You see, after in, after just about 3 seconds, it disappeared, and then now we see this. The reason why we have this, uh, you know, um, black screen, black background, is because of something called the dark mode. If you come here to the team settings, and you come to team, uh, typography, right? No, not this one, colors. If you come to colors, you will see "Dark Mode" is turned on. You can turn it off, actually, but let's leave it there. I, we can just click on this to have the, you know, you know, light mode, and then we can see our application properly, okay? So, all right, so now we have this, uh, well, it's still showing this dark mode, but it's okay. So, I can actually just type some things, but it's showing here white, okay? We can always come back here and change that. Let's come here to where we have the signing. This is signing. If you click on the text field and scroll down, you see that the real text is supposed to be black, right? But for some reason, since we are currently in dark mode, it's just that we can turn it up, actually. Let's turn it off for now, or I'll click on here and come to colors and turn it off, and I will come here and just, uh, do an instant reload, and with an instant reload, I will be able to see the application the way it's supposed to show, okay?

Now, um, just a few minutes left, we will wrap up the authentication part of the back end. So, the next thing, okay, let's, we're just waiting. It's going to show up soon. Uh, okay, here you go. This is the application. In 3 seconds, it's going to show the next part. Beautiful. Now, this is it. Now, we have the B pinals here. We'll talk about this eventually. So, we have this. So, you can type in "Sign In", for instance. I will just say mr.david@gmail.com. I'll click and continue. It brings me here, and I will just type in gibberish, basically, all right? And I will click to sign in. It will tell me "Error: The supplied authentication credential is incorrect, malformed, expired" because it can't see this thing in the database. It's not correct. So, I can just like, um, I can go back, all right, and click on "Create One" because I don't have an account, actually. So, I'll click to create an account here. I'll just say "David" now. And before we create an account, let's come here and show you how the Firestore database looks like. Now, this is our Firestore database. Nothing is here, okay? Nothing is here, but as soon as we create the account that we're about doing, we're going to have something. So, I'm going to come here and say "r@gmail.com" and then password, I'll just put in my password, uh, 678, okay? Yeah, you can just click this to toggle the password, and then I'll click on "Continue". Now, when it creates the account, it's going to take me to the next page, but for some reason, it didn't take me to the next page. But while we are, we have to go ahead and come here and just be sure of what the problem is. So, I'm refreshing this to be to to check whether a record has been created in Firebase. No record has been created in Firebase. Now, this is going to be as a result of some security rules, okay? So, we're going to have to come here to "Settings", sorry, we'll come here to "Firestore", then click on this and scroll down. We'll see here that the Firestore rules was not deployed. That's why we can't have access to it. So, I'll just click here and say "Deploy", and say "Deploy Now", and then now it's deployed. I can just click on "Instant Reload", and then after that, I will just start creating an account all over again, and with this time, it's going to, you know, take us to the homepage of our application, and we would have completed the authentication aspect of our e-commerce mobile app, mobile app, although, okay, we would not have completed because we need to create this one, all right? We need to create this one, and then this one, okay? So, I think, uh, that will be it. Uh, so we have a couple of other things. So, I finish up, that's okay.

So, now we have done this, and, um, why do we have this blank screen, blank white screen? Uh, okay, so I'm going to try to do an instant reload. Let's see. Okay, it's showing me a white screen. So, I, I don't know why it's showing me a white screen. I think it's, it has taken me to some place that I shouldn't actually be. Okay, what I'll do here is, I didn't add a lot of things to our application, like logout and all of that. It's showing me a blank screen, which is, uh, my homepage is not actually blank. Um, my homepage is not blank. This is how my homepage looks like. So, what I'm going to do is I'm going to click to end the session, and then I will click to create a new session. All right, while we are creating this new session, I'm going to work on the other aspect of the app. So, so here is the "Forgot Password" side of our application, and, uh, what we need to do here is quite simple. We are going to go ahead and, um, let me see. We're going to go ahead, let's go to the "Forgot Password". The user comes here. Let's add an action to this icon that takes the user back. So, let's click here to add an action, and it's going to say "Navigate Back". That's okay. So, when the user types in something here, they will click here, it to send them, uh, it to send the user a link for them to reset their password. It to send them to their email, send them, uh, a link in their email. So, I'm going to click here to rename this, uh, I'll say "Password", okay, uh, sorry, not password, uh, "Email", okay? So, I'll click on this, and I will say, let's add an action here real quick. It's going to be "Backend Database", uh, "Firestore Authentication". You see here, "Reset Password". So, when you click that, it's going to reset the password, but it needs the field for email. So, it's going to collect the email value here and send it, the link, uh, sends the user a link for them to click in their email and then reset their password, okay?

So, now we have done this, um, when the user clicks on this, it's supposed to take the user to this page that says, "We sent you an email to reset your password". So, now we can click on this, um, I don't know what that page, "Forgot", how I called that, uh, okay, this is "Password Reset", "Password Notification". Let's click to add another action, okay, and say "Navigate To", "Reset Password", where is it? "Reset Password Notification". Click this and say "Instant". That's it. All right, so we will have this "Password Reset Notification" here. Then you can click to "Return to Login". So, let's click this to add an action here that will take and navigate the user back to "Sign In". We called it "Sign In", so just "Sign In". We click here and make it "Instant" navigation transition type, okay? Then, um, that's about it. I think the next thing we need to do quickly is to, you know, fix this particular part that says "Tell us about yourself". So, uh, here, um, let me see. I can't really tell. So, let's say you signed in. Let's say you signed in. No, let's say you've created an account. You need to come here. So, let's come back to where we have, um, "Create Account". Let's come here to "Create Account". When the user clicks to create an account, let's click here. We're going to add another action to navigate the user to, what did we call it? Let's look for, we're going to have to look for the the name of that screen. I about info, okay? So, "About Info", all right? So, let's come back here to "Create Account" and click here. We'll send the user to navigate to "About Info". We change you to "Instant" transition type, and then now we can go to "About Info". So, let's see here. This is the "About Info", and this is a button. So, the user is going to click on this if he is a man, and click on this, it is a woman. So, okay, okay, it says here, "Who do you shop for?" So, you're shopping for a man or you shopping for women, okay? So, now normally, if you click on this, right, this should be the default button when you load the screen. When you click on this, this button should take in the color of this one. So, this is where we're going to go back to creating something called, let me see, um, let me see what we can do. If I come over here, all right, this is the scaffold of our application, right? I want to create a "PageState", okay, that means I want to create a state, a variable on this page where we can store an information inside. So, I'll click on this and add the the variable name of the page state. So, it's going to be called "Men", all right? And I'm going to say the type is going to be a boolean, because we want it to be true or false. So, it's a boolean. And then I will say, uh, uh, I'm just going to click to add another field. It's going to be called "Women". It's going to also be a boolean, uh, where is it? A boolean, all right? And then, uh, I'm going to click on [Music] confirm. So, these are like the the screens that the the states that we have. The page states that we have. So, I can just click to close them now. Let me see what is here. Look how past it. "Men" is non-nullable but has default, has no default, okay? So, let me come here, "Initial value". Let's just say initial value for this is true, and then initial value for this is actually false, and it's not nullable, all right? So, both of them can't really be empty, right, per se. So, now let's go ahead and just check that, okay? We can uncheck this. I think, uh, we still have the errors. "Look how past, Men is non-nullable but has no this". So, that means it has to have one of these. Either it is nullable, okay, or it has a default value. So, uh, okay, so actually this is fine, really, but I don't know why we're having this issue. It's not, uh, okay, okay, this is false, right? Okay, why is it still? This is actually still false. This is true. This is false. Uh, okay, so, okay, I have to confirm it. Uh, yes, I have to confirm it. And so, I think this is fine now. So, we don't have that error anymore.

So, let's go ahead and then, you know, set this up. We're going to be doing something very complex. It's not super complex. It's not supposed to be for this stage of, you know, uh, your app learning, but let's do it anyways. So, here we want to go ahead and, uh, manipulate the color of this, uh, button based on the action the user does. So, when the user clicks on this button, like loads this page, this is going to be automatically the color of this one, and this is going to be the color of this one. But when the user clicks on this, this color is going to change to this one, all right? So, um, let's go ahead and do that now. So, if we go ahead and, um, let's see, um, let's go ahead and just quickly do that. If the user goes ahead and, um, clicks on on on, okay, by default, it's going to show "Men" first. Then maybe click on this. Let me copy this, uh, color code. And let's say the user clicks on this, we want to add an action. So, we want to add an action that is going to say "Update State", "State Management". It's going to be a "PageState" updating means store something inside it, like change the value of what is there, all right? So, I'm going to say "Update Page State", and, uh, it's going to be "Women". "Women" is now going to be true. I'm going to set the value as true. And then simultaneously, of course, "Men", the the value of the "Men", the men boolean here will be set at false, because, uh, otherwise, we will be having, you know, mixed up, uh, colors. So, when this one, in every scenario.

Whenever this one is true, this one has to be false. Whenever this one is true, this one has to be false. So that's why we have to have it like this.

Now that I have done that, I can just go ahead and click to copy this action and then add it to this particular one and just paste it. So when the user clicks on this, women is going to be false and while men is going to be true because this is one that I selected. And then we need to do something else on page load. I'm going to click on click on the scaffold here. I'm going to add an action. I'm going to paste it on page load. Women is going to be false and Men is going to be true. This is just based on the design, okay?

All right, then. Uh, the next thing I'm going to do is I'm going to come back here to where we have the colors. I'm going to just try to copy this color and I'm going to add a condition. Condition. So this is like a fixed color. It's not coming based on, uh, a variable. All right. So now we need to click on this to create a variable for it. So now here is where we're going to do, uh, we're going to add a conditional value. And we will click here and say, "We'll click here and say, go to page state." If the page state for man is, uh, true, that's what this means, then, uh, paste this color. Okay? But if it is not true, all right, then paste the alternate color. I'm going to go get the real color. That's the color we have here. In fact, let's come back here to the, uh, UI design so I can just, uh, copy this color. This one I'm copying this color and I'm going to paste it here. Okay, this is it. So I will just click on confirm. So if men is true, then show this, but if it is false, show this one. Okay, that's what we just did here.

I'm going to click here to copy this. All right, then I will go to this one and click to paste it in the the women side. So I'm going to come here to where we have the button color, field color. I'm going to click here and then I'll click on P to paste it. And then I'll click here to go change the Val, the the type of page state is going to be women. All right, so if women is true, okay, this is going to be the color. It is false, this is going to be the color. So I'll confirm.

Now we have done this for this, but observe this one has a white, uh, the men, the text here has white, while this one has black. So we need to do the same thing to it. So if I come over here, this is where we have the color for the women side. So I'll click on here and say paste. If the the, if the, let's come here and and change this to, uh, women. If women speech, it is true, all right, the color is going to be, is going to be white. Okay, it's true. But if it is false, it's going to be black. All right, because as it is right now, it is false, so it's black. The text, I mean. Okay, so I'll click on confirm. Then I can click here and copy this variable. I'll click on the men and click and paste it here. Then from here, I'll change this one to, page state for men. And if men is true, it will be white, and or else it's going to be black, like that. Confirm.

So now that we have that, we have fixed this particular one. The next one is going to be the age range. So we fixed the age range before? No, we didn't. Let's say this is going to be, let's come here and say, age ranges, age ranges. So we have, um, okay, so basically it's like 3 to 12 for this app. This is supposed to be for adult, right? So from, okay, so this is not really the correct age range thing that I would prefer to use. Uh, okay, so we have, let's use this one. So 17 to 30. Then 31 to 45. We add another option, 31 to 45. Then this one we say, um, above 45. So we can just say 45 to 64. Right? Then here we can say 65 plus. Okay, so we have this now.

Um, now let's come here to Firestore and then we go to the users collection. And then here I'm going to say gender. I'm going to add another field called gender. And we're going to say it's going to be a string. Okay? So, uh, I'm going to say here, uh, I'm going to check this. And then the next thing I'm going to do is, uh, age range. I'll say age range, age, age range. Okay? Then I will say here it's going to be like a string. And then I check it. So now we're going to store it information now. So when when the user clicks on this, when the user clicks on this, we want to update the, okay, so this is age range. You click on man and you click on age range. We should have another button that says continue. Okay? See, this is a button. It says finish. So we didn't added. So I'm going to come over here to sign in and just copy this. Uh, oh, let me just copy the button. I'll go to about info and come here to the column and paste this. Then I'll give it some padding of maybe 60. No, 300. So like this. Then I'm going to come here and remove the action. Uh, let me delete all the action chain here. Okay, so this is going to, this says, uh, finish. So let's change this to finish. Finish. Okay.

Now, so when the users clicks on this and you know, uh, click on finish, all right, uh, we want the user to be taken to the homepage. So I'm going to click to add an action here. And here what I'm going to do next is I'm going to be saying, update. I'm going to go to backend database, Firestore. I'll say update document. So now we had already created a document in the user collection. So in this case, we're just updating it. So I'm going to click on here and I'll go to, it's asking me, select the reference that you want to update. So I want to update something. So show me what I'm updating. Whose document am I updating? Because we're going to have a lot of, uh, users using this application. So whose document exactly? So I'm going to click here and say it is going to be the authenticated user, the person that just signed into that creates an account just now. All right, so on this device. So now that's it. And it's going to ask me what fields do you want to update? I want to select the field called gender. And it's asking me the value source. I don't want it to be specific. I want it to be from variable. And I'm going to click here and go to my page date. All right, then, uh, okay, so now this is going to be a small challenge. Um, H, okay, so let's do like this. It's not a really big challenge. We're going to come here to the the scaffold. We are going to create another page state called, let's create another page state. All right, it's going to be called gender. So yeah, these are all genders. Yes, but we are basically using it to control the colors. But what is the real value of the gender that the user has selected? So I'm going to type here gender. I'm going to say here string. I'm going to say that it is, uh, it shouldn't be nullable, actually. Then I'm going to say confirm. Okay, like that. I have this. Uh, okay, so then I can now click on this. And when I click on this, this is the gender. So now I can click on this now and say page state. Then I'll go pick gender. So when the user clicks on this button, let's go add some action, extra actions to it. This was just to change the updates, the app, the page states. But now we want to store something inside. Okay, so we can just say add field. This one. And we want to set value. Set value to what? We're going to call this men. All right, uh, okay, we called that stuff. Well, we call it gender. We should have just specified more shopping for who, something like that. So a men. Then for this one, it's going to be, uh, we're going to click here to add an act, an extra action to it. We select this and we say set value. We're going to say women. Okay, like that. So here we can click to finish. And then, uh, we've already stored this. The next thing we need to store is going to be another field called age range. So we'll click here and say age range. It's going to be a from variable value. And we will click here and go to widget state. And it's going to be the value of the drop-down. Okay, because this is a drop-down. We can come here and rename it and say age_range. Okay, so like this.

Now we have, uh, we have actually almost finished what we what we've been working on for the past, uh, you know, almost one hour. So we will click on here to finish. And then I will, when the user is finished doing this, we want to navigate the user to where, to the homepage. So I'm adding another action. Navigate the user to where, to home. And we want it to be instant. That's it. So now we have done this. All we just need to do is, um, let me see. Let's close this and let's just run an instant reload. One instant reload. And then we check what we have done. So even told you've already reached this particular point in the tutorial, just please like this video and subscribe to the YouTube channel if I told you you haven't done so already. Because here you get to learn how to build mobile and web applications without writing codes using FlutterFlow and other, uh, no-code instruments. Okay, so we're waiting for this to show us, uh, the application that we have built, of course. And then we can just, uh, test through it. So this is it. Um, for some reason, I still have this blank screen. Email signing. Uh, I don't know. Let's go back to Firebase. Let me reload this. Okay, there is no user created. And I'm still seeing this white screen. Um, I'm still seeing this white screen for some reason. I don't know why we have this right screen. All the very first screen we're supposed to see when the user loads up is this splash screen. Then after that, we're supposed to be taken somewhere else. But for some reason, uh, we're seeing this. Now, this is going to be the very first error that we're going to have to debug. Authenticated user is logged in. Oh, is user logged in true? It's showing here that the user is logged in. Okay, that means if we come over here, uh, let's go to authentication. We see that there's a user here. So let me go over here and just delete the account. All right, I deleted that account. And I'm going to do an instant reload. We shouldn't have a user in the app. Okay, so now we have the application loading for us again. And now we are going to have to create an account. Create one. I'm going to going to say David Oro. Then Mr. David Oro, gmail.com. My password. And I'll click to continue. When I click to continue, it brings me here. So by default, this shows first. If I click this, it switches. You see it switches. This is the beautiful thing about FlutterFlow. Okay. And then also, if you observe here, the gender value is also changing. It that is how to use the debug panel. If I click here, it's now women. If I click here, it's now men. All right. And even this is also changing. You see. And then for the age range, I'm going to select this. Okay, this is 31 to 35. You see it also changes here. Then, um, I can now go ahead and click on finish. If I click on finish, it's going to take me here to the homepage. Now, for some reason, this homepage is not showing with its colors. I don't know why. So let's come here to the homepage and let me see what's happening to this homepage. Um, it has a stack here. I don't know why the homepage is actually not showing everything. Okay, I really don't know why it's not showing the, it's not showing everything that we have here. Uh, it says here it's currently at home, but nothing. Everything here is like a, a button. I don't really know why it's not showing. Okay, uh, this is like an error that, um, we're going to have to fix in the second part of our tutorial. But at least we have moved from, you know, we have, you know, moved from where we were before creating an account and then moving it. Because for some reason here, we have like a, a small challenge which we will fix in the next part. You get to learn debugging, of course, which is the fun part of application development. All right, guys, I hope that you enjoyed this particular tutorial. We will see in the next part. See you soon.

Hello guys, welcome to another part of our course. Uh, in this part of the course, we're going to continue working on our backend for our e-commerce mobile application. Uh, in the previous video, we stopped at a particular point where we had issues, you know, seeing the homepage after authenticating, uh, our user into the application. All right, and so, uh, if I told you also got stuck there, uh, one of the, one of the viewers of this course actually gave a comment that was very useful, and that's Victor. And, uh, uh, he actually did, uh, provide some suggestion which worked, right? So full credit to him for making this, uh, suggestion. All right, so the idea is, if I told you got stuck and then when you tried running the application in your FlutterFlow debug mode and it didn't work, what you just need to do is just click on, uh, come to where we have the column properties. And originally, it would have been here. In fact, let me just go ahead and put it like that and then do an instant reload. I I still haven't been able to, uh, come up with a technical reason why, uh, it doesn't work with this particular kind of, uh, main axis size alignment, right? So I, I don't still know why it doesn't work like that. So, but that's like the quick fix to that. If I eventually have an answer to it, I will provide it in the comment section. Yes, so this is exactly what you get to see here. It's totally white. But if you, if I told you come back here and switch this back to this particular type of alignment, it says here, use minimum amount of size on the main axis. This one says, use, um, I'm hovering on it, use maximum amount of size on the main axis, expands to fill available space. So I think it's because of how we actually did our, you know, our screen. So we use the stack here. And so the column is not, uh, the second thing after the scaffold. And so we need to like turn this on, put it like this so that it can use the minimum amount of size on the main axis. All right, so, so away from that, let's continue working on our application. Yeah, so now that I put it that, put it back there, if I go ahead and, you know, reload this, we're going to have the, uh, application working out optimally for us. All right, so if I told you, you're new to the channel and, uh, you haven't, you know, subscribed to this channel, just hit on the subscribe button and subscribe to this YouTube channel. You get to learn a whole lot of things. All right, so we're going to continue building our application and, and, um, where we stopped was basically, uh, after authentication. Yeah, so we did make our user get authenticated into the application. And then from there, we're going to have to like, you know, work on these other part. All right, so let me just minimize this a bit, reduce it. And so this is basically how this is where we stopped. So we're going to continue from here exactly. All right, so how do we continue from here? Um, first of all, let's look at our, uh, UI/UX design and see, see what we have here. All right, so this is our homepage. And then we have, um, we have some, we have like this, uh, drop-down here. It's like main, and then we have an image of the user, right? And, uh, then we have these other parts. So we're going to just work on it one by one. So first of all, what I would like us to do is to just provide some sort of padding to push this downwards, yeah, because, um, it doesn't, doesn't really look super cool like that. So if I come over here and then, uh, click on this column and close it, right, this is the particular row that houses these, uh, you know, upper section of our application. So we can actually get to, uh, put some padding. We can say 24. I like to push it down a bit because it's just too much on the top of the screen. All right, so we can just do that. And so if I go ahead and do an instant reload now, we should see something better. While that is loading, um, here we have a drop-down. And this drop-down is, it has like some functionalities, some options here: men, women, and children. And, uh, in as much as we don't have like the exact description of how this is supposed to work here, like we don't have like a, a prototype here, we're going to be assuming how it really works, okay? So, um, let's come over here and, uh, try to see how to make this work out for us. All right, so yeah, it, it we now have like a reasonable space from the top here. Okay, so, um, we have an overflow here. If I zoom in, you see it says, right, overflowed by 13 pixels. That's because, um, what we have here is not a carousel, right? And then there's a lot of extra space here. Actually, I think what we should do here is, let's make these a carousel, like, let's make it scrollable. So I'll click this to open this. And, um, what I'm going to going to do next is I'm going to go ahead and just remove the padding here. So I'm removing the padding here. It was 16, right? And then we have 24 here. So I'll just like remove it. And, um, I have forgotten the height of this. So well, it doesn't, there's no specific height, but let's see. The circle here has 56. So I think I should put it in a, in a container that is like maybe 70. All right, so I'm going to click on the row, right-click on it, and wrap the widget in a container. The container is going to have a width that is infinite. All right, and then, uh, the height is going to be 70. All right, okay, 70 doesn't seem to be a fair deal. Let's make it 80. Uh, I think this is okay. And then, um, the next thing we need to do is we can go ahead and just, uh, put some padding here. Okay, preferably, let's click on this column. You see this column here? Let's give the same padding that we have here, 24. Let's give it 24 here on the right-hand side. So everything is like uniform, right? So now we have this. And, uh, we have a container here. What we just need to do is, let's click on this and right-click on it and wrap the widget with ListView. All right, because this is what we're going to be using to make it a carousel. So now that we have done that, we need to click over here and change it to horizontal. That way we can like scroll through. All right, so if at all we have other things that we want to add here, we will be able to like scroll through them. Okay, so now we're good. If I come up over here and just like reload it, uh, I think the debug session is about ending. So I, we might have to like, uh, end the session, that's end this debug session and just, uh, run a new one. Okay, so, but anyways, it shows here that session has ended. Let's click to run a new one. Uh, and we've fixed one particular error. And then we've created another one. There's a, an error here, overflow bottom. So that simply means that the height here that we're using for this our container is not sufficient. So what we can do is just add a five to this, make it 85, or preferably just make it 90. Uh, let me click on it and try to, let me click on the container and let's make these, uh, let's go back to these, click back on the container and then let's make these a 90. Yeah, so all right, I think this will work. Uh, we're going to wait for these to load up so we can actually least see how it works. All right, so so far, this is how it looked like, right? We can just like scroll through. Uh, this is our cards. So let's leave it like that. And then, um, this is, uh, top selling, see all, and all of that. So right now, these things are not coming from the database. They are all just coming from the front-end design that we created. So let's try to see how we can, you know, uh, begin to connect some things to the backend and make sure that these things are coming from the backend. But before that, all right, we have, um, before we start doing that, if you observe, we have some, you know, bottom navigations here. Here we have some bottom navigations. And, uh, this is going to be like a bit tedious for us. That's even at all we're using the exact icons here. So I would like to use exact icons, but, uh, having them in the exact colors might be a challenge for us. So what I'm going to do is I'm going to use a different icon. All right, I'm going to use different icons for this particular navigation bar. Yeah, so, um, let's see. This is almost loading up. I'm going to close this particular one. Let's try to put a navigation bar here. How do we create a navigation bar for a system like ours? How we can do that is, right now we already have a column here, and we have this for the upper part. What we just need to do is click on the stack. All right, and then we're going to, uh, go ahead and click on, click on these, and, uh, what we're going to do is we're going to create a, let's prefer create a container. Right, make the width of the container infinite. Then, uh, if we come back here, we will see something. So the height here is like 100. Uh, the width is infinite. So we can come here and, uh, it's already 100 here. And we can click this to say we want it to be at the bottom of the page. So I push it down here. So this is it. All right, so the next thing I need to do is click on this and add a row to that, uh, container. And then the next thing I need to do is add, um, icons. So I'm going to add icon here. So this is one icon. This is going to be for our home. So I'm going to click this and then look for the home icon. So I'm going to use anything fancy that I can find here. So, um, let me see something simple. And let's go to Font Awesome. All right, so we see this one. I can go with this one, actually. So what do you think, guys? Okay, so I'll go with this one. And, um, the next thing that I'm going to do is look at the, look at the padding. So I have, um, padding of 25 here on the left-hand side. So I'm going to add a padding of 25. Okay, add a padding of 25 there. I'm going to go ahead and just duplicate this. And here it's going to give me some sort of, uh, 60 point something. But it doesn't necessarily need to be like that. So what I just need to do is, um, let me add a, let me come back here. This is going to be what? This is going to be, this is a notification. So I'm going to click here and search for notification. So, uh, what do I choose? Let's go to Font Awesome. Uh, now notification, I think I'll choose any of the bells. Let's see. Does it have any plus icon? Nothing. So I'll pick any of them. I can pick this one. This is like two add rounded. This is like add. So I, I think I can even pick this one. I prefer this one. And then, uh, I don't need to add this, uh, padding on the left. Then let me just duplicate again. Command D to duplicate. And now I have this. This is like, um, this is like, uh, I don't know what is this. Um, this is notification. And let me see what this is. This is our, this is orders, right? So this is orders. So we can come over here and search for orders, whether we can see anything like that. Okay, uh, let's say, uh, card. Well, this is going to be for cards. It's not going to work out for us. Purchase. Okay, uh, okay, we're not really seeing something tangible. So I don't know, uh, what should we use here? Okay, so we can say receipt. Receipt. It looks like receipt. Yeah, so we can use this exactly. Oh, no, okay. Let me just drag this and put it here. All right, so I'm going to duplicate this again. And, uh, this is going to be for profile. All right, so I'm going to click here and change it to profile. And, uh, here I pick this particular icon. Okay, so here for this one, I'm going to give it a padding of 25 or on the right-hand side because I want to spread them across now. So if I click on this and click this particular one until like I'm saying the alignment should be spaced even like this. This is how it's going to look like. Okay, so now that we have done this, the next thing that we have to do is make it such that we have to make some conditions, right? Let's, let's make some conditions. Uh, the conditions we're going to make, okay, so before we even continue, this is the main container, right? Uh-huh. We're going to right-click on this and change this container to a component, cuz we want to be able to use it on all the pages in our application. All right, uh, it's going to be like repeated. We don't want to be copying it and pick and carrying it all through. We just want it to be a component. We can just, you know, bring it into a particular screen that is supposed to have navigation. All right, so here I'm going to click to convert the component. And I'll call it bottom navigation. Bottom, maybe underscore navigation, navigation. Okay, so that's it. Now this is how it looks like as a component. And what I'm going to do is I'm going to just go ahead and, uh, this is going to be home, notification, orders, and profile. I'm going to have to create an app state because we're, we're going to be changing the colors of these, uh, icons based on the screen that they are on. So for instance, this one here, we have it. It's currently on notifications page. You see. And so it's currently carrying the blue, the light blue. I think this is like, is it purple? Uh, I'm not really sure, but I think I think it's purple. I'm not very good with colors. So it's going to have these bluish or purple color. And, uh, if you observe, this one is like the others. So it's currently on the others page. So whenever the user clicks on it to bring the user here, and it to show this color, while the rest are this color. Okay, so how do we do that? We can only do that by, you know, using app state variables. That means, uh, whenever user clicks on this, we're going to change that app state variable as true or false. All right, depending on what they click, right? So if the user clicks on this, it's going to make this one true, that the app state variable for this one true, and the rest false. So that means this is going to have a color, the blue color, while the rest will have gray color. So this is where you click to change to create the app state variables here, where we have the app values. I'm going to click here to create the app state variable here. This one is going to be called home. And the variable type is going to be boolean. It's going to be true or false. And it's not going to be, uh, least or it's not going to be persisted. I'll click on create. I'm going to create another one. It's going to be called notifications. Notifications. It's going to be a boolean again. And I'm going to create it. Then I'm going to create another one. This is going to be called orders. And it's going to be a boolean. And it's going to, I'm going to create it. Then this one is going to be called, uh, profile. And I'm going to click on, I'm going to make it a boolean. And then I'm going to create it. All right, so the next thing I'm going to do now is when the user clicks on this, all right, I'm going to go ahead and add an action to it. All right, so don't forget, this is the backend side. So we're basically doing backend related stuff. So when the user clicks on this, I'm going to go ahead and create an action for it. So, uh, on tap is going to be an on tap action. And I'm going to add the action. It's going to be a state management kind of action. And it's going to be updating app state. I will click here to choose the app state I want to update. So I want to update home. Whenever the user clicks on that, I want to update, update the app state, uh, variable called home. I want to set the value as true. Okay, and then simultaneously, I will be setting the remaining values as false. So whenever home is true, the rest will be false. That's like the idea, that's the logic behind it. So I'm selecting all of them and then making the other ones false while home is true. Okay. And, uh, another thing that I now, now that I've done this, I'm just going to go ahead and copy this action. Okay, all of this. And I'm going to click on this one, click on add action, and then I'll paste it. But I'm going to change it here. When the user clicks on this notification part, it's only the notification that is supposed to be true. So I'm going to turn this as false, while notifications will be true, and the rest are going to be false. I'll come here to the, uh, orders page. I'll click on this and click paste. Then of course, this is going to be done as false. It's only the orders that will be made to be true. Okay. And I'll come here to the one that is called profile. I'll click here and click to paste the action. And the home is going to be false. Everything else going to be false, except the profile, which is going to be true because that's what is been clicked. All right, so now that we have done this, how do we use it? Now we are going to go ahead and click this to, uh, click this, come back to properties. And then here is where we're going to play with it. So I'm going to first of all, come to where we have the icon. And, um, let me click on it again. All right, so this is the color. I'm going to click this to disengage it so that I can see the real color and copy it. And I'm going to come back here. When the user clicks on this, right, I, when the user clicks on this, automatically, yeah, the the the app state variable is being turned to true. So we're going to use that value of the variable to change the color of these icon. So we're going to click here. All right, and then we will say, um, we will come here to conditional value. And so we will now create an if and else statement. So if we're going to click here, and then we're going to click set condition, single condition. All right, and then we will click, uh, the first value. And then we will add, we'll go to app state and look for home. If the home is equals to true, all right, and then I'll click on confirm. If home is equals to true, then fix this color. Otherwise, I'm going to click on this one, uh, click on this and copy this color. This is going to be 50% of whatever color it is. So I'm going to paste this color here. And I'm going to come over here and then kill it to 50%. All right, so that's it. Then we can actually, you know, be copying this. So if this, if home, uh, the app state variable home is equal to true, then put up this color. Otherwise, please put it this. That's like the idea. I'll click on confirm. All right, so now that's like the idea. Now, now I'm going to go ahead and click on this and just, uh, come here and copy this variable. And I'll click here and I'll just do the same thing here. I'll just click here and paste it. Then I will change the value here. This is not home. This is for notifications. So I'll click here, click here, click here, and change this app state to notification. Confirm. Confirm. And that's it. And I'll go confirm. Then I'll click here, do the same thing for the orders. Click here and paste it. All right, then I will click on first value. Change this home to, uh, orders. And confirm. And confirm. And then this one, I'm going to click this, go back to properties, click here and paste it. Come here, come here, open it. And then we will come over to profile. And everything is good now. All right, so we have set up all of this. And, uh, if we come back to where we have the homepage, uh, let me see. Let's try to connect everything now. So, um, here we have the, the homepage. Okay, so this is automatically here already. So what we're going to do is, what we're going to do is, um, we're going to go ahead and just, uh, let me see. Let's come back to that homepage. For some reason, something is happening that I can't select every other thing. Uh, okay, this is not really good. Yeah, it's not super good. Uh, if we come back here, it's not very good. It's not supposed to be like this because I can't select anything else here. Uh, let me click here to go to the, uh, component. If I click here, let me see if I can manipulate it. For some reason, I can't manipulate it either. Aha, okay, so here I can manipulate it. Uh, let me see here. Nothing is being allowed here. So if I come back to pages and come back to home, where do we have home? We have home here. It's still not allowing me. Okay, so I think we will have to fix this at the end. But let me just show you how it works for us. So, um, here we have it for this screen. All right, if we go ahead and, um, let me see. We have, um, let's just connect it at once from here. Let me click to connect it here. So when the user clicks on this screen, we want the user to, all of this to happen. And then we also want the user to be taken to the home screen. Navigate the user to home. Okay. And it's going to be instant. All right, that's it. Then for this one, when the user clicks in it, we want you to, you know, navigate the user to Notifications. Notifications details, notification splash. This one, instant. Okay. Then, um, let's see here. This is going to be, uh, navigate the user to, let's see, navigate the user to orders. Order splash, right? This. And we're going to say instant. All right, then this one is going to be navigate the user to, uh, navigate the user to profile. Profile, or is it view profile? Where do we have profile? Uh, okay, so for some reason, we didn't have profile. Okay, let's see here on the design. So this is going to be, uh, for some reason, I can't find the profile part. Okay, this is it. What did I call it? Settings. Okay, so we will just navigate the user to settings. Settings here. Okay, so we make it instant. All right, so we have it like that. Uh, let me see. Uh, let's just, uh, let's just experiment and it, yeah, let me do an instant reload here so we can see that it's working. After that, I'm going to remove that for now while we work on the page, then we will fix them back when we are testing the application. Okay, I really hope that you're following and, uh, remember to like the video and subscribe to the channel as well. Okay, so we didn't have that error we had before here because we had increased the height of the container that houses all of these by to to 90. And so we're good with that. And then here we have, uh, the bottom navigations. So if you see here, if I click on it, it turns into this color. We don't have to, we have to make it such that you don't necessarily need to click it. So if I click on this now, it brings us here. Right, I can see the other ones because this screen does not have the navigation. So, um, I think we can just add all of them. Add it at once. If I come here to, I, I don't really want us to do that yet. So I can just click here to go back. And then if I click this, it brings us here, right? And well, it still shows this here because that is being true. Okay, so then we have this particular, uh, profile screen. Yeah, we're going to try to fix all of this with time. So, yeah, now that's actually how to set up all of that. I can just, uh, in fact, okay, let's do it at once. So we have a, let's go to settings. Um, not, let's go to notifications first. Where do we have that? Um, so we have notification splash, this one. So we have this, uh, if you come here, you see that that's where we have the, uh, where is it? Yeah, so we have it here, here, this is it. And, uh, so we can just put it here. We come here to the widget tree. And, uh, this is a column, right? We will just go ahead and, uh, you know, uh, it's best that we, if we go ahead and just add this, like I click to add a child to the widget. And we come here to search for the component. And then I'm looking for the component that is called bottom navigation. And then I put it up like this. If I click here to tell it to go down, it's not going to go down, right? So I'm like trying to say it has to stick to the ground here, to the floor here, the bottom of the page. Doesn't want to go down. So this is not the way to do it. So I'm just going to delete this. And I'm going to right-click on this column and wrap the widget with a stack. All right, then I'll click on the stack. And click on the component. And I will say bottom navigation. And then now it stays here. Okay, all right, so, um, this is how to do it. And, um, okay, so that's actually how it is done. If we come over here and look for orders, order, orders, where is it? Okay, let's go to settings first. And then come here, click on this, right-click on it, wrap the widget with a stack. And then we click on the stack, come on the component section, and add this there. There you go. That works. Then, and, um, the next thing we need to just do is we can go back to orders. Uh, where do we have order, order splash? Okay, this is it. So we can come here and, uh, click on this, click on the column, close it, right-click on it, wrap the widgets in a stack. And then we click on this, click on the component, and then bottom navigation. So if I come back here now, um, if I come back here, uh, okay, so let's see. Let's push it back up. So if I come here now and then just do an instant reload, and I will just look at, uh, how it looks like right now. Then from there, we can continue building. Okay, so I hope you're enjoying this. And that you're learning a whole lot. So this is it. Now, this is how it looks like. If I click this, we see like a couple of drop-downs here. And, uh, this is not coming from the backend. Nothing. This is just everything just not coming from the backend yet. So here, if I click on this, well, don't worry, we'll work on that. Then here brings us here. And then here brings us here. And then here brings us here. You see? So this is just pretty cool. It's just, this is how it's supposed to be. All right, I hope that you've learned a couple of things in this particular part of the course. What we did was address the error we had in the first part of the backend. And then we worked on fixing a couple of other errors. And then we now worked on the bottom navigation. So we'll get to see you in the next part of the course. See you soon.

Hello guys, welcome to another part of a course. Uh, this is another part of the course that has to do with the backend. Okay, so, um, we did some, uh, navigation functionality in the previous part. And so this particular, uh, aspect of our course, we're going to be, uh, you know, focusing on what we have on the homepage here. And then from there, we can just like walk through it. Okay, so, um, let's look at it. If we go back to the the homepage, uh, for some reason, we can't click on other things here in the in the homepage, right? And that's because of this our bottom, this our action here, which has somehow, uh, stopped us from seeing the rest of the screen. So what I'm just going to do is I'll come here to the widget tree and I will just take off this bottom navigation. I will add it again, okay? So I'll just click on it and remove it so I can see other things to tap. All right, so here we have, uh, men. And, uh, we have a, this is like a drop-down that the user can click to say, Okay, I want to search for stuff for men, stuff for women, stuff for children. So, um, we will try to see how we can set all of that up. But this is for new ins. All right, and this is for top selling. All right, and, uh, that's it. So here we have, um, let's look at the, uh, you know, the homepage. So this is for top selling. And I think this, if you click on see all, you should be taken here. So let's add that, uh, let's add that navigation quickly. All right, so here we have see all. And, uh, let me see. This is like show by categories. I think maybe I must have named it like that. So let me come here and and add an action and say navigate to show by. Do we have that? Yeah, show by categories. So here we have instant. All right, so it's just going to take the user straight to show by categories. All right, so then, uh, this is for here. So Eva. So we come over to, uh, okay, we will do it one step at a time. And then this one is just like all the categories, right? So let me see what the UI designer tried doing. So when the user clicks on this, all right, it's

Going to take the when the user clicks on it. It's going to take the user to this particular section. So this is like the section where they get to see every single thing. All right, so, um, okay, what I'm going to do here is going to be quite, uh, direct. So the user clicks on this and, uh, goes to the other screen. Okay, okay, okay. So these are all categories, right? And, um, you click on these, it takes you to the other screen. And, um, okay, so this is what we're going to do. Uh, first of all, let's look at, uh, let's come to this place. We have, have, uh, categories. So when the user clicks on this, we want the user to be taken to this particular screen. So let's first of all try to identify that screen. Um, I don't know how I named it, uh, but I'm sure I didn't name it like this. So let's just go ahead and click, uh, each of the screens and see. Uh, this is not wish list, uh, card is not wish list, favorite, no, uh, hoodies. Okay, so this is, I think maybe this is the one we called it hoodies. Okay, so this is going to be, um, categories, uh, categories, specific categories. So I think I could, I could just like, you know, rename this to specific categories. So let's say specific, uh, categories. Yep, okay, so like this. So we're using, we're making this like a specific cate. Okay, so this, I'm going to add an action to take the user back. Okay. And, um, this is going to be like hoodies and all that. All right, so let me see. So the user comes to the user comes to home. All right, and clicks on this. All right, and it's going to be navigated to, uh, let's go to navigator to specific, specific, uh, where is it? Where specific categories. Okay, so we can say instant, it's navigated to specific, specific categories. And then, uh, all of this is also going to be, you know, navigated to specific categories. Yeah, so this is going to be navigated to specific categories as well. So let me just copy this action. All right, I'm going to copy this action and I'm going to give it to each of these columns. All right, just watch what I'm doing. And, uh, I'm going to click on this one as well and just paste it. I'm doing it all of them. So when the user clicks in this, uh, it just takes the user to that, uh, specific, uh, category screen. Now, but what is going to happen there in that particular screen is going to be the most exciting thing. We're going to come back to this. So, but before we continue, let's go ahead and create a the section for, for this is like top selling clothes. So let's say that that this is like clothes, right? Uh, let me see how the, yeah, so this like, well, not like stop selling clothes. So let's just call these, uh, uh, inventories, right? So let's, let's come here to the Firestore part and we're going to create a new collection, which is like a table where we're going to store all these things. So we will call it inventory, inventory. And I'm going to click on create. So this inventory is going to have a couple of details. So as you can see here, there's an image, there's a title. So let's just say, uh, image, price, inventory name. So let's come here now and create the schema for our inventory. So I'm going to click here and I'll call it, uh, uh, inventory name, inventory her name. And, uh, this is going to be a string. All right, this is going to be, we can call them, let's, we can just say image, uh, or should we just be very specific? Let's say inventory, uh, image. Uh, let me just copy this part so we can always use it. Inventory image. This is going to be, uh, image part. All right, this is the variable type. You have to be very careful. And then this, this one is going to be inventory price. This is going to be a Boolean. All right, sorry, not a Boolean, please. It's going to be a double. All right, because like this now we have like point something something. So, yeah, so a double. I'm going to check. And, uh, what else do we have here? That's all I can see. Let me see if I told we have more descriptions. Uh, so, yeah, so we have all the things too. Exactly, we have all the things. So, um, uh, let me see, let me see. Okay, so this is like a carousel contains all the images. All right, so, um, I can also create another image. So inventory image, this is inventory image. I can say, uh, inventory image, uh, uh, two. All right, it's going to be another image pa. And then inventory image, uh, let's see, inventory image, three. All right, that will be all. And, uh, image part. And there you go. Okay, so then, uh, we have like the size here, like we have size, we have color. Uh, but we will come to all of these with time. So, but let's put up the ones that we can really see. So we have here, uh, uh, description. All right, description. Uh, I think that's that will be all for now. So let's say inventory description. Okay. And then it's going to be a string. There you go. Uh, what else? This one is like ratings. So we will come to this. Uh, so let's say size. Okay, let's come here to inventory size. And this is going to be a string. Okay. And then, uh, inventory color H. Okay, so let's say inventory color. This is going to be, um, well, we can just use a string, actually. We can use string, it will still work, but, uh, oh, inventory color, uh, oh, inventory color string. And there you go. Okay, so, so now we have a couple of things. And then the quantity. Now, this one is what you manipulate. It doesn't come, uh, it doesn't come like that, right? Okay, this is also something that you manipulate. Actually, you choose the colors here, right? Okay, so we don't necessarily need to put the inventory color. We don't necessarily need to put the inventory size. This is going to go in for our orders. All right, so here we have a couple of things and we can begin using them. All right, so, uh, if we come over here, right, all we just need to do is, I'm going to delete one of these columns. I'm going to take this one out. Delete this as well. Uh, click on this, delete this. Click on this, delete this. All right, so that's about it. Now I have this. And, uh, this is my list view. So I'm going to use this to query what comes out of here. So I'm going to click on this. All right, this is back in now. Uh, I'm going to click this. I'm going to click to add a query. Query collection. I'm going to be querying the, the, the, the table, the collection called inventory. I want to produce a list of documents. And, uh, so, and then I will just click on confirm. All right, now it's going to show up like this. And I can go ahead. Let me click on the widget tree and really confirm how all of this works out for me. This is where we, we have the main container. So I can add a padding here. I can't remember the exact padding. So let's come over here to where we have, um, yeah, this. I'm going to click on this. Click again. Hold on, Alt. I see it's 12. The padding here on the right will be 12. Okay, so we have this. This is an icon. Okay, so this is our image. I'm going to click here. I'm going to click, uh, come down here. Instead of, you know, at first when we were working on the, the application, we were using images from the design. So now we are walking on back end and so we have to pick things from the database. So here I'm going to be picking things from the database. So I'll change it from image type from assets to network. And then I will click over here and I will see inventory document. I can only see these because I've already done a query. All right, so just follow it the exact way I've been doing them. So I'll click on inventory document. I will see inventory image. All right, so I'm picking this inventory image. And, uh, let's come here to, uh, our browser and say, uh, uh, placeholder [Music] placeholder placeholder, uh, image, image. Let's say placeholder image. I'll come here and click on images. I want to just get a a a sample placeholder image. I'll pick this and I'll right click on this and copy the image address. And then I'll bring it here to Flutterflow and I'll click on here and paste the default variable value here. And I'll click and confirm. So that way it's going to just put it up, put it, put up an image here. All right, so we can see something. Exactly. Okay, so now we have this. And, um, we can come over here to this one. Scroll up and click on this. Go to inventory document and say inventory name. Okay. And, and, uh, then for this one, we will just click on this and say inventory document price. And then for the available options here, we will say number format. And here on this side, we will change it to custom, specify format. And we will turn this on and say display as currency. And confirm. Okay, now it's going to appear like this. Now, somehow we have been able to put this up as something coming from the database. Okay, so let's come here first. Okay, we still have our session running. If we go ahead, let's come back here to our, you know, Firestore and click on inventory. And then for this particular part, we need something called top selling. All right, top selling. You see here, top selling is going to be a boolean true or false. Okay, why are we doing that? Is because this particular section is supposed to be top, stop selling. And so when we made a query, when we made a query here, okay, we have to filter it. So I'm coming back to that query we did to produce this. I'm going to add a filter and we're going to say, uh, top selling is going to be equal to, uh, true. So that's exactly what is going to show here. Then, uh, now that we've gotten this, we have another one here. So instead of just, you know, putting up exactly what is this, this is supposed to be new in, right? So, uh, we can come here, click on inventory and change and put another, uh, variable, variable called new in. And we can say, uh, it's going to be boolean as well. And we check it. So here on this part, what I'm going to just do is this is almost similar to this. I'm going to just delete this. Okay, uh, let me click on it. Delete the entire row. Okay, then click on this, uh, the, the row here and copy this. Okay, then click on this and paste it. Okay, now I will go ahead and click on this list view that I queried. I will just copy the query. All right, then I'll click on this list view and I will go ahead and just, uh, paste it. I'll come here, then I'll paste it. Confirm. Paste it. That way. So if I paste it now, we had an error before, but it's gone now because we have pasted the correct thing. So if I come here, this was, uh, the query here. Let me do, uh, another filter here. It's going to be, uh, I'm going to change it. Top selling. It's not top selling. It's going new in is equal to, uh, true. New equals to true. So like that. So new in is equals to true. And I'll confirm this. So this is it. We have been able to implement this. And, uh, uh, the next thing we need to do is just this set apart. So let's see how we can get it done. Now, when the user clicks on, uh, see all for this categories, brings the user here. All right, yeah, brings the user here. And then when the user goes ahead and clicks on hoodies, brings the user here. All right, oh, I think I mixed it up, actually. Yeah, I think I didn't mix it up. Let's see. Specific categories. Uh, I mixed it up. I mix it, it up. So let's come here to specific categories. Ah, yeah, yeah, yes, I mixed it up. I mixed it up. Okay, so, uh, let's come over here to where we have the, where we have the home. Okay, so when the user clicks on this, uh, no, no, no, no, we're supposed to take the user to these shop by categories. Yeah, but what did we do? We took the user to something else. Okay, this was see all. Okay, hold on, hold on a minute. When you click on see all, it takes you to shop by categories. Okay, yeah, we did the correct thing. And when you click on this, specifically takes you to the other one, shop by categories. This is okay. It's correct. All right, so when the user clicks on this, takes the user to, uh, uh, specific categories. This is what we're going to do. I'm going to copy the whole of this list view. All right, I'm copying the whole of this. And I'm going to go to shop by categories. This, no, uh, I'm going to go to specific, where is it? Specific categories. This one. I'm going to click on this. R, I'm going to delete it. All right, I'm going to click on this list view. I'm going to delete it. And then I'm going to paste this one. All right, now the user goes ahead, like I'm just pasting. This is exact kind of design that we had in the previous side. We just needed to like change some things. Uh, yeah, it's exact same thing. Okay, so I have this here. And what I'm going to do next is I want a situation whereby the user, when the user clicks on, uh, clicks on hoodies, right? I wanted to update a particular app state called hoodies is to true. All right, yeah, because, um, the, the details that are going to show in this screen that is called, uh, where is it? Specific, uh, where is it? Where is it? Where is it? Specific, okay, so now I'm missing it up. Where is the specific page? Okay, specific categories. The details that are here are going to be dynamic. It's going to only show when you click on hoodies, it should show only hoodies. All right, so how do we do that? We're going to have to filter this particular list view. If we come over here now, we already, we have to filter it. Okay, we were using top selling is equal to true. That's not the case anymore. We're going to come over here to app state and then we're going to create some app state variables. So let's come here to home and we're going to create variables for hoodies, shorts, shoes, bags, and accessories. So I'm going to come here, click to add a variable called hoodies. And it's going to be, what is it going to be? A boolean, true or false. And we're going to say, uh, accessories, accessories. And this going to be boolean. Check. Uh, we're going to say shorts is going to be a boolean. Create. Uh, I think we have had another one, uh, shoes and bags. So we're going to click here, create for shoes. It's going to be boolean. And we're going to create another one for bags. It's going to be boolean. All right, so like this. Now I have, um, I've created those app state variables. So when the user clicks on this, I want them to, I wanted to update the app state variable to, oh, okay, so I think this actually works, but what we just did is going to know that's like was creating like a multiple number of app state variables such that when the user clicks on this, takes them to this particular place and it filters them by that. But we can actually, uh, do it the other way around. Okay, yeah, so we can do it the other way around. Instead of creating a lot of this, we can just call it category. You know, we can just create one particular field and make it string and we say category. So, uh, let's come over here and just delete this. Let's delete all of them. Uh, let's delete the hoodies. Hoodies goes. Accessory goes. Okay, um, short goes. Shoes goes. We would have done it like this, it would still work, but I would want us to do something different. Profile goes. Uh, oh, not profiles, please. Bags, bags goes. Yeah, so we have this. Okay, so let's come over here and just, let's create a variable. The variable is going to be called categories. Categories. All right, it's going to be a string. And it's going to persist. All right, yeah, it's going to be a string. It's going to persist because we want it to still save the value that we have even after we have opened a new page. Otherwise, where we are going to, we won't be able to see what we clicked. So I click on create. And so when the user clicks on this, what we want to see is we wanted to update that, uh, app state variable called categories to the value here, hoodies. All right, so I'm going to come here, click to, uh, uh, add another action. And it's going to be state management, update app state. It's going to update this field called categories. It's going to set the value to, I'm going to use small letters, hoodies. All right, so hoodies. Now, let's, uh, it's going to update it to hoodies. And, um, this one is going to update it to, let's click here and add another action, state management, update app state. This is going to update it. Set the value to shorts. I'm using small letters. And then here in this one, it's going to update that same, every single time it's been clicked. All right, so it's going to update the, the app state called categories with bags. For for this particular one, bags. Okay, oh, for shoes, actually. Shoes. Shoes. And, uh, for this one, we're going to update the app state variable. And then we're going to, uh, set it as, uh, accessories. Okay, accessories. Okay, so how do we use what we've just done? So how we're going to use it is we're going to come over to the Firestore, go to inventory. And then we will say categories. So whenever we're creating an inventory, right, we're going to set the category type. So in this case, we are saying string, the category type is going to be a string. And it's going to be, uh, it's going to be filtering it based on that. Okay, so, uh, what we're going to do now is we're going to take, we're going to when the user clicks on this, it takes the user to that screen. So let's go to that specific categories. And then here, all right, in the list view, we're going to filter it by what? By, um, the top selling. Sorry, not that one. The categories must be equal to the app state value for categories. Okay, that's like the idea. Okay, so then for this one, this particular place here, what we're going to do is we're going to click here and [Music] um, okay, now we should have actually made these capital letters because of this scenario. Okay, so let's come over here and say, uh, let's come here to app state. Yes, yes, yes, yes. Let's go to non-app state. We want to do a combine text. This is going to be, it's going to carry the hoodies. All right, and then, uh, this is going to give us some space. And here is going to give us a a bracket. And this is going to give us, um, the, the value of the, the number of hoodies in the inventory. And this is going to be the closing of the bracket. And that's it. So, but now if I click to to do this, uh, that's what we have here. But we don't have those information. Yeah, for this particular one, now we're going to, this particular hoodies, we're going to pick it from the app state. It's going to come from here, categories. All right, then, uh, there's a space here. Then here, the number here is what we're going to have to fix. We will fix that up. Uh, okay, so now we have this. So, uh, let me see. Do we have some? I'm going to end this session. Uh, I'm going to click to create another one, a new debug session. Okay, so let me close this one. Wait for this one to load up so we can actually take a look at it because we're going to, we're going to soon start testing the application. So we have, um, we have, uh, let me come back here. Go back to home. Here we have home. Uh, let's see. Okay, so this is it. Let me give some sort of padding to this row. If you observe, uh, there's some space here. Okay, there's some space here, like 16. So I'm going to give some padding here and say 16. Okay, yeah, just to push it down a bit. Okay, so we have that. And, um, let's say, uh, okay, so here for this one, uh, if we come over here and, uh, let's add in the inventory. I'm going to say clothes type. Clothes type. Type. This is going to be, uh, either it's for men, it's for women, it's for children. All right, so that's for clothes type. And, um, so that's it for that one. And, uh, let's see, uh, that's what we're going to do from this side. Okay, so, um, H, okay, we will come back to this particular part. We were still like working on this homepage. So the user clicks on this, takes the user to that part. Okay, we're good. We're good. We're good. We're good. We're good. I'm looking at what we can do. Aha, okay, so, uh, let me see. Let me see if we query these. If we query these, okay, actually we can. I'm trying to figure out some other things, but let's see what we have done so far. Let's, uh, let's just try to check out what we have done so far. We might not see anything showing up for us in the app. So we have to come here to Firestore, go to inventory, click on manage content. And now we're going to add up some few things. Let me look for, let me look for, uh, some clothes. Let's say, um, let's say, uh, trousers. Trousers. Trousers for sale. Uh, let me come here to images and look for trousers for sale. Um, okay, so, okay, we didn't even have anything for trousers like that. Did we have stuff like that? We had shorts, okay, and hoodies. Okay, so let's go for hoodies. So let's say hoodies, hoodies for sale, hoodies for sale. Okay, good. So we have hoodies for sale. Let me click on this. I like the image. Uh, this is it. Um, let's go for this other red one. Okay, for some reason, it's not showing me the high resolution of their images. I don't know why. Okay, so I'm just going to copy this one. Copy the image address. Okay, and, uh, this is my FlutterFlow content management system, CMS. This is where I can add things into my application. For some reason, this is not loading up. So I'm going to do an instant reload and wait for a couple of seconds and watch it load for real. Okay, so this is me watching it load before even going to another screen. I'm going to wait patiently to see it load. Okay, so now it loads. And as you can see, uh, it shows me here that, uh, Firestore security rules error. And list view missing or insufficient permissions. So what we can do to fix that is we will come here to settings. Uh, then we will come over here and we will uncheck this. We'll make it such that everyone can create, everyone can read, everyone can write as well. Okay, that's like what we need to do. And then we are going to deploy the new Firestore rules. Deploy. And then after deploying it, it says deployed. We will come over here and just do an instant reload. Wait for a couple of seconds. And that error would have been gone. Okay, so that's how we are doing doing it. And, um, the next thing that we're going to do right now is we're going to try to set up some few things. So it's still loading up here. It doesn't see anything from the database. Right, nothing is there. So we're going to use a CMS here to add things. So I'm going to come to inventory and I'll click to add a document. So this is it. Let's just say, um, this is a generic hoodies. Let me just call it generic hoodies. So let's say, say generic hoodies. That's the inventory name. The inventory image. I'm going to click it. I'm pasting the URL I copied. Inventory price, $348. I don't have, I'm not putting another image yet. Inventory description, uh, I'm just going to copy this one. Okay, just copy it and I'm going to paste it here. And in the description, okay, and, uh, is it a top selling? Yes, I want it to be a top selling. And I also want it to be a new in. Okay, uh, then I'm going to categories. This is where where we want it to be like hoodies or shorts. So in this case, it's going to be hoodies. Okay, hoodies. So, um, yeah, hoodies. We can actually change this thing. So let me make it capital letter H, hoodies. And clothes type. This is going to be for man. Uh, and then I'll add a document. Okay, so if I come over here, I'm going to see the item. So it shows here now. It shows my top selling. If I come over here and then click to edit it, change it from new in, like turn off this one. I will no longer see the new in. So you see here. All right, so that's like I just wanted us to see what what is happening there. I'm going to check it in. So it's going to appear in new in. And, um, the next thing that I wanted us to do is we have changed something. So we need to go fix it. So here when the user clicks on it, it's going to be capital letter H for hoodies. Yes. And then this one is going to be capital letter S for shorts. And this one is going to be, uh, capital letter S for shoes. And this is going to be capital letter B for bags. For bags. And this is going to be capital letter A for accessories. All right, good. Now, why am I doing that? I'm doing that because we have a screen that says hoodies and it puts the number of hoodies, right? And it's capital letter H. And we're using the what we are storing in the app state. Okay, so that's why I'm just fixing it like that. So when the user clicks on this, well, we have not worked on that yet. So let's work on this one. So if you come over here to the test mode and then you click on these hoodies, it brings you here. It brings you here. It shows hoodies. All right, but nothing is showing. So let's go ahead and, uh, reload it because we changed the, the name. Yeah, so, um, it didn't show anything because initially it was small letter h. Yeah, remember we did something here. Uh, we did something in the site called the specific categories. We said that the, the categories, all right, the, the value of the categories must be equal to the value of the app state categories. All right, so the names must match. Okay, so now we can click here and it needs to show. All right, now this is proper noun. If I can click here, it can go back. Click here, it shows. Click here, it goes back. All right, so now we have this. And if I click here, it's not going to show anything because, but it's right here, shorts. But it's, you know, uh, here, shoes. Uh, here, bags. Uh, here, accessories. Okay, so, but now how can we do the, how can we go ahead and fix up the, the part where we want the, uh, we wanted to show the count? The, you know, this correct count? Let's try to see how we can fix that. So if we come over here to the home, all right, if we come over here to the home and then let's say we query this home. All right, let's say we query this home and, uh, categories, categories. We can call it categories count. So let's say I come here and I add a backend query. Uh, will that work for this one? Okay, okay, so I think that might not really work out. Let's go back to, uh, uh, categories. What it, shop by categories? No, no, no. Um, specific categories. Yes, this one. So we have a value here. We have a value here. And, um, what I can simply do is I'm going to come here to the, I can use my scaffold, right? Yeah, I can play around with it like this. So I can use my scaffold and I can query my scaffold. I'll query my scaffold. I'm looking, I'm going to query a collection, uh, called inventory. I need, um, I want to do a count. Okay, but I'm going to filter. So the count that I'm filtering, I'm trying to figure out the, the filter here is the, the categories must be equal to the, the app state, the value of the app state categories. Okay, like this. So I want to just do a count. Okay, so now I have done a query, but it's not going to display anything. It's just counting. And so here I can come over here on the, on the, this particular part and click here and come to where we have this number. Instead of this number, I'm going to make it dynamic. I'll click here and I'll see inventory count. I pick it there. And then I can just confirm like that. And confirm. So now it's going to show me like this. If I come over here and just do an instant reload, it should be able to show me one. All right, that means if I have multiple, like two things, it's going to show me two. So, um, while this is loading, let it just load up first so that we can see it count as one. So if I click here, it's going to count to zero. All right, there are no shorts. So it's zero. So if I click shoes, then there are no shoes. If I click bags, there are no bags. If I click accessories, there are no accessories. If I click hoodies, there's one hoodie. So this is it. It shows here one. All right, so if we come over here and, um, let me add another inventory. Let's put another item that, let's just say, um, bags. Bags for sale. Sale. Okay, so, uh, which bag am I going for here? I'm not sure what bag to go for. Okay, I like this very simple looking bag. I'm going to copy the image address. And then I will come over here and, uh, let's go to the image first and post this. And then here I'm just going to copy this text. It's called Farfetch. Well, I think so. So I will say Farfetch bag. Then the inventory price, three, uh, let's just say 21. And I don't have images for this one. Inventory description. I'm going to copy and paste this. And is it a top selling? Uh, it's a new in. We can just say it's a top. Both of them. No problems. And, uh, categories is going to be bags. Capital letter B. Remember bags. Clothes type. This is going to be women. Yes. So this is going to be women. And I'm going to add the document. So if I come over here now and, uh, let's say I go back here and then I click on, uh, bags. Now I'm going to see a bag. You see, I see a bag. If I go back, I click on shorts. I don't see shorts. I click on bags here. I see bag. And it's just one bag. And hoodies is still one hoodie because it's counting based on what I had filtered. Okay, and it can't make any errors. All right, so now I did this. And, um, so we have this. I think we can just, uh, uh, populate. Let's get another thing. Let's say, um, shoes. Uh, let's say shoes for sale. Shoes for sale. Okay, uh, I think I can pick this one. Yeah, okay, yeah, it shows me a good picture. Copy image address. I'm going to click to add a new document. Click this and paste this here. And this is, um, okay, I can't pronounce that. Let's click on this. This is the name of the shoe. So I'm just going to remove this and say shoe. All right, and then inventory price, 567. No, 56 T. And, uh, inventory description. I paste this. Uh, it's going to, going to be a new in. Uh, category is going to be shoes. Type men. Small letters. And document. Okay, so I have ders for this part. I can just say shoes. Now, so I can see shoes. And for some reason, we can see like three items. These are three, all new ins. But we have only two top selling. All right, so if I click here, it shows me, it's supposed to bring me here. But for some reason, it doesn't. Wow. Okay, so we have some sort of fail there. Okay, let me see what happens there. Let's come over here to where we have home. All right, come here. It takes us to shop by categories. Shop by category. Shop by categories. This is it. And for some reason, let me add an action to go back first. For some reason, this is not showing. Oh, okay. The same problem we had in the other side is because of how I arranged this. So we can just add, um, we can add a padding here, 24. And then I will click on this and just change. I'll remove the spacing here. Remove it. Then this one, I'll remove the spacing here. And this one, I'll remove the spacing here. And this one, I will remove the spacing here. And this one, I'm going to remove the spacing. Just, I mean, the paddings, you know. So I can now come over here and just, like, uh, reload it. I'm going to click to do an instant reload and see if I can see that particular screen. Okay, so, um, in a couple of seconds, we will see how it looks like. And, uh, so far so good, we have actually, you know, built something tangible. Right, I hope you're really learning and then you're enjoying the session so far. So remember to subscribe to the channel and, uh, you know, do something really good too. So here we have this. And I can click on the, see all. Okay, it's still not showing. That's not, that's okay. I'm going to go ahead and apply that fix that we used the last time. Uh, let's come here to the main column and change this to main axis alignment. Okay, so I can click on this and just do an instant reload. Yeah, and then that way we should be able to like, uh, see, uh, this working out for us. Okay, so waiting for this to show up so we can properly see how it looks like. Okay, so let's see. I think it should show now. Okay, yeah, this actually works. Okay, so this shows up. And, um, okay, so we're good. All right, so we have this. We have this. And this is looking out. This is looking good. So far. All right, I believe you can agree that it's looking good. Uh, let's come back here and just arrange that screen that says shop by categories. Uh, where is it? Shop by categories, right? Um, let me come here. Click this a bar. Oh, this is actually app bar. So shop by categories. I don't know why it's bringing it all over here like this. I don't know why. Okay, just let's leave it there. So we have this now. If the user clicks on this, it's supposed to take the user to the other screen. So this is what we're going to do. I'm going to go to that screen, the home screen here. And, uh, I'm going to copy this, the actions here. I'm just going to copy them. Like I'll click here and say copy action chain. Okay. And, uh, I'm going to come to shop by categories. When the user clicks on this, I'm going to add an action. I'm going to paste it. Paste failed. Make sure to paste a single action here. Oh, it's saying a single action. So I'll click here and, uh, on tap. I'm going to paste like an action chain here. Okay, so it's going to show it's going to send the person to hoodies. Okay, good. Then this one, I'm going to click here. Click to open action. On tap. Paste action. This is going to be, um, this is going to be, uh, what? This is going to be, uh, oh, accessories. Okay, it's not the same thing. So let's say accessories. Okay. And, uh, this one is going to be shoes. So I'm going to click on this. On tap. And paste. This is going to be shoes. Okay. And for this one, this is going to take us to bags. On tap. And paste. This is going to take us to bags. And, um, this one is going to take us to shorts. Open action. Click on tap. And click on paste. Take us to shorts. All right, so here we have successfully, you know, uh, made it such that the user can click here and then go to another screen. So let's go back to home and see what's left here in the screen. Okay, so, um, what's left is not much. It's to do the search part. We will do this eventually. So right now, we have just walked on the home and the subsidiaries of the home. Okay, so I think that's about it. And I hope that you've learned a whole lot so far. Let me just do an instant reload this for this so we can see what we have done and what is left. Okay, so, um, don't forget to subscribe to this channel for real. Uh, this is one of the ways that you show like a big support to what we're doing here at No Africa. So, um, where did we stop? If you click on see all, it brings you here. You click on hoodies, it brings you to hoodies. Cool. It brings you accessories, zero accessories. Shoes, one shoe. Uh, bags, one bag. I think, right? And then shorts, no shorts. Okay, so so far so good. We have, you know, done this interestingly. And, um, I think the one thing that we're supposed to do now is going to be like to add up these. So let's just quickly fix that up. So here, this is for the drop down. When the user clicks on these, uh, let's go ahead and come here and say, um, what did we call that? Clothes type. So let's create an app state variable called clothes type. It could also be page state. So let me show you how to create a page state. It's just also going to just make things interesting for you. So, um, let's come over here to the widget tree and click on the scaffold. Then the main scaffold. We want a situation that instead of creating an app state variable, which is available app wide, we want it to just, the, we want to create a variable that will, you know, only be present in this page. So we come here to the page state. And, uh, I have to click on the scaffold first before I can see this. I'm going to click to add a page state. I'm going to call this clothes type. Clothes type. All right, yeah, so that's it. It's not allowing me. It's going to be a string. It doesn't like the way I named it. So, uh, I don't know. Cloe, Cloe. I'll click clothes type. Let's just call it like this. Clothes type. It's a string. And, um, I think that's about it. And, uh, I will click on confirm. Okay, and, uh, so, okay, so it's telling me something here. Page state variable is non-nullable but has no this. Okay, so we can say, uh, nullable. Okay, that means something. Okay, for some reason, it's also not showing me some. Okay, it has to have an initial value. Okay, initial value is going to be, uh, men. Yes, it's going to be men. Can we have the error run away now? Uh, clothes type is the stream. Okay, yeah, we're going to have to click on confirm. Okay, so, yeah, so it has this initial value is men because we will always have men here. So if we click on this drop down and let's look at how it looks like. Okay, so it says here, man. Let's just use a small letter because I used small letter there. So women, small letter, women, children, small letter, children. So we will use it in filtering what we see here. And that will be how we end the session for today. So here we filtered top selling is equals to true. So let's add another one. So we're going to say, um, we're going to add another filter here. And it's going to be, uh, clothes type. Okay, is equal to, uh, you know, page state clothes type. That's it. So we set and okay, basically. So this one and that one. Okay, so we click on confirm like that. So then, um, if I come over here, um, okay, so let me see. It says or. Okay, so we should have all as well. Um, okay, I'm trying to see something. So you click on this, it shows you man. Anyways, we can just maybe eventually we should, we can put all. So this is man. And, uh, we should do the same thing to here. So new in is equal to this. Click on this and say clothes type is equal to, uh, page state clothes type. There you go. Okay, so now we have done this. We can come back to our test mode. We have four minutes left before the test mode ends. And so let's look at what how this works out for us. Okay, well, we have not really finished. So when the user clicks on this, all right, it's going to, let's go to, let's open the action. Flutter unselected. All right, we want to, uh, update the state management. Want to update the page state. Okay, with [Music] um, uh, want to update the page state with, uh, this, like the page state clothes type. Want to set the value to collect what is inside the the widget state for the drop down. Okay, so that's like what I did here. And it's going to rebuild the current page. Okay, so that's like the idea. So now let's come back here and just do an instant reload one time. And then let's see how it works because if you can remember, we have created stuff for men and, uh, men and women. Right, yeah, the bags is for women. And, um, and the other stuff is for, yeah, so like this. So if you observe, these two things are the only things that are showing because by default, it's picking this automatically. All right, so if we click here and change to women, uh, we're supposed to see our, it's supposed to like refresh. It's supposed to rebuild the page immediately. But it is not rebuilding the page. Women. So, um, let's do like this. Let's, uh, quickly add another action. Distributing the page. Distributing the page. Let me see. Add a, add an action to our navigate to Home instantly. All right, so I'm trying to, I'm trying to see how we can just have the results, you know, like real quick because, uh, for some reason, I think it is, it is not really responding the way we want it to respond because the, it is rebuilding the page, but the value of what it was thought that what it had thoughted had disappeared. Okay, so this is men already. And for women, aha, for children. Okay, so now this is not cool because we have some things for women, right? So we have women, we have men, women. Uh, okay, so this is not working the way I want it to work. I don't know why. I don't know why. But, uh, by default, the other one was men. So, uh, okay, update. So what we did was this. You have to like, uh, update the page state. Set the value, clothes type, and rebuild. But for some reason, it's not working. I don't know why that's not working. But let's try to switch it to page state. Let's call, let's create a page state and say clothes type. Uh, clothes type. And then let's call it, um, string. And make it persisted. Yes, persisted. Create. And here we can just change it. Let's change what. Let me just quickly, this has ended.

Let me just end this session and create a new one because we can just we need to just confirm that we have done this one correctly and then we can continue building our application.

Okay, so um let's see. Okay, while this is running, uh yeah, I can close this one then. Um, here, this is updating a page state. Let's change it from page state. We want it to be like an app state. So I come here and and say, "App State is going to be clo type." Sets the value from uh the the widget state drop down. Okay, it gives me an error. "Using the action can no longer be found." Look how St field. "Using the action can no longer be found." He, it's actually no longer valid or the field needs to be added back. Okay, okay.

So yeah, I've changed it to App State. Um, but why can't we find it? Okay, so I'm trying to switch from what we did before. Yeah, I was trying to use a a page state here, but for some reason, it's not giving me what I I want because there's nothing like persisted here, I think. So I'm just going to remove it. Confirm it's going to give me a couple of errors. Yeah. Uh, yeah, so I'm going to try to remove the queries here, the filters here. Remove this. Uh, oh, okay. Let's go back to my dashboard. Okay, so let's come back here. I am going to like click on confirm. Uh, let's see. Okay, confirm. All right, so that error is going to be gone for that one. So let's click here to remove this second error. I'm going to remove this and confirm it. Okay, so we have just one more error. What is this other one error? Okay, so yeah, it's going to be this one. Go. All right, that was the error. Okay, so I've removed that error. This works up well. Click on these updates. These okay. And then now we're going to to click this to actually do the filtering. So I'm going to come over here and add to Future and say, uh, "Clo type is going to be equal to uh the App State variable called Clo type." Okay, confirm. Then come over here and do the same thing for the new. In the Clo type is going to be equal to uh the value of the App State called Clo type. Okay.

So now that we have this, let me just do an instant reload. And then so we did this. You click on it and it changes. Uh, all right. So yeah, we did like a reload here. No problems. So let's see if it's going to work out now. Then we would have been done with the homepage of our application. So let's uh, let's quickly check out. Let me um, do an instant reload and just wait here actively for it to like reload all its dependencies. Okay, so here I'm just going to reduce it a bit. Now it's not showing anything. Seems cool. Uh, man. Okay, fine. It's showing everything now. Women. Okay, this is perfect. Now this one works. I don't know why the other one didn't work out. We would try to figure out why. So but on on loading this page, like, you know, the reason why we didn't see anything is because we need to create an action to uh, set that particular uh, to update the App State. I'm going to come here and I'm going to update the App State. Um, let me just copy what we what we did here. I'm just going to click here to copy the action chain. All right, and uh, I'm going to keep give it to the scaffold. Come here and click to open it. Then on page load, I will paste. So it's going to update the app page App State variable and then just this like this. So all right.

That means if I reload this now, it's no longer going to just show us like an empty screen. It's going to show us a screen with a default. Okay, okay. It's still going to show us like a default value because we have not tapped anything. Yeah, I will show you. It's going to still show us an empty screen. Yes. Oh, it doesn't show us an empty screen. Okay. Yeah, we still have like an active App State value. So so what what we're supposed to do here is when it when on page load, right? I wanted to update the App State variable to uh, we just want to set the value to uh, women. All right, sorry, men. Let's just say men. Okay. And um, yeah, man. And then this way, if we can, let me reload it, it's just going to show up the men stuff. Yeah. And then uh, you can always like change it to women and children. So let's say uh, let's look for accessories, accessories for kids, for children, for children. So I think I said is for children. Yeah, this one is really nice. So I'm going to copy this. Copy the image address. Uh, I'm going to create a new document. This is going to be a children, children toy. And I'll click here and just paste this. And it's going to be 234. And uh, it's going to be top selling. It's going to be children. All right. And the clo type is going to be. What did I do here? Did I say is it going to be children as well? Is it going to be small letters or capital letters? I've forgotten here. H, let's use letter smallest. Children. So children here, categories children, clo type children, description. Um, I don't know. Okay, so okay, let's just copy this. Really, I I don't really have any detailed thing to put here right now. So add a document. And I'll come over here. Okay, so let's reload it. This is supposed to show man, actually. Uh, yeah, so let me reload it. It's supposed to show stops for men. Uh, uh, why is it not loading? Okay, there is a problem somewhere. There's some sort of problem somewhere. Let's reload it and see what's going on. Yeah, so all right. So for some reason, it's not loading up because there's a problem. The problem has to do with how we are creating this page. Um, okay, let me see. Uh, here we have um, this is clo type. Okay, so this is going to be uh, man. Okay, so man, actually, right? So why, why do we have, why is it not loading? So let's click here and see what we did. Update, set value, Cloe type to man. And this is correct, right? This is correct. And then navigate to home. So maybe we can just delete this. Yeah, yeah, that's like topology. Let's uh, do an instant reload and then see what we can have here. Uh, so shoes, children, men, men, women. Uh, okay, let's see what we're going to have here. But uh, so far so good, we have done like real good work. Um, okay, yes, this this is working. It gives us men. I can change it to women. No, it's not changing to women. Okay, yeah, women. Uh, oh, it changes to women. Aha. Okay. And then it reloads really quick. Okay, I see what is happening there. So, um, when you click on this, it reloads. So let's go remove this navigate. Let's remove this. Yeah, so we don't need that to happen. We just need it to reload. So let me just make a reload. So sometimes when you just try to work on this, you encounter issues and then you try to reason alongside the problem and and then identified. It's like super exciting to fix bugs and be able to identify what is causing the issue. It makes you have that um, that excitement that you're a creative person. So women. All right, that's it. It doesn't change anymore. And then here is going to be children. It has this toy here. All right, so that's it. So we can just uh, change this size of this uh, button. Let's change the size to uh, 150. Yeah, just something large enough. So like that. So, um, if you reload this, this is going to give you a proper uh, you know, size for that button for you to change from men to women to children. Okay, I hope that you've learned a whole lot of things from this tutorial and you're going to, you know, um, be learning even more, right? So like this, this is just perfect. This is what I was looking at. Okay, so we will continue our tutorial in the next part and uh, see you soon. Bye for now.

Hello guys, welcome to another part of our course. And uh, this is going to be a continuation of our back end. Okay, so uh, let me just go ahead and um, launch a new debug session so that when we are testing our application, we can, you know, adjust it when necessary. Um, yeah, so I'm trying to see how I can test the the debug session, like to launch it up. I might have to switch my network so I can have um, a better network. Yeah, because I think it's taking like way more time to load. All right, okay. So let me just quickly push this out. All right, so uh, let's look at this. I think this should load faster than the other one. Okay, yes, it's better. Okay, so we have um, we have, you know, successfully uh, built our application to this point. This is how it looks like here. And we did this whole future process. We haven't done this. We haven't done card. And we've done a couple of things, right? So I think we can just uh, proceed from where we have stopped. So now this is our design. And um, let's see. We have created um, so we have uh, notifications. All right, so let's set. Let's work on notifications. Let's work on notifications. And then uh, this one as well, right? So let me come over here to to where we have, let's come here to the page. Let's go to Notifications splash screen. I think, yeah, this is it. So this is the screen that you get to see when there's no notification. So and again, I'm going to remove this so that we can uh, I'm going to remove this component that we have here so we can, you know, be able to uh, touch the widgets that are here. Okay, so, um, this is what the user gets to see when there are no notifications, right? So, um, I want to check out something. Um, so if the user clicks on that bottom navigation, click to go to this page, right? So this page should only show. Let me see. On page load, we're going to check whether it has. If it doesn't have, whether it has uh, uh, content and information, then it takes the user to the next screen. Okay, so let me show you how we can do that. Let's come to Firestore and we're going to create a table for our notification. So here we have notification. That just it's just like a text. So, "Gilbert, you placed an order. Check your order history for full details." Just something like this. "Your order has been confirmed." Uh, so I think let's just say um, I don't know. The idea is just to create a create text. This is just going to be notification. And then maybe the date, possibly. Uh, yeah, maybe the dates, possibly. So let's come here and create uh, the collection for it. So I'm going to click here and say notifications. Notifications. Then I'll create. Then I'm going to set up the schema. All right, so here is going to be text. Uh, I can even make it more descriptive. I can say notification text. All right, and it's going to be a string. All right, then I can just go ahead and say uh, date. And this is going to be timestamp or let's say a datetime. And check. Okay, so now we have this. And we're going to do something else, right? So we're going to say user user ref. All right, so this is going to reference the person that owns this notification because we're going to have this is a table that contains all sorts of notifications. And we want to be able to show uh, each user their own unique notification. So let me say user ref. And here we're going to be referencing. We're going to be doing document reference. That's going to be the data type. And we're going to be referencing a user. And then we're going to click on check. Okay. All right, so now we have that. So let's go ahead and create some sort of action here. Let's come to the widget tree and click on the scaffold. And then set up some sort of conditional statement here. If I come here to this part and I'm going to click to open it. So it says here, on page load. Okay, yeah, I'm going to add a conditional. So uh, this conditional is going to check for some things. So but before we do this conditional, let's query this uh, scaffold. So I'm going to query the scaffold. And I'm going to query the uh, collection called notifications. It's going to be uh, I'm going to be querying. I'm going to be doing count. Now I want to later on create a uh, a condition that say, is if the count result. All right, if the count result is less than, is is is is greater than zero. All right, then show the screen. All right, uh, then just like this screen will still be there. All right, but if it is not, take the user to another place. Yeah, so but now I'm going to add a future that is going to check the user ref has to be equal to the authenticated user reference. That means we are trying to say that this information will only be for the user that that logs in. Okay, then now now that I've done this, uh, I have some errors here. Okay, yeah, the conditions that I tried setting. So here I'm going to try to set a condition. I'm going to click here and say single condition. I'm going to be looking for. Okay, for some reason, I can't find this here. Hm, I can't find these here. I'm supposed to find um, the count stuff that I just did. But it doesn't allow me because I can only find it in uh, in a in a if I told I'm a child. But now this screen cannot be a child of itself. Okay, so what's the best way to do this? Let me think. So the idea is to make it such that the this page is going to when the user clicks on it. All right, when the user clicks on that particular icon. All right, um, okay, I'm trying to figure out like a back end. What we can do because we just want to some whereby um, okay, so if that's the case, then let's not do it like this. Let's change the logic. Okay, I'm going to change the logic. I'm going to delete this. And then I'm going to come over here to where we have the actions. Uh, and then I will delete these. Okay, let's try something else. Um, so here we have all of these connected. This was supposed to be like the splash screen where the user gets to see um, this screen if at all they haven't, they don't have any notifications. But one thing that we can do is, um, I can remove all of this information. All right, let me come over here. I can copy, copy it out. Okay, let's copy it out. And then we go to notification, another screen for notification. So let me see. Notifications details. So this is notifications details. So what I'm going to do is I'm going to paste this. Um, I'm going to paste uh, this uh, okay, so now this is a a column. Okay, and uh, what I'm going to do is let's come here. This is the main column. So I'm going to right click on this and wrap this widget in a stack. Okay, then I'm going to paste the second uh, column. This is the second column. Okay, so what I'm going to do next is going to be a bit uh, tricky. All right, so this is uh, let me see. Um, it's not supposed to overflow on themselves like this. What I'm going to do is I'm going to try to I'm going to try to make it such that I'm going to try to make it such all of these things are together. All of this ones are together. And this one is this one is also together. H, okay. And all of this is supposed to be inside uh, all of this is supposed to be inside a list view. And this one is here. Okay, so let's just com uh, undo this. And what I'm going to do now is I'm going to come over here. Click on this one. Delete it. Yeah, delete it first. Then click on this and delete it. All right, and then over here, I'm going to try to wrap this widget in um, in a container. Sorry, in a in a particular widget called list view. All right, because that's what I'm going to query to produce a result. Okay, and um, okay, so I have done that. And uh, let's see. This is a container. I can okay, center align this. Okay, so now I have that. Uh, so this B container is here. Then this is the one that contains all of these. Okay, so we can say uh, we can rename this to say "has". Let's change here and say "has". Has notification. Has notification. All right, I'm just trying to be more descriptive of this. Has notifications. So this one has notifications. Now I'm going to click on this and paste this column. All right, this column. Let me remove this uh, this particular row. Remove it. And I'm going to rename this one to "has" and say maybe just say "no notifications". All right, no notifications. Okay, so we have some sort of error here. It says set as flexible. Let's change this back to this. Okay. All right, so we have this. And um, let me see. So we have this and everything is okay. Uh, so this one is going to be the the widget that uh, that shows only when there are no notifications. And then this one is going to show when we have notifications. Has notifications. So I can just put here notifications. Okay, so what I can do now is is I'm going to go ahead and query this particular uh, scaffold here. So I'm going to query the scaffold. I'm going to come here to query collection. Then I will query notifications. I'll be finding the count. I will do the filter I did before. I will say user ref must be equal to the authenticated user reference. And then I will confirm. So that way I am going to have a count. This is on this is like the parent, parent, the number one parent. So now I can go ahead and use use the result that comes from here to set conditional visibility to this. Okay, so that means I can come here and turn on this and say I want this place to only show. So I'm going to click this and say uh, conditions, single condition. I want it to only show when the notification counts. All right, is um, is greater than uh, greater than greater than zero. Yeah, so if it is greater than zero, I want this to show. And then here I will just copy this conditional visibility. And I'll click on this "no notifications". If you see here now, we have an eye that shows that there's a conditional visibility that has been placed on this particular widget. So then for this one, I will click here to turn it on. And then I will paste it. And I will change the conditions. Notifications count for this one to show. It means that the notifications count has to be equal to zero. All right, so now that we have that, let's come over here to uh, our screen. Uh, okay, this had loaded 16 minutes. Let's turn this off. Uh, we will have to bring in the um, what is it called? We're going to have to bring in. Let's come back to let's come back to home. So here we have our home. So I'm going to bring in the navigation icon here. So I'm going to click this to close it. We have the row. I'm going to click this to bring in our Navigation icon. Bottom navigation. Right, then I have that here. I would just do an instant reload. And then we will be able to see the bottom navigation for that home screen. So we can click to go to notification. And then uh, you will get to see. Then while I'm doing that, let me come over here and refresh our CMS so that we can add an information to the what is it called uh, to the table. So here we have notifications. There's nothing here. So by virtue of the fact that nothing is there, we shouldn't see uh, we should see "There you don't have any notifications" design. Okay, so we're waiting for these to show up. And then from there, we can check it out. Meanwhile, if I told you enjoying this tutorial so far, I would like you to hit the subscribe button and subscribe to the YouTube channel. All right, and then if I told you also want to purchase this application. All right, you can also check the description under this video. And you will see the link to buy the application on uh, from Patreon. Okay, so this is it. Now we have this. And I can just click on notification. So here it shows "no notifications yet". So I can come over here and and uh, let's go back to that notifications page. So we have notification uh, details. Where is it? Notification details. So this is where it is. I can add some padding. Let's say 25 to this. Okay, so it comes down a bit. You see we have two things on this screen, but we can only see this one. All right, we can only see uh, just one. So now if I go ahead and then let's query this uh, let me query this the list view that is on this. Okay, we didn't add a list view. Okay, we did. So this is the list view. All right, so I'm going to query this place now and say query collection. I'm querying the notifications document. I'm doing a list of documents. I'm going to add a filter. So it can only show me the notifications for this particular user. So I will say user ref is going to be equal to the authenticated user reference. All right, then I'll confirm. Then I'll will confirm. So now and it shows me like this. But um, for some reason, this is not giving me how I would want it to be because this is not how it's supposed to be. So I'm going to just uh, cut this uh, query out. And we're going to rearrange this. So this is the I'm going to click um, I'm going to click uh, I'm going to click this and push this out into here. All right, and uh, okay, it doesn't allow me to do that. Okay, yes, it does. I will delete this list view out. And this is supposed to be. Why is it alone? Yeah, so yeah, it's supposed to be inside like this. And then so what I'm going to do now is I'm going to wrap this uh, container in a list view. This is what I should have done. Let's come here and remove these. This is 40. Let's remove this padding from here. Let's put it on the least view. Uh, and paste this here. Oh, sorry. Um, 40. Okay, then we have um, okay, so we have that. And uh, here we can add that our query. I'm going to paste it. It's going to produce this like this. I'm going to click here. And uh, if I come back to the design here and tap it twice, I will see see that it has a padding of eight. So I would just give it like a padding of eight at the bottom. And it just spreads it a bit, you know, separate here. If you see. All right, so we have that. And um, what I'm going to do next is going to be to remove this conditional visibility from this container and put it on this one. Okay, so I'm going to come here and just copy these. Then click and remove the variable. All right, then I'm going to click it. I didn't leave that place. I'm going to put that conditional visibility here. I'm going to paste it here and confirm. And then here on this one, I will just turn it off. Okay, so now this conditional visibility is on the list view. All right, so now I can click on this. Click on this. Go to my notifications document. And take notification post. And then I can go ahead and uh, yeah, this is it. It's just perfect. It's going to show me the notifications here. So if I come back to my test mode and just do an instant reload. Uh, yeah, I'm doing an instant reload. We're not going to see any information because we don't have um, any notifications yet. So but let's just wait for a couple of seconds. And then we will see how the the the design looks like. So this is it. All right, as you can see, I will click on here. And well, for some reason, it's not showing me. It's not pushing this down. I don't know why. I think we might have to like do it again. But before then, let's add a notification. So I'm going to add a notification here and say uh, "Welcome to Clot, your number one uh, e-commerce store." Okay, then I I'm going to pick the dates. I'm just going to pick a random date and time. And uh, here I'm supposed to put the user reference, right? It's supposed to appear for this particular user. But this is going to be a bit tricky. So let's go to let's say users slash. Let me come here to our this is supposed, this thing is supposed to be generated dynamically. All right, without I was having to do this. So let's come here to Firebase. Let's come here. Let's go to our Firestore database. This is our Firebase project. Okay, so I want to just uh, get access to the document reference of this user. Okay, so we have only one user. So if I click here, we have just one user. So this is going to be the document reference of this user. So I'm going to click here and copy all of this reference. All right, and then I will come back here and I will paste it. All right, then I'll click on add document. And if I come back here now, uh, I am supposed to actually see. This is supposed to change by like by default. So let's let's try and see. So here I have ID. This is ID of the document. This is the user F. Yes, did I get it wrong? Okay, so let's see. Um, let's try to see if I told we got it wrong or right. Okay, so I think we did get it wrong. The user reference here is wrong. Um, let me remove this. It says users. And then this is the reference. This is the only user that we have. Okay, this is not my account. This is not my account. This is another account. All right, so, um, let me see. This is not their account. So why don't I have my account here? I created an account, but I can't see the account I created. I don't know why I can't see. Let me copy this particular ID. Yes, and paste it here. Yeah, then I'll update it. Still not showing. Okay, this is Clot. Yes, and I created this in August. Why this? Why is it not working? And I don't have any other user here. So, um, okay, for some reason, it's not giving me the user reference. Let me come back back here to users. And this is my user ID and the user document. Okay, so let me copy. Let me copy this one. Okay, let's see. This is same as this one. Yeah, so this is only one user. So it's showing me here that there's only one user. For some reason, I don't know why there is only one user. So it doesn't make sense at all. Um, so what I'm going to do now is I'm going to go ahead and uh, fix this particular issue. So because we're supposed to have like a couple of users here. So let's see how can I fix that issue? We're going to fix it like real quick. What I'm going to do next is I'm going to go back to page. Um, in this place, I'm going to add a a very quick button. I'm going to duplicate this. This button is going to be for logging out. I'm going to just click to create um, okay, let's see. Do we have a login log out button in in the settings page? Okay, yeah, we do. Okay, so there's no point duplicating this. Let's just delete it. All right, so I think this can go. Let's go to um, our settings page. Let's go to settings page. Settings. Where do we have settings? We just need to find settings. And then, yeah, so I'm going to add an action here. Let's uh, just remove this um, bottom navigation. All right, then I'm going to add an action here to sign the user out. So I'm going to say add action. And we're going to go to uh, backend database, Firebase authentication, log user out. Okay, then here, let me just change some things. This is going to be uh, let me come authenticated user display name. That's going to be the name that's supposed to be here. This is supposed to be the authenticated user email address. And this is supposed to be the authenticated user phone number. Okay, and then this one is supposed to be the uh, let's come here to change it to authenticated user photo URL. And uh, let me look for a placeholder image. Okay, so I need it for a profile. Yeah, I can use this for the meantime. Yeah, so I would just copy this image address. And I'm going to just paste it here. All right, and confirm it. So now that way we have this. Okay, so uh, now that we have this, we can actually go back to uh, test mode. And I will do an instant reload because I need to like log out totally. I'm doing an instant reload. And I'm going to delete this user. I'm going to delete this account. Delete account. And um, I'm going to also delete um, I think that's that's all. Yeah, because I still can't see this one in the main account. So I can so I just delete that as well. If I come to Firestore database, uh, I'm supposed to see all the accounts that have been created. At least the the details. But I can only see one. All right, so, um, so here what I'm going to do is I'm going to go ahead and log this user out. Okay, funny enough, the user session had ended. So this is it. It's to create a new account. So I'm going to click here to create a new account. I'm going to say David. And here is going to be Oro. Then it's going to be Mr. David Oro and gmail.com. And then my password. Uh, maybe just like this. Okay, so I put that up. And I've created an account. It should take me to "Who do you shop for?" So I'll shop for men. Age range uh, 31 to 45. Finish. All right, so like that. So now I have an account. I should have changed this. But if I click on this now, it brings me here. So I see my email. See this default image. I don't have my details here. Okay, so for some reason, now I have this one. First name and last name. So I think um, what I'm going to do is when the user creates an account, I should have something like uh, okay, here I can just change this to I can change this from display name to uh, first name. Okay, I can even do it like this. I can click on this and say um, combine text. It's going to say say uh, authenticated user first name. Where is it? First name. Then I'll do a space. Give some space. Then I'll add here and say authenticated user last name. Okay, that way I can have it correctly here. So if I come uh, if I come here and just like do an instant reload, we should see that. Okay, but this was not our main concern. This was um, as a result of the fact that we needed to create a log out button so we can like log out. So now I have um, another user. This is my main account. So I can just quickly copy this. This is supposed to be what should account for. Let me go to my notifications now. And click this and paste this here. That's like my reference. So if I come here, wait for a couple of seconds, I should see. If I don't see, that means there's something wrong. Yeah, I click to reload it. And um, yeah, so if I click on notifications, it's showing me. It's still showing me these error. Let me end the session and uh, run a new session. Then let's go back and debug that. I don't know. Maybe it's because I'm not writing the uh, I'm not writing the what is it called? The uh, the user reference correctly? Cuz I believe that's it. Supposed to be. But anyways, we might have to jump from that. Yeah, uh, let me see one more time. Notifications detail. The condition that I placed was notification count has to be greater than zero. So when I create um, when there's a document in that part, that means notification count is more than one, of course, right? And um, for this particular user. So I don't know why it's not working because I I feel like um, okay, so this is what I'm going to do. I'm going to just quickly do an action like a real fast action to create because I want to be able to copy the uh, what is it called? The user ref. So I'm going to click to add an action here. Just really quick. Uh, this is just for me to debug and test. So Firestore create document. I'm going to be creating a document called notifications. And the field I want to do is just going to be um, uh, notification text. I'll say "Welcome to Clot". All right, and then I'm going to add another field. The the date tier is going to be uh, from the global property, current time. All right, I'm going to close this. Uh, then what else? The user reference is going to be authenticated user reference. Now I wanted to just like have these very handy. So let's see. I'm going to close this now. And uh, let me go ahead and do an instant reload. So that I can, you know, go about creating like the document directly from the app. You know, instead of, you know, doing it here because I think there's something wrong with how I'm writing the the user ref. I think there's something wrong with it. Yeah, so, um, the only way we can tell is from. I'm doing it dynamically. Like what I just did. We're just doing a test. So this actually how to debug and, you know, get your application running. So uh, let's look at it again. Um, we're going to just quickly check out uh, how the application looks like. It's supposed to show up here. I don't know why it's taking so long. Uh, should I just refresh this now? So I'm just going to refresh it again. Maybe after you refresh and you run away, it's just like, okay, why did you leave me alone? So I'm just going to like uh, chill on it and wait to see what shows up here. Okay, turn up. Let's see. Turn up. Turn up. Turn up. So, um, it's still loading for a long time. Okay, you can just like forward this really fast and then move to the next part where it finally shows. Okay, but I'm going to wait. All right, so this is still loading. And I don't know why. I don't know why it has to be my network. Okay, so it's finally showing here. And it's loading up. Okay, so if I click on this now, it shows this. So I'm going to click to create. Oh, wow. Oh, my goodness. My goodness. Okay, I'm sure that you might have been asking, David, don't do it that way. We changed the navigation. Yeah, so I finally get to see what's wrong. We were not doing anything wrong at all. What we missed out was, let's go back here to bottom navigation. When the user clicks on this icon, we want the user to go to the notification details, not splash. That's why nothing changed. Okay, so yeah, this was the problem. Uh, let's just go and do an instant reload. I am very sure that you knew it. Yeah, why didn't you time travel and then come to my current time and then change, tell me to change it? But anyways, it's good. You're smart. That's really good. I'm really teaching very smart people. So yeah, that's good. So uh, yeah, we're not going to have that problem anymore. But anyways, that problem allowed us to, you know, solve uh, other issues. So if I click here now, we're good. It's gonna show us um, it's gonna show us uh, the oh, it's taking time to load because uh, we have to come back here to settings. And then we have to say that everybody can read and can write. Let's just say everyone here. And uncheck this and deploy this. Yeah, this was their challenge. So, um, okay, so now I'm going to do an instant reload again. And uh, wait for a couple of seconds. It's going to show us uh, how it looks like. Okay, I'm waiting to see how it looks like actually. Let's wait. Let's wait. Let's wait together. Let's wait. Let's wait. Let's wait together. Okay, so this is it. If I click on this now, yeah, it shows here "Welcome to Clot, your number one e-commerce store." Now, and it's showing this because we already created uh, this. I think what we did was correct. Our user reference was correct ever since, right? And uh, so I can just quickly delete this. Right, okay, let's just copy this. I wouldn't like to type it again. So just copy this. And I'm going to delete this. Don't forget it's currently showing. But I'm going to just quickly delete it. When I delete it, um, the other stuff is supposed to show. But it isn't showing. So what I'm going to do is I'm going to refresh. Do an instant reload. Let me see what happened in that place. So if we go back to Notifications details, uh, this thing is supposed to show when it is equals to zero. Okay, and the count is supposed to, the query is supposed to happen after on page load. That's why we didn't see anything. Yeah, it doesn't just happen instantly. It only shows. It does the counting on page load. Yeah, it does the query on page load, right? So that's why we didn't see anything. But if I click it now, we get to see that, oh, there are no notifications. All right, but n, if we add a notification or if we go ahead and add a notification and add a date. All right, and here slash users. Okay, preferably let's do like this. Uh, I added some action to this. So if I click to create it, yeah, it does. It has created it. But now this page was not reloaded. But now if I click to reload now, we have we actually have like um, an information. So let me just paste it as this one. So the way it works is that uh, the the the notifications will be created automatically based on what the user does on the app. So, this is fine. At least now you see that when there are no notification, nothing is going to show out. So this is fine. Okay, so we have that. And we have fixed notifications. And um, that's good. Uh, the next thing we need to do is let's come back here. So we have fixed notifications. Uh, we've done sign out. We've done um, we didn't have a profile picture. We will fix that. We can quickly fix that now. Uh, here, how we can do that is um, let me see. If we come over to uh, the settings screen, right? When the user like maybe taps on this, the user should, you know, get to see something. Let's create a component first for that. I'll click here to create a new component. And I'll be looking for UI elements. So I think it's going to be I'm going to be looking for something to create like uh, upload an image. So if I keep searching, I will see something. Uh, not this one. Uh, I always see something. It's always um, I always see like some sort of uh, yeah, this one. So I can click this and say "Change Photo". Upload Photo. And then I'll click on "Create Component". So this is how it is. I would just delete a couple of things out of here. This is the container. And um, this is 350. Let's come here to the widget tree. Let's change this to 500. Okay, so like that. So now I have "Change Photo" and here. So you click to upload the image. And this one is to save it. So here is um, let's click here. Let's click here to uh, add an action to this. So here we're going to click to add an action. The action is going to be backend action, Firestore, update document. What are we updating? We're going to be updating the user reference. So we're going to come to authenticated user reference. Want to update that. What field are we trying to update? We want to update the field called photo URL. Okay, so, um, this is the part. Okay, so the thing is this particular uh, action is supposed to be. Let me cut it here. It's supposed to be on this one. Uh, let me click this to delete this and paste this. Okay, doesn't allow me to paste that. Let's paste it here. So here this is how it's supposed to be. But before we proceed, we're going to click this one to upload uh, a a file. So I'm going to click here. Backend Firestore. Let's just come here and say uh, upload image. Upload image. We'll see upload save made there. Then I'll click and change it to Firebase. All right, uh, it's either going to be camera or gallery. And then uh, we can come over here and change and say "Show snack bar". Okay, and uh, that's it. So if we come over here in this part now, and then we want to upload update like uh, a document, a particular field in our, you know, document. So what we do is we're going to do from variable. And we're going to click here. We're going to go to widget state. And we're going to pick the uploaded file URL. So when the user clicks on this and then it's been taken to his device or her device, they will be able to like select an image. And after they've selected the image, they can now click on this. But after they've selected the image, we want it to show here. Okay, so we want the image to show here. So that's where we're going to come and say um, this is the background image. Uh, we're going to click here and say uh, upload. We're going to say network. So it's going to come from the widget state uploaded file URL. But if there's nothing there, let's copy this image address. And we're going to put the default variable here. Okay, so if I told us nothing, this is what it's going to show. Okay, so this is how it's going to be. The the user gets to upload it. And then we have to do one other action. So when they click here, it's going to update the value. But it's not going to close this bottom sheet. So let's actually have that problem. Then we can see how to fix it. So let me come back here to um, let's go to settings. Let's go to home. So when you click on this um, okay, let me go to let's do it in settings first. Settings. Where is it? Where do we have settings? Good. So when the user clicks on this, we're going to add an action. It's going to be an action called bottom sheet on tap. Okay, we're going to say on tap. Uh, we're going to add an action. Bottom show. That's show a bottom sheet. And we're going to be looking for the one called upload uh, photo. And um, then what else? That's it. So uh, let's go ahead and just reload this quick real quick. If we click on this and we will try to find.

I will upload an image of myself from my Mac and then I will show you the arrow that we're going to run into and then we will fix that Arrow together. Sounds cool.

Yeah, so the thing is, I have already traveled into the future and I know that we're going to encounter a problem, but I prefer we encounter the problem together before and then we fix it. Yeah, that way you get to learn a lot of things, you know, for me. So, um, um, this is loading up. It's taking like way longer than normal, but because it said it takes under 10 seconds, but maybe it's taking up to 15 seconds. Let's see. It's just going to show up very soon.

Um, all right, so we have done this reasonably. Let's, um, let's just, you know, give it, allow it to take its time and, you know, it's, it's always good to not be too pushy. Yeah, so because, you know, uh, let's just allow it to take its time because I don't know why it's so slow. Um, it's going to be partly my, my network. Okay, actually, it failed. So let's, you know, do an instant reload. Probably something happened there and it didn't work out the way it's supposed to work out.

Okay, so now this loads up and, uh, if we go to settings, if I click on this, okay, for some reason it didn't load up that last update. Yeah, I didn't load up that last update. I don't know why it didn't load up that last update and this is loading slower than normal. Okay, yeah, it's loading slower than normal. Really, it's really loading slower than normal. I hope it doesn't fail again because it's not super exciting to see it fail.

Um, what do I do now? Preferably, I just like maybe end the session and start a new one so we don't have to have it always feel like this. So, well, let's just wait if it's going to compile the code successfully this time around. It happens really, you know, when we were, when I was younger, way younger, I was told that the computer is an idiot machine. Well, I think what the mentor is, garbage in, garbage out. What you give it is what it gives you. So I don't know what I have given it that has made it this slow. Is it the recent updates that I made? I don't think so. So, uh, most likely going to be my network, but we are going to overcome it. But, you know, you could just like forward it to where it works so you can, you don't have to like waste a lot of time on it.

Okay, so we are making progress. We're making like some very significant progress, if you ask me. Uh, progress is very significant and very, very remarkable. All right, okay. This took way longer. Okay, sorry about the delay. H, okay, okay, okay. So reloading your app now. I don't know. Do I just? I think what I'm just gonna do is, uh, I can just, uh, shut it down like that because I need to be able to see the, the button that says end the box session. Yeah, because I can't even see the end the box session now. It's just, uh, not showing me. It's not showing me the, the bottom to just end it. I'm just, are we starting all over again?

Okay, really sorry for putting you through this stress. I wish there was a place I could just end the current build. It's going to tell me something here. Yeah, if I click to open [Music] session, uh, is it going to open a correct session? It's still running this. So, so there's something wrong with it. I, I don't know. Let's just quickly do a push, do our published, web published version, and then maybe we can actually test it. I don't know. I think this is going to be like flows problem. Yeah, cuz I don't know why it's not loading as fast as it should. Let me go back to these other previous network in case it's, um, network related. So I'm trying to publish it to the web. We can always like test it on the web.

Okay, so meanwhile, what were we trying to test? We were just trying to, um, let me go back to the home. We were trying to like test the upload image part. But meanwhile, uh, I wanted you to just like see it before, before we fix the error. But for some reason, I think we're having issues like seeing it. So what I'm going to do is I'm going to just like, um, let's go back to the upload photo part when, after, after the users clicked to, you know, upload the changes. All right, we want to be able to close this bottom sheet because what happens is that when the user clicks on, let me see if I can preview it. Yeah, I think I should be able to preview it with this. All right, so when the user, uh, you know, this is me just previewing the app. So let's, uh, go to the screen that shows the homepage. Yeah, when the user, this one, no, uh, when you click on this, it takes you here. So when you tap on this, it brings up this. Right, so when you finish saving the changes, all right, it should close this bottom sheet. All right, yeah, so but it's not going to close except you add an action. Let's add another action here that says bottom sheet dismiss. Okay, this is what I wanted to show you and somehow it just led us to this trouble that we have. I will just, uh, go ahead and close this and close this and, uh, maybe reload this and let's see at all we can have that action here on our box session. Sorry, this is not debug, this is just the preview mode. I want to see whether it will show up in our preview mode. Let me go back to my, uh, other network. Yeah, so I'm loading this real quick and, um, I think after this video, I'll just restart my system. That might also provide us with a quick solution. Yeah, so let's just see all of this first, then we can just.

So, okay, so if I click on this and click on this, it comes up. If I click this, it closes this, right? So, yeah, that's like the idea. So I'm going to just end this tutorial at this point. We will continue in the next part of our course. All right, see you soon.

Hello guys, welcome to another part of our course. Uh, in this part, we're just going to continue building from where we stopped. So, uh, in the previous part, we were like working on the, uh, profile settings. So if you click here and then you try to upload an image from your device. So I think I can even use this one. So, yeah, I'm just trying to upload my image here so it can actually, you know, be available here on the application. So I click that, it uploads the files, it shows uploading. When it is done, it's going to show, um, you know, it's going to show the uploaded file here. And after that, I can now click on save changes. So, uh, now it shows it here. So I can now click save changes. It now shows here and then it's going to close this bottom automatically. All right, so that's like the, that's like what we were trying to achieve in the previous part. All right, so we're good now. We have implemented this. We can just go ahead and go to settings and add some padding to the top here. Uh, let's see if I can quickly find that. This is the column, the main column. So I can just add a tab here, maybe 20, four, right? Yeah, so it can just push this a bit downwards. Okay, uh, don't worry, towards the end, we will fix in our navigation bar.

Okay, so now we have all of this. Uh, we need to change this particular picture. So I just, I'm going to come over here to the home screen and I'm going to remove this, uh, bottom navigation. So just delete it out. Then here, I'm just going to click the image, change it from assets to network. Then I will click here to say authenticated user photo URL. Then I will pick this, uh, you know, this image to be the default image when there is no value. All right, so this is going to be default variable value and I upload it. So that's actually how it looks like that.

Okay, so now that we have gotten that, what next? If you look at the design, uh, when the user clicks on, I feel all right, cuz I can't really tell so much. When the user clicks on this, it's going to take the user to this page where the user can see other details of the, you know, of the, uh, of the product, right? So then from there, they can go ahead and click to add to, uh, bag. All right, and that's about it. So, um, let me see, let me see, let me see. So we can go ahead and, uh, let me see what we can do here. So let's just make it such that the user can navigate to this particular screen. All right, and, uh, let me come here. So when the user clicks on this, let's look for that. It's, um, let's see the name of the screen. Product, uh, page, checkout. I've forgotten how we actually saved that particular page. So, um, but we're going to look for it here. So we have empty cart, shop by categories, view product more. Okay, I think I called it view product more. So here you see here, this is like it shows all the different details of the product. Okay, so view, view product more. So this is it. And, um, all right, so when the user clicks on that, it takes the user to this page. Now, this is where you get to learn a good number of other things. Okay, so let's see. Now we have, um, what we need to do here is, uh, all of these ones are just like ratings. We will create it, uh, very soon. But let's do a navigation to come to this screen first. Let me click on this and add an action to navigate back. Then, um, the next thing that I'm going to do is, uh, I'm going to go to home. All right, I'm going to go to home. When the user clicks on this or the entire part in this column, okay, uh, let me see. Let's come here to see how it looks like. So when the user clicks on this container, maybe this one, all right, okay, so, uh, we're going to add an action to this. So the action we're adding is going to take us to view product, view product more. Okay, so let's say, let's come here first and see. So there's view product list and, and then, uh, this one is, uh, let's see. Do we have like that kind of action? Um, let me click to open this. Let me just delete this first. So add action on tap. Okay, um, okay, add action. So, yeah, we don't really have any specific stuff. So I'm going to click on this. So, uh, this is going to be like on on tap action. So when you tap this, we're just going to take you to the, I think what we just going to do here is, uh, let me see. We're going to go to see, is it see more or see less? I think, uh, because over here, we don't have like, uh, this is just how it looks like, right? So I think we should just go here. Let's go here. At some point, maybe we'll find a way and fit this in. So we will click here and we're going to navigate the user to view more, view product more. All right, it's going to be instant. And then now, the thing is, this, we want to pass the information that is being queried here. You see this list view that has been queried? Want to pass that information to the other screen. So we're going to do something called, we're going to define the parameters. So I'll click it to define. It brings us here. I'm going to add a parameter. This is going to be called inventory reference. So we're going to be referencing the, why is it not allowing me? Write inventory. Okay, I think it doesn't need an underscore. So inventory ref. Now, this is going to be a document reference. It's going to be required. It's going to be referencing inventory. So I'm going to click on confirm and it brings me back here. Now, what I just did there is like pointing, like, you know, pointing a beam to the other screen or for instance, we can even say that I'm trying to connect a pipe between this particular screen and the other screen. And now that I've connected the pipe, I need to pass in the fluid, you know, turn on the valves and then pass in the fluid. So I click on that to pass and I come here to inventory document and I'm going to be passing the reference. All right, I pass the reference there. So when the user clicks on this, it takes the user to that screen. Okay, and then, um, we're going to do the same thing to this. So I'm going to copy this action. Okay, I'm going to click on this one, this new instance. I'm going to paste it. All right, it's doing the same thing. It's taking the user to that same screen. And, um, okay, here we're going to have to, uh, find the reference inventory and here, and there you go.

Okay, so now that I have gotten that, what I need to do next is I'm just going to go ahead and, uh, let me see, let me see, let me see. I'm going to go ahead and, um, let me see what we're going to do here. We are going to go to that next screen now. So let's go to that screen. It's called view more, view product more. All right, now we're going to catch that thing that we sent to this particular screen, you know, yeah, we've laid the pipe, but now it's time for us to collect the fluid, the water. So I'm going to come here, click on the scaffold of this screen, and I'm going to query it. It's going to be a different kind of query from what you're used to. It's going to be a document from request from reference kind of query. And I'm going to be querying inventory. And I'm going to pick the reference from here because this was the parameter I passed to this screen. So now I'm telling it, I want to see so many details of the information I sent to this page. So now that I've done that, with this image, now I can comfortably change it from asset to network. And then I can click on this, and I will see an inventory document, then I can say inventory image. All right, and that's like it. So I can come here and copy this, uh, image address and use it as a placeholder. It's always good to have a placeholder default variable value. So now it's going to show like that. This is going to be for image two. Uh, I'm going to change from assets to network. And then click here and go to inventory. We're going to do image two here. Then I'm going to paste this as well. And then I'm going to come here to the image three, change from asset to network. And click here and go to inventory document, image three. And then click here and paste it. All right, so now we have all these, the informations. So this is the only one that we see for now. Then we have the title here, so inventory name. So I'm going to click here, go to inventory document, and I'll see the inventory name. Perfect. I can click here and give it some padding of turn 24 in case the name is longer than this place, it can fall down here. So here for the price, this is going to be inventory price. It's going to be the inventory price. I'll change the available options to number format, then changes to custom, specify format, and then check these display as currency. All right, that's fine.

Now I have done this one. What we need to do next is I'm going to go ahead and, uh, you see this place that we have reviews. All right, we are going to like, uh, set up a review. Okay, here we have a price tag. So let me click here and inventory, inventory price, number format, uh, customer specified format, and then check and confirm. Perfect. This is add to bags. So what I'm going to say is going to add to cart. Okay, so this is going to be add to cart.

Now that we have done this, we need to just go ahead and let me zoom this in so you can see. We need to, okay, this, we have a description here. So I'm going to click this. All right, and click here and go to inventory document, inventory description. All right, that's it. That's perfect. And, um, this one is just a text there, and it's going to be our rating. Uh, let's come back here to the inventory. Let's give it a rating. So rating, rating is going to be a double. All right, okay. And then, um, that's rating. So here we can just click on this, click on this, go to combine text, and then I'm going to click on inventory, scroll down, I will see rating, confirm. Then here I will just give it some space and say ratings. Now the value here will come from database. We don't have anything there, so it would just not write anything there. Okay, so in fact, we can even write here, uh, default variable value. We can just say 0.0. 0.0. Okay, so that's like the value. Or better still, uh, let's remove this and say UI build, the display value. Okay, yeah, we can say 0. Z, Z, uh, 0. Z, Z. Okay, yeah, that's going to be like our rating if there's nothing there. So now we, we have this, and this is going to be the number of reviews. So no problems with doing that. And so we have, uh, this, uh, this information. I'm going to just delete, uh, this column. Right, I'm going to delete this column. We already have this as a list in a list view. So now let's create the, the, the table for reviews. So it's going to have an image, the review's name, review, and then the date. So let's come here and create a table. Let's call it ratings. Okay, reviews. Reviews. And we're going to say, uh, reviews. This is going to be the real reviews. Reviews. That's a text. It's going to be a string. And, um, date. It's going to be a date time. Um, this is going to, let's say, uh, uh, seller. You know, you know, the person that, that, that, that has that owns this review. Seller. So this is going to be a document reference, going to be referencing a user. Okay, then we need, um, reviewers image. Reviewers image. Okay, it's going to be an image path. So we have, uh, reviewers our name. Okay, so this is going to be your string. Uh, I think that's about it. So we have all of this. Then we have, uh, rating. Let's come here and say rating. Rating is going to be, uh, a double. I think, yes. Okay, so this is about it. And, um, we will come over here and then query this, uh, list view. So I'm going to query this list view. And, uh, I'm going to click on this. And then I'll say, I'm going to query document from reference. No, no, no. Normal query. Um, I'm querying reviews. It's a list of documents. I'm going to add a future. So this has to be such that this, the seller here is going to be equal to, you know, we're supposed to have a detail in this form. Okay, let me just delete this first and confirm. Yeah, so let's come here to the inventory. So this in any way does not tell us the owner of this inventory. So we will say user. Okay, uh, let's just say seller. Sellers ref. Okay, this is going to be the, uh, document reference of the user. Okay, so then here, when we are doing this, we're going to do a query. Uh, we're going to click here and say that the, the seller in that review must be, for it to show here, must be equal to the, uh, inventory doc, the, the details of the seller's work in the inventory document. So like this, confirm. Uh, we have an error here. Writing bar with the current configuration will not function when generated dynamically at the moment because it is associated with a local state variable. Um, consider wrapping it inside of the component and then generate the components dynamically. Okay, so there's an error here. Inside of a component and then generate the component dynamically. Okay, let me click on the rating and see. How do I put an information inside the rating? Initial rating. So if I change this to two. Okay, so, um, okay, so this is actually going to be, uh, let's come back here, uh, to where we have reviews. Rating is going to be an integer. So I'm going to say rating, uh, is going to be an integer. Okay, and, um, here we can click here and say initial rating. Uh, I think this is just going to show it. Yeah, but the user can like click to let's see. Click on this and say inventory documents rating. Yeah, but this doesn't take off the error. So we still have the error. Rating bar with J with the current configuration will not function properly when generated dynamically. Okay, um, when generated dynamically. So consider wrapping it inside of a component and then generate the component dynamically. Okay, so I don't know if I click on this and wrap this inside. Cannot wrap root widget. Wrap inside a container. We did fix that particular error. For some reason, it doesn't fix the error either. Okay, so we have, uh, issues with these, uh, rating. Let's just read through it again. Consider wrapping it inside of a component and then generate the component. Oh, I'm going to wrap it inside of a component and then generate the component, uh, dynamically. Okay, so how best do I do this? Okay, so before we continue, actually, I'm just going to take off this. We will have to come back and face this like on its own. Right, so let's leave this because I have to like, you know, fix some other things. So let me click here and bring in their image. This is going to be from inventory document image. Then let's try to, uh, copy this placeholder image and bring it here. So, uh, confirm. And then here is going to be the name of the, the person rating. The person, the name of the person doing the, giving us the, oh, I think I've been mixing it up. Reviews document, reviewer's name. Okay, this is supposed to be, um, this is supposed to be, uh, let's go back here. Reviewer's image. Yes. Reviewer's image. Please. Okay, and then here is going to be the text, review document, reviews. That's a text itself. And then here for this one is going to be, I'm going to click on this and say, uh, reviews document, our date. We're going to do date time format. And we're going to say relative time. Confirm. So it's going to be a relative time. So here I'm going to click on my column and let's look at the design here. It's, I can see here that there's some sort of space here. It's 12. So I'm going to add and give it 12 here. All right, this is fine. Okay, so I think that's about it right now. I have successfully added, uh, this review part to our design. Yeah, and, um, I think that's about it. So, uh, I can come over here to my inventory. This is like, uh, ratings. Uh, so we can say here reviews. So reviews is going to be like a number, integer. And we're going to put that here where we have the number of reviews. So I'm going to click here and I'm going to click here and add a combined text. Click here, inventory document, and say reviews. And then here I'm going to say, I'm going to say reviews. All right, so that way we have these things coming dynamically. All right, so that's so far what we can do in this particular part of the video. I hope that you've learned a whole lot. And, um, we will try to see how we can, uh, test all of these in the next part of the video, or should I say when we have finally created the reviews? Okay, all right, so because these reviews are supposed to be done dynamically, not just this. So I'm just fixing it in place. We will check all of these as we go on in the tutorial. See you in another part of our video.

Hello guys, welcome to another part of our course. And in this part, we're just going to continue building our application. Meanwhile, our the box session has expanded. So I'm just going to click on, uh, new session so that we can, you know, be testing it as we keep building the application. All right, so let's look at it and see, uh, what we have to do to complete the application. Um, let me see. I'm going to have to switch this to theer network just so that I can have things running a little bit faster. Okay, so, uh, let's come back here. So we did this in the previous part of the video. And, um, now we're just going to try to, uh, you know, continue from where we stopped. So, um, I just wanted to be sure that this has already started loading so that we can be sure that we have our debug session loading up. Okay, yeah, this is working. All right, so we have, you know, walked to this particular point. And, um, let's just look at this screen a little bit more. So we have small, medium, and large. Large. Okay, then the color. We have, um, the color here is not like this. So, uh, I don't know what we can use here. The color here could be something else. Um, I don't know what colors we can pick, put here. So we can say white. All right, so white, uh, yellow, and black. Okay, so we're just black. Okay, white, yellow, black. So we just have like that color option there. And this is like the quantity we want to purchase. All right, and, um, so what we need to do now is we need to go ahead and just like, you know, implement our cart functionality. So let's, uh, let's work on the cart. I'm going to go ahead and click on the, the this part here. I'm going to click on the, the Firestore. And I'm going to create another table. So I'm going to create another table called cart. And in this cart, I am going to, uh, you know, create, uh, the schema. So here is going to, let's go back and look at what we have here. Let's come back here. So our cart is just going to carry, like this. Okay, so the image of the product. We're just basically just creating the, the product. Okay, cuz, uh, let me see where we have orders. Order placed successfully. Do we have a screen that sees orders? Okay, so see order details. Well, we don't have it here, but we will create it eventually. But in this design, we don't have it. Okay, so, so but in this case, I just want to pick, uh, the image and then the price. Let's pick them at once. So let's, let's say, uh, uh, inventory image, inventory, name. So what we are buying. Uh, let me copy this inventory name. And we're going to say inventory image. All right, uh, let me paste it again. Inventory image. This is going to be an image path. Check. This is going to be inventory color. All right, color. This is going to be, um, we can just make it a string. Yes. Uh, name cannot be empty. Okay, so image color string. And a data type must be selected. I did select a data type string. Okay, then this is going to be inventory size. Uh, string. Okay, name cannot be empty. I think it's just my network not allowing it work properly. Inventory size. Okay, so what else do we have? We have size, inventory price, and, um, inventory price. Okay, so let's come back here and say inventory price. This is going to be inventory price. This is going to be double. And, um, let's see again. Uh, I think that's about it. We will just keep adding things, uh, depending on what we, what we missing and what we're getting. Okay, so, um, what we're going to do now is I'm trying to figure out what to do here. So click on this. Initially, like I think later on, we're going to upgrade the application where you get to see all, like, like, you know, implement these, uh, exact way it is in, in the, uh, in the, in the UI. Right, but but for this particular stage, we're just using no more text as the colors. Uh, eventually, we're going to upgrade this. I will show you how to achieve that. Okay, so inventory price, size, color. Let's call this, um, this is going to be the seller's ref. I need to know the name of the person that owns the product. So seller as ref. Uh, this is going to be document reference, referencing the users. Okay, and, uh, let's say date. All right, so this is going to be the date. Date time. Date. Uh, and check. So, okay, I think this is not, you know, working the way I want. Let me just do an instant reload. Reload, please. All right, so we're going to wait for it to reload up. Okay, so we have this and, um, let's see what we can do out of this. Okay, so we have all of that. And this is the quantity. So why is it plus here and minus? Anyways, arrangement doesn't matter. So let's say quantity. So we want a situation whereby, let's come here and add another one. So here is going to be quantity. The quantity the user wants to buy. Quantity. Quantity. Okay, okay. Quantity. It's going to be integer. Check. Okay, so now the user clicks on this, this number is going to have to change and increase. Okay, so that's like the idea. And, um, I think that's about it. Then this one is to reduce it. So how do we do that? And it has to be dynamically. Uh, what we can do is we can go ahead and, uh, we can come here to the page state, the the page. So we can create a a page state called Product quantity. Product qty. And this is going to be an integer. All right, and it's going to initial value is just going to be zero. Okay, so, uh, we will click here and then, yeah, I've saved up that now. So when the user clicks on this, we're going to do like an update of the page state. So I'm going to click to add an action here. Add action. I'm going to come to where we have state management, update page state. I'm going to look. It says your product quantity is going to have to increment by one. Okay, so I to increment it by one. And, uh, I'm going to copy the action here and click to paste it on this one. Um, paste it here. This is going to be a decrement. All right, so I would just say minus one. Okay, then, and the value here will be changing. So I'm going to change the value here. I'll click here and say, uh, page state. I'll select the value here. Okay, like that. It needs an initial value. So say zero. Initial value zero. So like that. Okay, so this is basically what we needed to do. And now we have done that. Then before we progress, let's make it such that when the user clicks on this add to card, right, the user clicks on add to card, we want the, we want, uh, to create an action like, create an action. The action is going to be a backend database action. It's going to be a Firestore action to create a document. So we're creating a document, creating a document in the collection called cart. And we're adding all the fields. So the inventory name, we're going to select the inventory name from what appears here on this screen. So here is going to, we're going to change it from specific to from var. And we will click here and go to the inventory document and pick the inventory name. Like that. So I'll close this. We go to the next one. Inventory image. Change from specific to from variable. I'll click this, go to inventory document, inventory image. Then I'll close this. Go to another one. Uh, I go to, um, where is it? We come here to specific value from variable. This is inventory color. So inventory color is going to come from what has been selected here. So let me rename this. This is going to be color. All right, then this is going to be size. Okay, and then, so when the user, uh, clicks on add to cart, inventory color, I'm going to say from variable. And if we come to the page widget state, we will see, uh, color. So whatever value was there and the color will be stored there. And then here is going to be inventory size. Change from specific to from variable. And then I'll have inventory document. We will say, no, not here. Uh, we will go to the widget state and then we will say size. Okay, then inventory price. I'm going to click here, change from specific to from variable. Click here and go to inventory document and pick inventory price. And then I'll come to, uh, this one that says seller's ref. I'll click here, go to inventory document, and I'll pick this thing that says seller's ref. All right, now that I have done that, the next thing that I need to do is going to be quite simple. Uh, I'm going to go ahead and add the date. The date is going to come from Firestore server timestamp. Then quantity here is going to come from the, the, the value of the page state, the final value of the page state quantity. Okay, all right, then, um, what else? I think that's about it. Yeah, that's all of it. So after the user clicks on this, it creates a document, and then the user is supposed to be taken to another screen. Uh, from here, you go to the cart page. Well, not necessarily, but I think when you say add to cart, it should take you here. All right, then, um, I think we should have a button that says continue shopping. Uh, okay, it doesn't necessarily need to take you to the cart. So what we can do here is, um, let me see, let me see. Let's add an action to this. So when the user clicks on, like, completes this, we're going to add an action. It's going to be a snack bar action, so that we can know that item in item added to the cart successfully. So like this. All right, so this is now added to the cart successfully. I'm going to come here and reduce this, uh, duration to two seconds. And this is going to be, let's come here and pick the color that we're using here. Uh, I'm going to click this dissociated and copy this and come back here and paste it here. Background color is going to be this one. And then the text color is going to be secondary background, that's white. All right, so that's about it. It's been added. And, um, the user clicks here and goes back. That's fine. Uh, so now, uh, what we need to do again is going to be, uh, let's come back here to our application. This is our application. So I'm going to come here to the CMS, you know, refresh the CMS. I want to add, you know, right now we are just, uh, we're using the CMS to do most of our, like, create creating some basic stuff. So, uh, I don't know, that's taking some time to load. So I'm going to switch it back to this. Okay, so yeah, I switched it back to that. It should load up so I can see what we are creating. Um, trying to reload this, but it's not giving me what I want. Okay, [Music] so all right, it's not, it's not working. So let's see. Let me bring it back to this. Okay, I don't know why we are having, it's not loading as I should. I should have it. I think I would just, uh, turn on a VPN. It might just help me get some things working a bit faster. Hopefully, it doesn't slow down my network. Let me see. Does that work for me? Okay, yeah, it does work. Okay, so, um, so here I have, uh, let's see. In my inventory, I have a couple of things, right? So here, as you can see, I added all of these things here. I have something here that says sell as a, uh, document reference. So I need to have like a document reference here. So I'm going to come over here and I'm going to copy, uh, this, uh, document reference. I'm going to copy these document reference. All right, then I'm going to come back here and say, users slash this. I'm going to copy all of this now and update the document. I've updated that one. Let's update this one. Update this one. So then update this one. Yeah, so that when we are creating all of that, we can have access to the information we need. And then here on this one. Okay, I think we have credit for all of them. All right, so that's about it. I have done for that. And, um, now we're good to go for real. So if we come here and just, uh, do an instant reload, wait for a couple of seconds, we should have our application loading properly. So we can actually just, you know, like taste it. So, um, I just want to see how the application looks with regards to the latest, uh, configuration that we have added to it. So we've added a couple of things here. So, uh, before we continue, I want to do something really nice and real quick. If we come here to the home screen, okay, and when the user clicks here, the user should be taken to the cart. So I'm going to search to take the user to the cart. Uh, we're going to see an instant direction navigation. And, um, here on this tab, we want a situation whereby, uh, if there is an item added here, some sort of number should be written here. So let me come here and look at how this, this particular place was created. We have container. I wanted to just have some sort of number around there. So I'm going to right click and wrap the widget in a stack. All right, and then I'm going to add a text. That text is going to be just a number like this. Okay, so, um, this number is actually going to be, uh, bold. And it's going to be, uh, white. No, not white. Maybe black. Actually, what what would I prefer? Okay, so I think, uh, this one. Yeah, so let's use that particular one. That kind of color. I'm going to push it a bit, uh, push it. Let's say 40. That's too much. Let's say 35. And, um, from the top, let's say 12. No, too much. Um, I'm going to click on this container and, uh, can I give this container some padding of 12? No, let's say six. Then click on this and make it 30. All right, so something like that. So I don't know if this actually really does help. Yeah, but, um, there was no UI for that. So I can't really tell the best way to do it. So, um, preferably, should we just put it under? I don't know. So, but anyways, that's like it. We just have like a number there. It's not the best of designs. I think later on I can change the UI. But at least let's have the functionality. So what will this thing do for us? Um, I'm going to click on the container here, or maybe not even the container. I'm going to click on the stack. All right, the main stack. And I'm going to query the cart collection. I'm going to query the cart collection. But I will be doing a count. Okay, and I'm going to do a filter. The cart is is going to, the, the, okay, what I did here was seller's ref. The the buyer's ref. I didn't do it. So let's come over here and add something else. So I say, uh, buyer's ref. Okay, that means the person buying. This person that is adding this. We can also say user ref. But let's just say like buyer's ref. Document reference. And user. And that's it. So this way I can do a query, uh, uh, checking the cart, checking the count of the cart, and then filtering it by saying that the buyer's ref must be equal to the authenticated user ref. Okay, so I want to see the number of items that are have been added in my own cart as a user. So now, and after I've done that, I can click on this, click on these and say count. And that way I can have it. But, okay, this is showing it's pushing things away from me. So what I need to do is I can go ahead and click on, let me click on this and add it in a combined text. All right, then just pick up my account and do like this. That way I can have it on top like this. So, yeah, this is it. It just, it's going to just show there for me, the number of items that I have. So here I will just go ahead and do a reload. And then since there's nothing, uh, it's just going to show. Okay, so if there's nothing, let's make it show something. Default variable value zero. Okay, uh, so it's just going to show zero. Yes, UI build a display value zero as well. Okay, so like that. So let me quickly do an instant reload here so we can like see how it works. Now that way we can successfully, um, I just wanted us to check that out. While we're waiting for that to work, there's one more thing we need to do. Let's go to that cart page and do some basic setup. If I click here to add an action to navigate back. Okay, that's it. And then this one now, I'm going to delete this row because this things supposed to come from the database. So I'm going to click on these and then I will say, um, I will click here to add a query to query the collection called cart. And it's going to filter the collection showing only the one that the buyer ref is equal to the authenticated user reference. Okay, that's like the idea. And I can come over here, click on the widget tree, click on the container, add some padding here, like 12, to push it down a bit. Then now I can add the images. So I can change it from assets to network. And then click here to put the inventory image. Now I have to, you know, pick a default variable value. And I'm going to put it here, you know, then confirm. Then here I'm going to put it as the name of the inventory. Cart inventory name. Um, then this one is going to be the, uh, inventory price. Number of format, uh, custom specify format, display as currency, check. And then here in this part, we're going to still do something from database. So the size here is going to come from the cart document for inventory size. Uh, okay, no, I'm not going to do like that. I'm going to put it inside, uh, a combined text, just so that it can be properly arranged. So I'm going to click there and say cart inventory size. Check. Okay, that way it still shows like this. And then, uh, here on the lemon side, the color, uh, we'll come to combine text and say cart documents color. And, um, check. Okay, so that way everything is still arranged correctly for me. And, um, that's about it. So I have this, and I have the image. So I think we need to check, change something. Um, let's come to where we have the, uh, cart. Where do we have the cart? Uh, where is it? Okay, so I think this is where we have the cart. So I think this item has some padding from here, eight. So we have to add a padding here. I would prefer to add 12. Yeah, so push it a bit like that. Okay, so this way we have it arranged a bit. And, um, uh, then we have this. I'm going to remove these and make it 40. Just even totally remove it. Okay, so we have this. Let me see what else is there that is not allowing me see everything. So we have a checkout button. And I'm just going to click on the, the screen and say, uh, scrollable. So I can scroll down and see what is inside here. All right, so, uh, here a shipping cost and all of these, total. Um, so well, we can, I will show you how we can do all of this, but not in this particular part of the course. So I just wanted us to see how it looks like first. So I click to to check out. I just wanted us to be able to observe the cart. So right now, we have done this. Uh, what we need to do next is, um, check out how it looks like. So let me do an instant reload. If you observe my, for some reason, everything is being scattered a bit. I think it didn't load properly. Yeah, it didn't load properly because if I come back here to home, everything is still okay. It just didn't load properly. I don't know what's wrong with, um, I think it just has to be my network. Okay, so let's see how it looks like cuz, uh, I'm just waiting for these to load up so we can see how it looks, looks, looks out. Okay, so, but so far, we have, you know, done something remarkable. Okay, now it's just bringing me here. Just, I don't know why we have these here. Now I don't know why we have this here. I don't know why we have this here because, uh, this is where we have it here. And for some reason, we have it, um, what we did differently is just this stack. Okay, and, um, we added these, and, uh, so this is the only thing that we added. And some for some reason, it's not showing properly anymore. Um, okay, so what do we do here? I think, um, should I just like, uh, reduce this and say, okay, I'm gonna do like this. I'm going to right click. I'm going to wrap this particular one. I'm just going to redo the UI a bit. Okay, then I will bring this text and, uh, click on this, uh, oh, it didn't allow me put up that row. Okay, so this, I want to wrap this in a row. Okay, and then in the row, I'm going to have, um, I'm going to have a text. The text is going to say, um, in bracket one. Yeah, like this. And, um, so we can click on this, uh, I want to be able to like pick up what we have here. I'm going to just like copy the variable. Click here, click here, and paste it. Okay, so that's like it. Uh, okay, so now that works actually, but not the way I want it. So let's put it this here. No, we're putting this here. And we're going to drag this down. And then we click and put this here. So this where it shows, uh, we don't have to really put this actually. Okay, we can put default variable zero and confirm. But for some reason, it's still not showing me. I want to see how it looks like. Okay, yeah, this is it. It shows like this. Um, okay, is going to put it, put it like that in the bracket for me. Uh, this is their, oh, this is actually like an image. Okay, so let me come over here. Um, this is a dropdown. And it's okay. All of this is in, okay, so I'm going to cut these. Uh, I'm going to click on this and copy the query that I did on this. Just cut it out. And then I'm going to paste it on this container. Okay, then I'm going to cut this container out of here. Click this and delete the stack that I brought in that time. And then paste this. Okay, so now I still have all of these like this. The only thing is that it's pretty much, um, it's not giving me the vibe that I wanted. Like because I have this image here. This image, I'm going to reduce it to like 10 and 10. No, doesn't make sense. Okay, so 16 it is. Okay, so then maybe this one, I can reduce the size to [Music] 12. Uh-huh. Yeah, will that work? I think so. Okay, maybe 10. All right, so click on this and then come over here. I want to copy. Okay, I used the default image there. Uh, let's come here to where we have this. And I'll just pick this particular, yeah, so like this. So, um, let me come back here to the test mode. Oh, this has expired actually. So, uh, I'm going to click to do a new session. But we're going to continue this particular part of the video in the next one. Okay, see you soon.