Flutter Multi Vendor Food App | Part 3

[Music] a [Music] la [Music] continue to work on our midw but before we work on our middleware what we need to do we need to rectify this part okay it's supposed to be API slash uses okay not just uses it has to be like this okay so since we got that out of the way let's go ahead to our middleware and work with our middleware it looks like we do have a middleware in here already but what we can do we can just go ahead get rid of everything and then we can start from scratch okay so when you're working on our middleware what we need we need our JWT okay so we need to import JWT and we need to specify where where that JWT is coming from it's going to come from Json web token okay so it's a package that we've installed already if you check our package.json we have the package so in here we need to go ahead and create the functions so our first function is going to be verify token okay verify token so our function is going to take in it's going to take in a request response and next request response and then the next function okay after that we need to go ahead and have our R function and inside here we're going to work on our function so let's just go ahead and list all the functions that we need before we we start working on them okay so the next one should be verify and authorization verify and and verify token and authorization okay and let's close that after that we need verify vendor let's add con verify vendor it's going to take the same parameters and we need to close it down at the bottom we're going to require verify admin it's supposed to be verify admin okay so here this spelling mind the spelling it's supposed to be verify so these are the four functions that we're going to require here but sooner or later we might need to make one but let's just go ahead and do it cuz it's not going to give us trouble it's supposed to be verified driver okay this one is going to be for the driver part and down at the bottom we need to export these functions okay all of them so we're going to have verify authorization verify vendor and verify admin verify driver okay but verify verify admin and verify administ verify driver we are not going to use them but we're just going to create them okay so here what we need to do first we need to work on our verify token so verify token we're going to require our token from our o headers cuz we're going to be getting this token from from our headers okay so first we need to extract our our o headers o headers is equals to requests do headers do authorization so our token is going to be under authorization okay okay so by under authorization if you visit Postman okay so this is authorization and our token is a beer token this is our authorization part so if we go to our headers here if we go to let's see okay we have authorization this is the ver varable that we're going to look for inside of our of our heads okay so let's go back to our project so once we have this authorization we need to check not ones we have we need to check whether we have the authorization or not so to check we need to just have a condition on or headers right since that's where we are going to store our our headers okay so con so now we need to extract the token from from heris do authorization cuz if our token not if our token is a be token so it will come like it will come like this bear token and then our token here okay so we don't need the beer we just need the token we need to extract that token from from our authorization so here we're going to have token is equals to we need to access these Au areas that we we extracted on top and then we need to use the split method and we're going to split where there's a a space and we're going to get the first index the first item after the space okay so down at the bottom we're going to have JWT do verify okay we need to verify the token so to verify the token we need the token itself and we need to go ahead and have our secret key okay so we need to access our EnV and then we're going to get the JWT secret JWT SEC okay so this JW tore SEC is something that we have in ourv already so here it's supposed to be secret so we're going to copy this and we're going to paste it here okay so it's supposed to be JWT uncore secret so it's the same secret that we used when we were getting a user when we're logging in a user okay so if we go to O controller login User it's the same it's the same Secret key this secret is the same that we're using Okay so let's go back to our our mware after that we need to go ahead and process our data okay so here we're going to either have an error or we're going to have the data related to to the Token so the data is going to be stored in the user okay so if we do have an error that means that token is invalid okay so if we have that error we need to go ahead head and return we just going to return a status response. status and our status is going to be 400 and three uh supposed to be status so here supposed to be 403 not 42 response. status and we need to pass Json so in our Json we're going to require the the status and the the message so status is going to be false and our message is going to be not error. message but here we are going to say invalid token like that okay so if I eror if our token if we don't have this error then we're going to process our token okay we're going to have to put the user inside of our of our request okay so request. user is equals to user okay so by doing this that means we're going to put these variables inside of our request that's why when we say request. user. ID we're accessing this ID if we say do user type then we're accessing user type do email then we'll be accessing the email of that particular user okay and after we've put this data inside of our request user then we're going to proceed to the next function okay so we're not done is yet so here we do have an if statement right we need to process a condition whereby that's okay in a situation that we didn't get authors okay then we have to tell a user that you're not authenticated that means they didn't provide the token to us okay so we are going to return a response with a status of 401 our St is going to be false and our message is you are not authenticated okay so that's the first so now we want to move on to verify and authorization so in verify and authorization what we're going to do we're going to take this function that we have on top the verify token okay and we're going to also take in the request response and our next function is going to come here okay so in here we have to have a condition so we have to check if the user type okay like the person who's sending the request is a client client driver administrator or a vendor that person is allowed to to do some particular tasks in the application so so we're going to access our requests then user and here we're going to get user type okay so this user type is coming from let's visit our Au controller is this user type that we have here okay if the user type is equals to one of the inms that we have or not one it should be one but we're going to use all so it can be either one of the inms that we have then that person is eligible to perform those tasks that we are protecting with this particular particular middleware okay so if we go to a model and visit our user model so these our these our rows okay so let's just copy all the rows that we have I'm going to paste them in here and add add a comment okay so if the user type is client or if the user user type is equals to admin no if the user type is equals to vendor or the user type is equals to driver then we're going to allow them to go to the to the next function let's see okay it should be like that that's next let's bring this down bring this down bring this down as well so that we can have our function in insight okay so here we need else if they don't have a role then we are going to just go ahead and send back a response a 43 okay cuz that means that user is not allowed to access the the routes okay something like that so that's what we need for this particular particular mirare so we are done with verify and authorization so now we need to move on to verify vendor so verify vendor is going to take the same pattern is going to take the same pattern so we can copy everything that we have here and just delete some of the parts so down here let's paste whatever we copied so for a person to be able to do what a vender do that person has to be a vendor or and administrator okay so let's get rid of this part and let's get rid of the driver like that so if a person is a vendor or an administrator they're allowed to do what a vendor can do okay for administrator this one is going to be open to the administrator only so we need to just paste the code and we get rid of this vendor okay so that's going to be our middleware and for our driver let's see whether we do have a driver in our in our user yes we do have a driver so so those are going to be all midor so now we need to go ahead and visit our our routes all of our routes and see which routes do we need to protect and then just protect the routes so first we're going to go ahead with the user okay not we're in models so we need to go to routes user okay so in our user all these ones they need to be protected with verify and authorization so here we need to import verify and authorization let's just copy the name I might misspell the name okay let's just minimize the the room for errors is equals to require so here we need to specify the path so our router our middleware is going to come from middlewares and it's going to come from verify token so this is the middleware that we're going to use so we're going to place the the middleware in between okay so here you can add a little bit of space that's okay okay so we've protect Ed user routes now we can go to restaurant okay so for restaurant we already have this one I've already put this one so you need verify and authorization so for a person to post food they have to be authorized okay so I'm just going to use verify and authorization but you can use verify vendor here that's the most logical thing to do so uh this part will not be covered in this particular section but if we happen to make the restaurant side if we happen to make a tutorial for the restaurant side then this part should be covered in that okay and for our rating we are going to have verify and authorization for a person to make a rating they have to be authorized since we require a user ID to to r a particular particular product so this they need to be protected as well for food we need to have a vendor here to add food you have to be a vendor okay so make sure that when you're uploading food then your role should be of that of a vendor not of a client so to change the row you just need to go to your database okay let me open my database and then I'll show you before we we proceed cuz it might cause a little bit of confusion a little bit later okay so let me just log in so why are we doing it through the database we're doing it through the database because this part can only be taken care of in the administrator side this is the work of the administrator okay not a user not a vendor not a driver only the administrator can be able to change someone's role okay so in this part since we're not going to look at the administrator app this is the only way that you can do it you can go to your browser go to your Atlas and then you go to your database okay in your database you need to go to your user collection users collection so let's say this is the vendor this is the person that you need to change their their rle so you need to just come here to use a type and change their rle to vendor okay like that and then you just update it here okay simple as that okay so we got this out of the way so let's continue so we're done with this part the only route that needs to be protected is the posting okay the person has to be a vendor and why this one needs a verify verify and authorization cuz it's adding a restaurant okay so the person should just have a client account and then they're applying so when they applying they are submitting their ID using this verify and authorization after they submit their ID the administrator will review the data that they have submitted if they are suitable enough to become a restaurant then they administrator will go ahead and change their role from a client to a restaurant okay I guess that's clear enough so let's go to categories so for categories you can e I'm going to leave them open so it's your task to choose who do you want to upload categories it's either the administrator or the vendor but for you to keep your application clean the administrator should be the person who is responsible for this particular task so these all the routes that we need to protect and everything that we need to do pertaining our middleware what I can do just to run a quick test we're going to test a little bit further but for now I can just go ahead and try to get a user profile okay so let me just send this if we don't have an error this should be successful so all our middlewares are working fine without any error since we're getting the data here so we are done with this part let's move on to the next one we're done creating our routes what we need to do we need to go ahead and test our our routes we need to go ahead and open Postman first okay since we have our Postman open what we need to do we need to register a new account first so we need to go to sign up but make sure that you have your best URL set here and your environment is this the correct environment cuz if you choose a wrong environment probably your endpoint your url your best URL is going to be wrong so here we're running our application on P 6,3 so this is what we have here so to register we are going to just try to register this account so I'm just going to press send so we're going to run into this eror and the message is EnV is not de finded okay so what we need to do we need to go back to our project so in our project we need to go to our create user function so in our function we need to just see where we're using EnV so we're using EnV here so if you take a look process comma EnV it's supposed to be process dotv okay so that's an error that we need to fix after that we need to go ahead and try to sign up for this account okay so let's go ahead and try again okay so now we've successfully created an account so just to check whether we've created an account or not we can check our database first just refresh our database so here we have 19 19 users okay so we should have 20 by now okay so now we have 20 so that we've successfully created an account so down at the bottom this is the new account account that we just created and this is the code that has been sent to to the user just to check the code we need to visit our email so here this is the email so if we check this is 91831 it's the same as this one so it's the email that we just received by now so since we are sure that we can create an account and send an email an OTP what we need to do is to go ahead and try to log in a user okay so to log in a user we need to go back to our Postman and in our Postman we need to go to login okay so these are the credentials that we're going to use the email and the password so you just need to hit send but make sure that everything else is in line especially the best URL this route is an open route it doesn't have any middleware any token okay so you just need to make sure that the Bas URL is correct and then press send okay so here we do have another error and the message is cryptojs do decrypt is not a function okay so let's go ahead and visit our login function let's just close this create user since we're done with it so login user cryptojs this is where we using cryptojs so when we using cryptojs we should use cryptojs dot a and then we write decrypt and then we put whatever we want to put right here okay so this is the origin of our error line 71 so the line might be different from yours but you need to take care of this cryptojs does. decrypt okay so let's go ahead and try to log in a user again so we're going to send this request and here we do have another error and this error is related to user do do okay so if you want to access this user document we're not supposed to use do doc but we supposed to use doore talk okay so if we go down here it's supposed to be dots uncore doc okay so we need to go ahead and try to log in again so if you press send we successfully logged in but we're returning more variables then we need so we need to get rid of these three created de updated de and underscore uncore Fe so let's just go ahead and remove them here okay when we deconstructing we should just go ahead and get rid of them supposed to be updated it and we need underscore uncore V like that okay let's add a comma and then save after that we can run the same request again so now we have these okay these are the variables that we we need and we have an extra one which is our user token so that means we're successfully creating our token and it's being sent back with the response when we log in so now we need to make sure that we go ahead and verify this account so to verify account the end point the request is not in the collection so you just need to create one get get request okay so I've created one already and I've called it verify account okay so here the service endpoint is supposed to be API SL user SL verify SL and then you put the number of the the OTP number right in front and it's supposed to be a get and one of the thing that we need to add this one is a protected route so you need to have a token so to add a token what we're going to do you come to log in right so you've logged in and you've successfully obtained like token right you copy that token and you go to your environment create a new variable and then you need to paste the token okay let's just press edit here you need to just paste the token here so that's going to be the token that we're going to be using for this particular user okay so to verify we need to go ahead and choose the authorization type so we're using a br token so you need to come here choose be token after choosing be token you need to put the token here so it's just braces and you choose the user token so we are done with that part but we need to have a correct OTP here okay so our correct OTP is in our email so if you visit our email we're going to get this OTP from our email go back to postman and then or Postman we need to just go ahead and paste this make sure that you have that here so let's go ahead and send the request because if we check let's let's just check before we send the request here uh verification is false so whenever we send this request on this verify account and request we we supposed to get this one is true so let's just go ahead and do that okay so our verification is true okay for phone verification it's going to be a little bit tricky because we're going to use Firebase to take care of that and then after Firebase we are going to be just updating this part we are not going to be Shing the the OTP but after just the verification from Firebase we're going to update the field so that part we're going to take care of it later but so far so good and one other thing to add to to the explanation since we are getting things using our our token if you're getting response using our token that means our middleware is working fine we don't have an error related to our middleware so all the errors that we've corrected are the errors that might have hindered you from like doing some further processes but we have gotten them out of the way so we can proceed to other functions that requires us to have middle words and to have a a user okay so let's go ahead and continue working on our project so we have our address schema already the main focus is to go ahead and create our address controller we need to create a new file and we need to call it address controller and it has to be a JS file so after creating what we're going to require in here we're going to require our model so first we're going to have our user model so we need to access the path of our user model so it is in models and in models we need to access our us a model so down at the bottom we need to go ahead and have an address model okay we need to give it a name first and we need to provide the path okay so path is going to be models and from Models we're going to get the address okay so right at the bottom we need to export our our models not models but the functions that we're going to create okay so now that we got that out of the way we need to create our F first function our first function is going to be create an address it's supposed to be create or add Okay add address so or add address function is going to be asynchronous and it's going to take request and response so in here what we need to do we need to create a variable of our address okay so we're going to call it new address is equals to new address like that okay and we need to have brackets and braces so the first thing that we're going to require is the user ID so for user ID we're going to get it from request user. id request. user. id okay like that next we're going to have address line one okay so for address line one is going to come from our request body do address line one and we're going to have our postal code or postal code is coming from request body. postal code and for our default is going to come from request body. default and down at the bottom we need delivery instructions so delivery instructions they're going to come from request body. delivery instructions and we need latitude and longitude so latitude and longitude so after this we have an object of our address okay so down at the bottom we're going to have a tri C block so in our TR cach block what we need to do we need to check if the address that's being added has this value set to true or false okay if it is true we need to go ahead and set all the addresses that we have belonging to a particular user set to false okay cuz we don't want two default address belonging to one user so we need to check first and then if there's an address which is already a default address we need to set it to false and then we can go ahead and save our address so here we're going to in our try we're going to have a condition so let's bring this a little bit down so that we can have a little bit of space so we're going to have a condition if a request do body do default okay so if our default is equals to true then we're going to have our condition so we're going to await for our addresses address do update menu okay so we need to go ahead and use the user ID to look for for addresses right so here we're going to have user address user ID and our user ID is going to come from request body do request do user ID do ID do ID okay and we are going to update the default field okay after comma we need to add another brace okay this should be here okay we need to update defaults and we need to set it to false okay so once this is done then we need to go ahead and save our address right at the bottom we're going to await the new address and we're going to use the save method to save that address after saving the address we need to send back a response back to the user so it's supposed to be response. status so our status is going to be 2011 and here we need to send back a status and a message so the message is supposed to be address edit successfully okay so we get that out of the way if we have an error we're going to send back a response with a status of 500 uh and in here we need to pass back Json so for Json okay so here do Json so for Json we need to go ahead and have a status so for status is going to be false and our message is going to be message. eror so let's get rid of the extra brace okay so that's it for adding an address this is our function after that we just need to let's just create a little bit of space here and we need to close this let's close this function at a coma and move on to our next function so our next function is going to be get addresses okay so to get addresses we're going to get all the addresses belonging to a particular user okay we're not going to okay let's here what we can do is to try to run the application and have like an illustration wiist we're looking at what we are trying to achieve exactly so we are going to do that a little bit later so here we're going to take request and response after that we need to have our function in here so inside of this function we need a TR catch okay so in our TR catch what we're going to do we are going to create a new instance where we are going to store our addresses so we're going to call it addresses okay so our addresses is going to await address do find okay so here we're going to find addressing using the user ID user ID so this user ID is going to come from request user. ID what we're just going to do is to send back the response if we have the addresses here we need to send back a response with a status of 200 and we need to send back back Json okay so our Json is going to be this list of addresses that we have here if we do have an error then we're going to just send back a response with the status of 500 and we need to send back Json so in our Json we're going to require the same parameters we're going to require the status and our status is going to be false if we have an error and we need a message so the message is going to be error. message so let's get rid of the extra bracket and Brace and then we close this here okay so we are done with getting addresses here so what we can do next is to set default address but before we say default address let's just go ahead and create another function to delete address okay so this one we might not use it in this particular section but it's good to just create it so if you want to delete then you can go ahead and just finish the the task cuz it's really simple it's really simple to just delete okay so here we're going to take a request and a response after that we need an AR function and we need our brace and in here what we're going to do we're going to have our try catch in our try what we need to do we need to await after awaiting we need to access our address and find by ID and delete okay so the address that we're going to be looking for we need to provide the we need to provide the ID for it so the ID is going to come from requests do perms do ID like that let's close that after that we can just have a response response with a status of 200 the status is going to be true message address successfully deleted so if we do have an error then we're going to pass back a 500 let's pass back a 500 here status is going to be false and we need to send back a message so our message here is going to be error. message okay like that okay so we are done with that part let's save so we're done with three functions so the most important one is to get a default address that's something that we need to take care of so let's go ahead continue get default address and then we can get we can set addresses as default okay right after delete address we need to go ahead and create another function to set address as default as default like that okay the spelling is a little bit wrong so here supposed to be default so it's going to be an as synchronous function so right at the top we're going to require the address ID okay so we're going to have address ID so let's just do it like that address ID okay cuz we need to be a little bit specific and here we're going to have our user ID as well so our user ID is going to come from request user. ID down at the bottom we're going to have a try catch so in our try catch the first thing that we need to do if we setting an address as default we need to just check whether other addresses are set to false or not okay so what we can do we can do this same as we did before when we are adding an address okay so we need to go ahead and await access our address model and update manyu so we're going to be using the user ID to find all the addresses related to related to a particular user and then we're going to set the default as false okay that's the first thing next what we're going to do we're going to go ahead and create a variable with the name ofd address con updated address is equals to A wait address dot find one and update find by ID and update okay so we are finding by by ID so when we finding by ID we need the ID so our ID is going to be the address ID okay and we need to set this to to set the variable default to True okay default here is going to be true okay after that is done then we just need to close that one right at the bottom we're going to have a condition to check whether we do have an update or not so we're going to say if updated address then we're going to go ahead so now we want to what we need to do here let me slow down a little bit what we need to do if we do update an address then we need to go ahead and set that address as a default address inside of the of the user user schemer okay so we need to push that address here okay so let's go ahead go back to our address controller so what we need to do here we need to await for our user okay so we need to find one in update find by ID and update okay like that so our ID is going to be the user ID that we have on top and the address that we're going to push is the one that we have right here on top okay so now we are attaching a a default address to to a user okay after that we just need to go ahead and send back a response to to the user okay so in this if statement we just need to send back a 200 okay and if this is this condition is not met then we're going to send a a 400 address not found okay cuz if this condition is not made that means we didn't find the address so that's all that we need to do if we do have an error then we need to send back a response with a status of 500 we send a status as false and the message is going to be err message so we're done with our default address so we need to create another function to get a default address okay so down at the bottom is get default default address like that okay so our function is going to be asynchronous as usual and it's going to take request and response and we're going to have okay we need a variable first so this variable is going to be const user ID is equals to request user. ID and in our TR cage we need to find this ID okay so we need to create a variable where we are going to store the address and we need to await for the data from our database okay so it's supposed to be a wait and we need to a wait dot so here we are going to find find one so we need two two variables the first one is going to be the user ID so user ID is going to be user ID and we need to find where this variable is equals to the default variable is equals to true that's going to be our default address and right at the bottom we just need to send back a response and we don't need to send back the default address do we let me see yeah we do so we are sending back the the address and here we need to send back the status with the 500 and Json let's go ahead have our status our status is going to be false and the message is going to be error. message so let's get rid of those so we don't have an error let's save that so that's all that we need to do for addresses the next thing is to create the routes and go ahead and test these endpoints in Postman so we have 1 2 3 4 five we have five functions that we created related to our addresses so next thing is to go to our routes and create a new file and we're going to call it address okay and it has to be a JS file so we need to just go ahead to one of the smallest that's rating and then copy the content of our of our router and then we paste it here so we need this to be there we need the middle word but we need to have our controller so here we're going to have address controller is equals to require we need to specify the path so our path is going to be controllers address controller like that so first we need to have a post so our post is going to be uh to to add addresses all right so what we can do here we need the mware and we need this to be be M to address controller and it's supposed to be add address okay get we need to get ID not get what we need to do if it is get we need to get default here so if if we are getting a default we don't need an ID okay so what we can do we can just get using the token not the token but the ID and where default is equals to to true that's going to be one address P each and every user okay so we don't need to specify the ID so here let's go ahead and map this to address controller so we can say get default here so let's have over Okay so this pin out is pin out well we don't need anything in ours so this is okay down at the bottom let's go ahead and have a delete okay so to delete an address we're going to to just require the ID of the the ID of the address that we need to go ahead and delete and we need to change this to delete and here it's supposed to be delete address okay so we are done with that part to set as default we're going to have a patch when we're patching we are going to use default as our service endpoint and then we need the ID okay so here we are going to M it to set a default so if we have over we need the ID and this ID should be passed as ID in our params okay so this is okay so we have four functions but we need to get all addresses as well so let's just copy this get and then here we can just have get okay so this is supposed to be get addresses so we are done with this router what we can do next is to go to our sjs you know sjs we're going to have our addresses here let's see whether it's address or addresses visit Postman and we go to our address folder it's supposed to be address not addresses so that's correct and we need to import our router so our router is supposed to be address Route like that and here it's supposed to be M to address so here we need to copy and we need to replace this rating route with the address Route and let's save if we don't have an error our server is going to run successfully so we don't have an error so that means we're done with this part the next part is to go ahead and run some test in Postman and then we can proceed to the next one and run our Postman test so what we need to do we need to go ahead and open our Postman so in our Postman we need to go to our address folder so in our address folder the first thing that we're going to require authorization so our token is going to come from our environment okay so we need use a token let's save that so first we need to go ahead and add an address so we do have an address here but the format is a little bit off I'm going to change it a little bit I do have another collection okay so I'm going to copy this address that's going to be our address format and I'm going to paste it in here okay so here is supposed to be San Francisco uh let's go Union Square okay so this can be the same main entrance as for reception or we can just say leave the order or the package let's call it a package by the gate okay so like that supposed to be a package here so we do have the longitude and the latitude the latitude and the longitude so we're going to leave it like that since we are just going to test okay so let's go ahead and save this and we push this request okay so we need to change this base URL to our base URL okay so let's cut that and we bring it here and let's send the same request okay so our address has been successfully added okay so we' added this address so if we get address get all addresses we're supposed to get this address as well so here we need to do the same base URL and if we send this request we're supposed to get this address as one of our of our addresses okay this is working fine let's add one more address okay so let's just call just change okay this can remain the same but we just need to have two addresses inside of our attached to this user okay so we're going to get addresses so now we have two addresses so if you take a look our when we add an address this is going to be set to false this default is going to be set to false and the new address is going to be okay so since we got that out of the way now we just want to get the default address so let's go ahead and change the base URL and send the same request okay we do have an error let's see address default that's a post is supposed to be a get you are not authenticated so here we need authentification we need a token so be a token let's save that and let's send the request okay so we have our default address here we changed the wrong one it's supposed to be this one but anyways we can we can revert it so we're going to use this one so this is going to be our get default address okay so if we send this we're supposed to get this but this one is supposed to be set not get so we can change this to set okay so let's go ahead to our project in our project we need to check something uh set default address we need to check the router when we're setting that's a patch okay uh let's see whether it's a patch or not we just need this that we can just send it as a get request as well that won't be a problem ID true okay patch okay let's do it as a patch so here we're going to change this to to patch so we need an address so this is the variable that we need to focus on so the address that we need is the address with the false value this one okay so let's just copy the address go to this to this end point we need to add an ID okay so here we're going to add an ID let's save it first and let's try to send this request okay set as default so now if you go to ghetto addresses this address should be the default and this one should be false okay so let's go ahead and send this request okay true false so everything is working properly so we are done with that section next let's go ahead and move on to our cart okay that's our cart then we can move on to to ers and focus on our cart the first thing that we need to do is to go ahead and create a model for cart so we need to come to our model folder in our mod folder we need to create a new file and we need to call it cart and it has to be ajs file after creating the file we need to go ahead and import an instance of mongus it's supposed to be mongus here is equals to require mongus and down at the bottom what we're going to do we're going to create a card schemer okay so it's supposed to be card schemer supposed to be schemer right here schemer is equals to new schemer okay and we are going to close that so right after that we need time stamps as well for this cart okay so let's just go ahead and Export this schammer and then we can work on our our fields so modu exports we're going to export our mongus model with the name cart and here this supposed to be cart schema okay this name has to be the same so we're done with that part let's go ahead and create our schema so the first thing that we're going to require for each and every cut item is the user ID so our user ID here we're going to make it a string okay not string per se uh let's make it a a schema type okay so our type is going to to be mongus do schema. types it's going to be an object ID like that and our reference is going to be users user not users like that and required is going to be set to True let's go ahead and close that we don't need that right at the bottom we're going to need the product ID that's the product that we're adding to the card okay so our product is going to be food so here is supposed to be the same schema types. object ID the reference for this one is going to be the food schemer okay food model I mean and it's going to be required as well there's no way that we're going to add something without the without the the food ID so here we're going to also require an array of tives so let's go ahead have our type so our type is going to be an array required is going to be false and by default we're going to set this to an empty array okay like that and and down at the bottom we're going to require total price you can call it total price or price and our price is going to be of type number and it's going to be required and down at the bottom we're also going to have quantity okay supposed to be quantity here and our quantity is going to be a number and it's going to be required so that's going to be our schema let's go ahead and save that after saving now we are eligible to work on our controller so before working on our controller what we need to do we need to create the card controller like that and it has to be a JS file okay so first we need to import we need to import the the cut model is equals to require we need to provide the path with which we are getting the model from okay supposed to be model and then here we're getting the cart model okay so let's close that and let's just go ahead and Export and Export all the functions that we're going to have in here let's move on to create our F function so we need to create a function to add product to C okay so here it's supposed to be add product to cart okay so let's just go ahead and make our function a synchronous is going to take in a request as well as a response we need an error function and we need to close it down here okay so after that let's go ahead and correct this it's supposed to be add product to cart so when we're adding a product to cart the first thing that we're going to require is the user ID so we need to capture the user ID from from our middleware so it's supposed to be request. user do ID okay so now that we have the user ID we can go ahead and capture the the data that we're pushing from our request body so from our request body we're going to require the product ID and we're also going to get the total price okay that's supposed to be total price and we're also going to get the quantity so these are going to come from from our request boing as well as uh here let's go ahead have additives and we are going to also have okay let's just put the the card schema here quantity total price erative like we have everything that we need so let's go ahead and close this so now that we have the data that we need we are going to have a variable we're going to create a variable with the name count okay after that we're going to have a TR cach block so in our try the first thing that we need to do we need to go ahead and check whether this product that we we're trying to push to the cut exist or not okay so we're going to have a new instance uh we're going to find the product and store it in this instance that we're creating we're going to call it existing product right so our existing product is going to await and we're going to look through our cart and we're going to find one so we need to use a combination of a user ID and the product ID to find the product okay cuz each and every cut item that we have is attached to to the user ID as well as the the product ID so the these are the two variables that we're going to use so here we can either do it this way like user ID and here we do have product ID okay like that so both ways they work the same so if we have an existing product what we're going to do we're going to just go ahead and have another condition down okay but before that we need to have our count here we need to get the count of our cart so count is equals to A wait because we need to send this count back with the response so that we can we can change the number of our number of our card okay wait so here we're going to have our cart and we are going to count documents okay so we're going to count documents with this same user ID not updated it it's supposed to be user ID here so our user ID is going to be user ID like that so now that we have this count we deal with it later so we need to check if we do have an existing product if we have an existing product then we're going to just increase the quantity of the product right so if you add an item twice we're not going to add a new product but we're going to increase the count and increase the product the price of that particular product that you have in your cart okay so we need to access an existing product dot total price here our total price is going is going to be plus equal to total price okay and the quantity is going to be the same plus equal quantity uh not quantity here plus equal quantity okay so let's let's do it this way quantity so if it is quantity if it is not plus one here we have to multiply the total price times quantity okay since we're getting this quantity from this variable okay so as soon as we finish this then we are going to save the document so we're going to await and we're going to take this EX existing product and then we're going to save it after saving the document what we can do we can just send back a response so here we can return response with the status uh our status is going to be 200 it's going to be 200 here and we need to send back Json so our Json we are going to require the status so status is going to be true and we are going to have count that's the cut count so we're going to send the cut count as count here like that so else we don't have like this existing product what we're going to do we're going to go ahead and create a new cut item so here we need to create a new variable where we're going to store this new cart new cart item okay so our new cart item is going to be new cart so for cart we're going to we're going to record the user ID the product ID the total price the quantity and the additives okay and down below we just need to go ahead and await and then we're going to await for this new card item and then we're going to save it after saving then we need to also go ahead and have our count so our count is equals to cart count documents we're going to get this by user ID and we need to send back a response so we need to copy this and we send this response okay so for this one if you're creating a new one our response is going to be 2011 okay else if we do have an error if we catch an error here we're just going to send a response with a status of 500 here is going to be false or status this status is going to be false and our message is going to be. message so that's our first function to add productss to cart okay so next we're going to have another another function to remove remove Cut item okay so to remove Cut item we need to create a function make it a synchronous and our function is going to take in request and response okay so here we're going to have a request and we're going to have a response let's close that and in our function we're going to go ahead and have our Item ID okay so we can call it cut item id like that is going to be request par. ID so we're going to get this from from our params after that we're going to also require a user ID so we need to create an instance where we're going to store our user ID and our user ID is going to come from request user. ID okay and down below we're going to have a try catch so in our try we're going to go ahead and await for our cart and we're going to to find one and delete so we're going to use this ID that we have to delete so here we might not need this okay we don't need it since we are pushing the ID so we know exactly what we are deleting okay so what we can do here we can ID is equals to cut item id okay so that's how we are going to delete okay we need our user ID cuz as soon as we delete we need to update the count okay so we're going to reord require a user ID and our user ID is going to come from request. user. ID let's close that down at the bottom we are going to have count okay so con count is equals to await cart do count document and we are going to use the user ID to find the documents that we have and down at the bottom we are going to send back a response so our response is going to be uh is going to have a status of 200 first and we're going to pect Json so in our Json we need to send back the status so status is going to be true if this is successful and our count is going to be count the count that we get here okay so a wait a wait everything checks out so if we do have an error we do the same response do status our status is going to be 500 and we're going to send back the error so let's save that we we done with that so here it's it's just the same as we were doing before so that's why I'm not even trying to explain it okay so you've seen how this works when we're trying to to test our o our o o o routes our errors will be shown okay if we use error do message we'll see what the error is and we can easily redirect to that part and rectify the ER and then we can move on okay so let's just format the code a little so our code is formatted right at the bottom we need to create get cart function okay so here it has to be a synchronous and it's going to take a request and a response let's have our AR function and inside we're going to have a try catch so right before our TR catch we're going to capture our user ID like that so here we're going to you create a new variable and we're going to call it let's just call it cart okay we don't want to have anything fancy see and for cart we're going towait for the data that we're getting from our database and we're going to find so here when we finding we're going to use the to find where cut items have this same user ID okay those are the the documents that we are going to to fetch from from our cart and down below what we need to do we need to go ahead and populate so here we're going to go ahead and populate we're going to populate the product ID okay product ID that's our product so that's going to be our path so for path our path is going to be product ID like that and we need to select parameters related to our product ID so the first one is going to be the image URL image URL that's the first our next is going to be the title of that particular product and we need our restaurant as well and we need rating and rating count rating count okay those are the things that we're going to populate so we need to add a comma here and we need to populate one more section which is going to be the restaurant so we're going to have another populate in here okay so I need you to be careful here so we're still in this populate okay still in the same populate after selecting some v v variables that we need to populate on our product we need to to go ahead and populate restaurant okay so this is the resturant that we want to populate okay so after comma we're going to populate and let's add some braces in our braces our path is supposed to be Resturant and we need to select time and the cordinates so here our coordinates is equals to codes okay so those are things that we need to to populate right underneath after populating what we're going to do we're going to have a response with a status of 200 and we need to send back Json okay so our response here is supposed to be the card this card that we have here so that's the data that we're going to send to this send whenever this function is called okay and is for error we're going to have status and our status is going to be 500 here our status is going to be false and our message is going to be a do message so we got that out of the way so let's close it so we can have another function to clear the the cart but we are not going to do that let's go ahead and create a function to get cut count okay so this one it has to be a synchronize as well request it's going to take in request and response that's it so in here we need the user ID so we need to capture the ID from our from our middleware so it's supposed to be user ID so quest user. ID and we need a TR cach block okay so for a TR cach Block in our try we need to create const count is equals to A wait okay cart do document do count document okay count documents and here we're going to use the the ID to get the documents that we need and we just send back the response so our response is going to be is going to have a status of 200 and the status inside of for Json true and we're going to send the cut count okay we can just call it count here so that it can maintain the same the same value throughout so here if we do have an error we're going to send a 500 and it's supposed to be false down here and we supposed to have a message a message is going to be error. message like that okay so let's save that so we are done with this let's see how many we have four functions work on our last function which is to decrement the product quantity so when we decrement product quantity we also need to decrement the price okay so here is supposed to be product QT decrement product quantity so it has to be a synchronous going to take in re request and response okay supposed to be request here and we need to add a comma right at the top so that we won't have the error that we are facing right now and let's have our error function and let's have our braces so the first thing that we're going to require is the user ID the user ID is equals to requests dot user dot ID something like that okay let's close that uh this one is supposed to be user not iser okay right at the bottom we're going to require the ID of the product that we want to decrement so here we're going to have let's just call it ID not product ID just need to reduce the number of letters that we're going to write so this one is going to come from product params request ps. ID all right and down at the bottom we're going to have our TR catch block so in our try the first thing that we need to do we need to go ahead and create an instant we need to create a variable where we are going to store whatever we are going to find using this product ID okay so let's call it cut item okay so our cut item is going to await for our card and we are going to find by ID so our ID okay yes so here we can just find by ID there's no need for us to just go ahead and find by user ID and ID since we have the ID we know exactly what we're looking for so we can just find by ID after that we going to have a a condition so if cut item we need to go ahead and calculate the price okay so we need to create a variable con product price okay so our product price is going to be Carm dot so we need to get the total price if I'm not mistaken total price okay so our total price and we need to divide the total price by km dot quantity not total quantity here is supposed to be quantity okay so now that we have our price car item dot quantity is greater than one then we're going to decrement the quantity okay so we're going to go ahead C it quantity minus equal 1 that's the first thing and we need to also decrement the price okay this if we decrement one product we need to decrement the price by the price of one product after that we need to await and then save it's supposed to be car item do save okay after saving we need to send back a response which there is a response okay and we're going to have a message so message is going to be product quantity success ful decremented okay so that's the first condition so here if El our our quantity is one then we're going to just go ahead and delete that product from our cart okay so we're going to wait for our cart and we're going to just delete this not delete okay we just find one and delete and we need to use the ID the ID is going to be with the ID and down at the bottom we're going to just send back a response so here instead of decremented so we can say product successfully successfully removed from the card and if we do have an not an error so we have this if if card we need to handle the else part okay if not found then we can say the cut item not found cuz this if statement whatever we are running here is is like if we have this condition is true then we are going to run this else we are going to just go ahead and run this okay so that's it so down here we need to send back a response and the status our status is going to be 500 and our message is going to be air do message so we're done with this part next thing that we're going to do is to work on our router okay so to work on our router we need to create a new file and we're going to call it not router but cart okay and it has to be a JS file so let's just go ahead to our rating copy whatever we have in there paste okay that's totally wrong so we need to go to our rating let's select everything copy everything and then we can just paste whatever we copied in this page okay we need to get rid of that controller and we need to have a a cut controller so cut controller is going to come from from from our controllers then cut controller okay so just to be sure we need to map it by hand okay so here we need to have our our routes that's something that we can do in a little bit for now let's save that we're going to run into not into an error cuz we haven't hooked this one as yet routers our routes okay so the first one that we need to to do to handle is our posts so post supposed to be cut route and we are going to add product to cart okay so it's going to be a protected a protected route and our next one is going to be decrement okay so here we can just call it decrement so when you're decre menting we can just use that as a get okay so here we need to access or cut controller and this one is going to be de product quantity right at the bottom we're going to have a delete do we have delete okay so let's just go ahead and visit our function our controller I mean remove Cut item that's delete so delete so for delete we do require an ID but I okay let's just go with it that way but that's not the most logical way to do it we just need an ID here and we just need to change this from get to delete so this is remove card item and we need to get the user card so to get user card we're going to use our middle word and here we're saying get get cart and we need the one for count so for count get cut count okay so those are routes that we require for our cart and the next thing that we need to do we need to go ahead to our server.js so the first thing we need to have our end point so it's supposed to be cart and here it's supposed to be cart cart route okay like that so right at the top we're going to copy paste and we're going to make it change it to card and we need to make it to to the correct rout so this one is supposed to be slash cart so let's save if we don't have have an error then our application will run properly without any error so that means we've successfully hooked this without any problem so what we can do here we can go to postman so in Postman we need to go to cart go to our body so we already have this this product already so what we need to do here we need to have let's see do we have instructions that's going to be a little bit confusing but we need to just visit our model our model not our not our router we don't have any instructions here so let's go back we're going to get rid of this okay and let's go ahead and set authorization for this particular particular folder so for the folder we're going to use be and our token is going to be user token like that so when we going to add we need to use the beste URL so that's going going to be our best URL but we need a product a particular product to add cuz this product might not be in our database so what we can do we can just get food get any product go back to our cart add the product ID and then try to send okay token is not valid so for authorization we're going to inherit from from parent so if you're inheriting from parent we're inheriting from from the cart so from this folder okay so let's go ahead and send this again okay cut count is equals to one so that means we do have a product in our cart so we have successfully send a we successfully added something to our cart but one thing now we don't have we don't have the ID to try to decrement the the the cut count or to increment but if we send this again our count will remain one cuz we're just increasing the the number of Quant quantity of that particular product not the quantity of how many items that we have in the card okay so let's go ahead and maybe visit our database in our database we go to our cart okay probably that's the same item so we need to get the ID and then increment decrement decrement let's see when decrementing we're going to require an ID probably so we should visit our routes so in our routes yeah this is a little bit off so we need an ID here supposed to be ID so let's hover over supposed to be ID so let's go ahead set our best URL after setting our best URL then we're going to have an ID so we say this one is going to be a get request as well so let's successfully decremented so we've decremented the number let's see this was two let's see if we refresh that we have some changes or not probably we do cuz when we added this product it had two okay so here we do have one one product left in our C and our price is sliced to half okay so that means everything is working properly so let's just go ahead and remove that product from from our cart so we take the same ID and here we need to delete delete card okay okay our base URL is wrong so we need B URL not there but it has to be here and we need to send that yeah okay product count is equals to zero cuz we've removed everything that we had if if we come here we want to get cut count so to get cut count we don't need an ID okay but we just need the we need the best URL like that token okay so our token inherit from parent send our cut count is equals to zero so this one is working as well fetch cut authorization and authorization here is okay so it's it's either you can use it this way or you can inherit from parent and just send but you need to change the p as well that might be a lot but that's something that's mandatory before we run a request okay that's an empty list because we don't have anything so let's go ahead and add a product to cart and we come here we fetch a cart so this is a cut product that we just added so here these are the things that we're populating related to the product and when it comes to okay our restaurant is not populated here that's something that we might take a look at it a little bit later this is this depends on something let me let me just check when we did food food food food food head food not food it's supposed to be food schema okay so this is okay this is correct it's something that we take a look at a little bit later that's if we need it but probably we don't need it so that's okay so I think we are done testing our routes so if you want to remove card then we should just go ahead and remove decrement is working posting is working fetching card F cut count is working so we're done with our card next we're going to be looking at ERS okay we need to move on to our orders so the first thing that we need to do we need to create our controller not our controller but our or model okay so let's close these ones we don't require them so let's open our directory in our directory let's go to models and let's create one a new one and we're going to call it order and it has to be ajs file so here we're going to have cons amongus is equal to require mongus okay so let's just close that right underneath we're going to have our our schemer con our schemer schemer is equals to new mongus do schemer okay so that's going to be a schemer into right after we create our schema we need yeah we need time stamps okay let's just go ahead and Export this let's go Ahad just export this so modu exports we need the model it's supposed to be mongus here modrow and we have to mention the model name so our model name is going to be order and the schema that we are going to to in export is this ke that we have here okay so right before that what we need to do like on top we need to create another schema okay so this schema is going to be for our food item okay uh not for item but order item schema so this is an order schema we need an order item here order item schema okay so for this one we don't require the date so we can get rid of that like that so so for all item schema we're going to require some variables the first one will be the food ID okay the food that we're going to food that the user ordered or the client so this one is going to be of type mongus it's going to be an object ID okay supposed to be mongus dot schemer do types and our type is going to be object ID here and for reference we're going to map it to to food so so here it's supposed to be filled okay so we done with that part and we're going to require the quantity okay so for our quantity is going to number to be number by default is going to be one and we need the price okay the price is going to be a number as well and it's going to be required we need to set required to True let's go ahead and close that after that we need additives so for additives this one is going to be of type all right like that so let's go ahead make it an array required we don't need that so we're just going to make it an array and down at the bottom we can have instructions okay let's just col them instructions here uh this is correct instructions so for instructions is going to be of typ string a required Force let's just have default default we're going to initialize it as an empty string so that's going to be your order item so so for our Autos schemer we are going to require the user ID okay the user ID so this user ID is going to be the schemer and it's going to belong to a schemer it's going to be an object ID and it's going to point at the user user model after that we are going to require order items so these are the items that the client is ordering at that particular point so this one is going to be an array of order order item schema okay that's why we do have the schema right on top down below we're going to have order total supposed to be total here so for a total this one is going to be of type number okay so we need to mention the type the type is going to be number here required is going to be true down at the bottom we need delivery fee this is the amount that a user is going to pay for for the delivery for a delivery fee is going to be a number as well and we need grand total so for grand total this is a combination of both order total and delivery fee okay so let's have a delivery address this is the address with which the order is going to be delivered to okay so that's going to be our address and we need a type so for a type is going to be a schema type as well so we just need to copy this and we need to paste it in here after pasting we need to map it to address okay so we're going to be pushing the ID only okay and this part is going to be required is going to be required okay so required we need to set required to True here so down at the bottom what we need to do we need to have the restaurant address as well for a restaurant uh let's see we do have delivery yes we need Resturant address now let's let's copy this and we paste it here so this one instead of delivery we are going to call it restaurant okay so it's supposed to be a restaurant address so for address is going to be of type string because that's like the address of the restaurant uh required we need to set it to true to True okay let's get rid of this so that's for Restaurant address after that we need payment method okay so you might need to open up like you need to hook your application to different types of payments so you need to know which payment did the user use to make a payment to your make a payment for their order okay so you can have a FEI for that after that we can have the payment status okay so for payment status we're going to be using enams by default our payment status is going to be pending okay and we're going to have enams here so we're going to have an array so we're going to have pending completed end like that okay so those are going to be our inms when it comes to payments we're going to only consider these three if we receive anything which is not this three then we're going to just push an here so down here we need order status so this is the status of the order so for auto status it's going to be string by default it's going to be M instead of pending here uh we're going to have placed okay so placed uh Place accepted okay let me write it and we're going to have preparing okay we do have preparing already we're going to have manual that's going to be for a restaurant which wants to deliver their own food by themselves we're also going to have and we also going to to have out for delivery okay so here is going to be out for delivery like that okay so we need to get rid of this so delivered cancelled ready manual preparing and placed those are going to be our inms that's for our Auto status right at the bottom we're going to have the the date so for this date we can leave it since we have time stamps here so we can leave it and what else can we have we're going to have a restaurant ID restaurant ID so for restaurant ID is going to beong schema type so we just need to copy whatever we have here and we point it to to the correct model which is going to be Resturant okay required is going to be true so for coordinates now we can put them outside but we're going to have coordinates here as well so supposed to be restaurant codes that's the first so this one is going to be an array of Numbers number okay so we're going to have two coordinates of the restaurant and we're going to have recipient coordinates okay so that's going to be the person who's going to receive reive the package recipient codes okay going to be an array of numbers as well supposed to be number after that we're going to require a driver that's supposed to be driver ID so for a driver ID this one is going to be a schema type as well okay but at this stage we don't require it so what we're going to do we're just going to set it as a string okay so we type we're going to set it as a string string and let's have a default value here right at the bottom we're going to have rating so for rating our rating is going to be a number it's supposed to be type and it's supposed to be a number right here let's have a minimum of a minimum rating of one and a Max of five and by default we're going to oh no we're going to give all the food a rating of three okay all the orders after that we can have feedback let's see add a comma here but we're going to have a feedback here so feedback is going to be type string required is going to be false let's just close this a promo code so these ones are not that important but if you want to go ahead and experiment with the fields then that's your choice okay so you can add a little bit more we're going to to have a discount discount amount okay our discount amount is going to be the promo code is not required here discount amount can only be a number okay and let's add notes going to be of type string okay so that's going to be our our schema this one is the longest schema and next we're going to be working on our our functions to get and to add a in order okay let's continue the next thing that we need to do we need to create controllers to a controller a auto controller to create orders and to get orders so we need to create a new file and we're going to call it auto controller and it has to be a Js file okay so the first thing that we're going to need is going to be an order model order is equals to require so we need to specify the path with which we are getting our our model so here we're getting it from more models and we're going to get the the auto model OKAY like that okay so let's just go ahead and close it so here we need to export functions motor exports so the first one that we're going to create is ADD order or place order let's just call it place order so it has to be a synchronous and it's going to take in a request and a response after that we need to have a error function and let's close it here let's see we do have an error what's the cause of the error supposed to be requests response error function and then we close it so this time we do we don't have an error so when we placing an order we're going to require the the data so our order okay let's just call it new order here is going to be equal to New Order so the data we're going to get it from request. body we're not going to deconstruct this one this one is a little bit large but let's see whether we can deconstruct it yeah okay so we're getting the okay we need to deconstruct it since our user ID is going to come from so we're going to get everything thing from from the request body and then we need the the user ID okay let's visit our Postman and see how it looks uh do we have order yes Crea an order body okay we don't have any data related to that okay so let's see let's just do it yeah it's a little bit large for us to deconstruct it so we can do it this way okay once we have our data we're going to have a a try catch in our try catch we're going to await for the New Order and we're going to save the data after saving the data we're going to just go ahead and reten the response okay let's close this but we also need to send back the order ID so here we're going to have con order ID is equals to new order. ID New Order uncore id doore id okay that's going to be our order and we need to send it back with our order cuz when we want to update an order we're going to require the the order idore order ID let's leave it like that if we do have an error then we might need to revisit this place and change okay so we need to send back the order ID order ID is equals to order ID let's get rid of this two so we are done creating our order if we have a an error we're we going to catch the error then we're going to send back error. message like that so let's just go ahead and close it so the next thing that we need to do we need to go ahead and get user orders so to get user orders or function is to be a synchronous take request response and let's go ahead and close it right underneath we're going to require a user ID so our user ID is going to come from our middle work so it's supposed to be request. user do ID okay so let's just go ahead close that after closing that we are going to require these two parameters from our query for this one we're not going to use parameters but we are going to use Query since these parameters that we're going to require are going to be changing okay so we need the the payment status as well as the order status so let's say we want to get paid orders like we want to get uh orders which are out for delivery right so we need to specify the payment set so the payment status is completed and here is out for delivery so these ones are going to come from requests. query let's close that right underneath we are going to have a try catch you know try catch we will handle that a little bit later but right here on top we're going to have is equals to user ID okay like that so let's just close it right underneath if we're going to have a condition if payment status then we are going to say query dot payment status is equals to payment status if Auto status down here we're going to is equals to Auto status supposed to be Auto status with the lowercase o then down here our create. Auto status is equ to Auto status so here we are providing the auto status from from our request right underneath we're going to just go ahead and head inside of our TR cage block so inside of our try we're going to create a new variable with the name orders so our orders is equals to is going to await for order and we are going to find orders using our our query okay that's all that we need to do after finding our orders we need to go ahead and populate it's supposed to be populate here so we need a path which we are going to populate so our path is going to be or item do for ID okay supposed to be other item here is it item or items okay so let's go back to our model supposed to be order items okay dot forood ID and we need to select some variables okay so the variables that we're going to get from this food is going to be the image URL after the image URL we're going to get the title as well and after our title we're going to get the rating and after our rating we're going to get the time okay and after that we just need to send a response so our response should have a status of 200 it's supposed to be 200 here and we need to send back Json so in our Json we're going to send back the the orders like that and if we do have an error we're going to send back a response with a status of 500 and then we send back Json so in our Json we're going to have Status End status and the message so status is going to be false and our message supposed to be false here not false let's have a message and our message is supposed to be a. message like that so these are the two functions that we need to create in here so so for so good we are done with that part this part we are going to test it a little bit later after we hooked everything to our front end okay so what we can do we can go ahead head and create the router for this particular controller that we just created so let's go to our routes and we're going to create an order route an order router okay it has to be a JS file let's go ahead to our rating and we're going to select everything copy everything go back to our orders paste and in here what we need to do we need to import the controller so cons order controller or order controller is going to be require the path so our path is going to be controllers so from our controllers we're going to get the auto controller like that okay so here we need to post okay so if you're posting We need to map this to to place order okay so that's it and for our get is supposed to be aut controller dot get user orders something like that okay so here we're just going to be getting orders we don't need anything else here so let's go to .js in .js we need to import our router let's give it a name order rout so here supposed to be orders so we need to import the router okay so here supposed to be order and we're supposed to get it from order so we don't have an error if our application is running so we are done with this part next the next stop that we're going to make is in our front end where we are going to be working more on just integrating all the routes that we've worked on in the back end and just integrate everything to the front end if there any changes that we need to make then we're going to revisit our back end make some changes and then we can we can move on pick up from where we left off so what we need to do we need to just visit our project so we created our UI here as well as our backand so the next thing that we need to do is to go ahead and work on our our models so what we need to do we need to create a new folder and we need to call it models after creating the folder now we need the model so the first model that we're going to require is the one for for categories right categories we have restaurants we have food okay so these are the first three so we are going to change a little bit on how we are going to handle our tasks so here we do have our to-do so we have something that we call a hook model so a hook model is the one that we're going to use when we're using flatter Hooks and these are the models that we are going to create in this section so let's go ahead and start with the hook model the hook model I'm not going to explain much as yet CU there's no context to it but as soon as we start working on our hooks after we created all the models then we can get into a little bit of explanation on how the this model is going to work inside of our application okay so this is going to be our first so let's jump into our code and do it straight ahead so here I'm going to create a new folder in our models and I'm going to call it hook models okay after creating the folder we need to create a new file in it and we're going to call it hook result and it's supposed to be that file here okay so right at the top you we just need to create a new class and we have to give this class a name so I'm going to call it fetch hook so it's going to take several parameters the first one is going to to be a dynamic and this Dynamic is going to be the one that holds our data okay so that's the first the second one is going to be a bulling so this bulling is to determine whether application is loading or not not the application but to determine whether our data is loading or not and we're going to have exceptions and these are going to be nullable and we're going to call them error right at the bottom we're going to require a function a cob function and we're going to call it refetch okay so here we need to go ahead and import material and down at the bottom we're going to put our functions so here not our functions we're going to put our variables we're going to require them all okay since they're going to be required each and every time that we call a hook okay so let's go ahead and save we are done with our first our first model so going back to to our model now we need to create a new file and this one we're going to call it categories okay so for categories what we need to do we need to go to poit so you need to open poit and the other thing that you need to do is to make sure that your back end your back end is running okay so this is our back end that we created together and our back end is running here on Port 603 okay so once you make sure that your back end is running you need to go to postman so in Postman we do have the collection that we're using this collection and we have an environment that we're using so you need to make sure that you select the correct environment after you select the correct environment in that environment one other step that you need to take note make sure that this B URL is the same as the port with which you are running your server on okay with that say then we need to go ahead and run this request cuz we need the data from from our database so that we can go ahead and create our models so I'm going to hit send so this is going to be our data let's see yeah okay so this is going to be our data so what I'm going to do here I'm just going to copy this response after copying the response I'm going to go ahead to our browser in our browser we need to visit quick type after visiting quick type we need to paste the the values that we just the response that we copied from Postman and we need to give our model name here so we're going to call it categories so this is going to be our category we need to get rid of some of the values that we're not going to use like created date updated date we need to get rid of these two after getting rid of them now we are going to have three four four values okay so this is good this is how easy it is to create models using quick type the next thing that we need to do we need to copy this model right after copying the model we go back to our project in our project we need to paste the code and let's get rid of this package that we are not using and let's save so that's our first model our second model is going to be for for Foods okay so let's let's go back to our Postman in our Postman let's go ahead and visit this Foods Foods folder we're going to just get recommendations okay so we do have our our Foods here so let's just copy this oh let's just copy everything after copying everything what we need to do we need to go back and we need to paste the code here and let's change the name to Foods model okay so this is going to be our Foods model let's go ahead copy our Foods model go back to our project in our project we need to go ahead create a new file that we're going to call it foods and it has to be a do file and then we paste the code after pasting the code let's save and get rid of the unused dependency right on top let's just make sure that it's clean okay next we need to do for restaurants okay so for restaurants we're going to do the same as well just go back to postman in Postman we visit restaurants get nearby restaurants send the requests we have the list of our of our restaurants we copy the list after copying the list we go back to our browser in our browser we're going to paste the list and we need to change the name here from foods to restaurants like that after that let's go ahead and copy our model let's create a new file and we're going to call it Resturant model and it has to be that file over here and let's paste the code after pasting the code let's just clear The Unwanted dependencies so here we're not going to be sending food so what we can do you can either leave it like this it is it's no problem but you can get rid of this part to Json since we not going to to be using it we're going to be using from Json cuz we need to convert data from from Json okay so we are done with about four so let's go ahead and take a look at our task list so here we're done with our hook we're done with our category we're done with our Resturant we're done with feed so here we have API error okay and success response this one we're going to do it a little bit later or we can just do it now let's let's just go ahead jump in do it and then we can proceed okay so for an error what we need to do now we need to have a SC areio where we do have an air so let's see the best way that we can do it with is without triggering anything we can go back to our back end in our back end we're going to visit our controllers okay so in our controllers let's take for example the first one so here this is going to be the forart of our eror okay so this is a polling and this is a a string okay so we're going to take these two two variables status and message we need to create a a model with them so when we come back let's just come back to postman what we can do let's just create a dummy a dummy request okay okay we don't have to give it a name because we're going to delete it as soon as we are done so here we need to choose row and we need to choose Json okay so let's paste this here so the first thing we need to make this a string and we need need to make this a string as well and we need to make this a string okay so we need to just copy this go back to our quick type and we need to paste this okay so here we're going to call it API error like that so our API errors is going to retain a status as well as a message so we need to copy the model go back to our project we need to create another model and we need to call it API error and it has to be a DOT file let's paste the code let's save right at the bottom the last one that we have on our task list we can leave it for now cuz we are not going to use it like in the early stages of for cing but we're going to use it a little bit later when we reach to authentification so we might leave it for for later so here API error this is done okay so what we need to do we need to go ahead and break on on whatever follows okay we need to work on our hooks now we need to get into hooks work on our Hooks and then we can retrieve data using these models that we just created so for hooks we said we're going to be using flut hooks so what I'm going to do I'm going to like go a little bit into a deep dive I'm going to explain it a little bit of examples from react cuz hooks initially they they for for react so we are going to have react code and flatter code We compare the two the similarities so that you can just know like what exactly hooks do and how do we create custom hooks cuz in this instance we're going to be using custom hooks to to fetch our data especially for the data that we're going to have on our homepage okay so let's go back to our project not this one but we're going to go back to to our front end since we have these these models the next folder that we need to create is going to be for hooks okay so we need to call it hooks here so all our hooks are going to be in this folder in this part we're going to just go through the differences and the similarities of our hooks so here we do have a react custom hook and on the other side we have flatter custom hooks so this is how a re native custom hook okay they're a little bit similar but they have their differences so I'm just going to go ahead and explain the react side and then jump into the flatter side okay so when we want to use or when when we want to create custom hooks in in react what we need to do we need to import U State and use effect okay so use state is the one that we use to to store our state and we also need the dependencies that we use to communicate with our rest API in this instance in react we use axos and in flatter we use HTTP okay it depends HTTP do whatever you want to use in your hook in your application then that dependency is the one that you're going to put here to communicate with your R API in this instance we're using HTTP okay for react we use axios or fetch okay so the other thing we need the URL with which we are getting the data from so here in react we have a b URL in flut is the same we also have a b URL here okay so first we need to create our custom hook so this is our custom hook this is the name of our custom hook and this these are our state variables we need to clear the state variables right so we have categories and set categories so categories is where we are going to store our categories once we get them okay so once we get the categories we're going to use the the set set function to set that data into into categories okay is loading we are going to use it to indicate that our data is loading or not initially this value is going to be false all the times initially is going to be false so whenever we hit fetch data whenever we are communicating with our R API then we are going to set this bulling value to to True indicating that okay now we are fetching our data so to fetch our data we also going to require a tri catch block since we're going to communicate with our ra API we need to to catch the errors if there are any okay so after having our trackage block then we're going to send a request to our R API in this instance we're going to send a get request and the function before I forget the function that we have here it has to be as synchronous since we're going to be waiting for the response from the rest API so it has to be a sync function once we hit this function we set the bulling value to true and then we head into our Tri block we send our request we wait for our data after we get our data we are going to put our data inside of this response value okay so we need to access this response value the data inside of this response value in this instance when we're using axio the data is Con contained is stored in this data value and in flatter this data is stored in bodying so if you take a look response do body so our data is in body here our data is in data so once we get the data we need to set the data to this category okay so we're going to use set categories so that we can push the data to categories after we get our data and set our data to categories we're going to trigger this bulling value to fce that means we've successfully gotten our data we no longer want our application to load and if we have an error we're going to catch that error and we're going to set that error inside of our our error State variable so we're going to use set error so that we can push the error inside of our our eror here okay and in react we're going to we use finally finally so after this is done let's say here we set the error we have an error so we didn't trigger this pulling value to be set to false right so we need to have finally here so that each and every time that we run this hook we are going to be setting this bulling value to force after everything that we need to be done has been has been done right on top okay so this is for our fetch data and right at the bottom we do have use fetch so use fetch is used to trigger automatic the automatic data fing okay in this instance we are not going to have a value that is going to trigger the the refetch to trigger the fetch data function but each and every time that we open the the application we're going to be running hook so that we can get our data using this function that we created on top so right at the bottom we do have another function and this function we're going going to call it refetch so refetch is just going to trigger fet data okay it's going to trigger fet data so when we're fetching data we need to set loading to true and then we fish data so when we fish data we're not setting this to false why because we do have this finally that sets our value to false after we are done okay so once we finished with everything up on top here we need to retain the data that we obtained from from our hook so here we're going to return our state variables and the function that we have in here okay so the significance of this function let's give a a good example let's say we add something to the card all right when we add something to the cut we need to refresh the cut again add something to the card or delete something from the cart we need to refresh our data so that we can update our cut count as well as the data right so that's when this refret comes into play each and every time that we trigger something then we are going to go ahead and refresh the data related to that particular hook so what we can do here we have this array right we can use either we can either use refet or we can use use effect to fish the data so let's take for example we want to refresh the cat the cut so we can have a bulling value somewhere that we're going to put here all right every change that we make to that bullet value whether it's triggered from True to false from false to true then it's going to trigger a a data H here we are going to trigger use effect so that's how use effect works so we need to have a variable that we put inside here that can trigger the the refresh of data or we can just go ahead and use refresh directly since we have it as a function in that particular widget that we are going to be using this custom widget okay so this is it like the basics for for a custom hook in reject let's go now to flatter and then we can see the similarities between reject and flatter then we can move on to application so on our flatter side we're going to have the name of the hook which is what we have here okay and we have our state variables our state variables so here we have category item for this one we're going to use use State and the return value of this particular variable is going to be at list categories and initially is going to be now okay it's loading works in the same way as it works in react so once we get into our function this is the function that we use to fet data once we hit this function we want to trigger a change in this bulling value so that we can notify our UI that we have data loading right and inside of our fet data function we do have a tri catch block similar to the one that we have in in react so once we hit this Tri catch we're going to send an HTTP request to our endpoint so this is our endpoint we have our BAS URL and our endpoint our BAS URL and our endpoint so once we hit this then we're going to get the data and put it in our response so and this in this flut hook we do have an extra step we need to check whether the response code is equals to 200 that means whether we do have a success a successful request or not if it is not 200 then it's not successful it might be 500 it might be 400 it might be 406 if it is 200 then we are going to go ahead and set the data that we get from our from our response body to category so here we have categories from Json categories from Json is the one the function that we get from from our from our model okay so let's just open the model that we created okay let's say this is our category model so this is the function that we'll be using to convert the data that we are getting from our rest API so that it can retain this particular model dat data okay we're just using this to convert it to to our model data okay so let's go back once we have this data we can go to else so else can work in different different ways okay so here we have exceptions right we're going to set the error if there's an error we're just going to throw an exception but this is not the best way to do it so since our errors have a particular format in our back end here that's when the API error comes into play so you need to just put an API error here so else this part can be an API error or you can throw exceptions you can choose the way that you want to do it so if you want to use API error then you have to introduce your API error right on top as a state variable first second you need to use the same format okay like API eror is equals to API error do value is equals to API eror from Json then you take the response from the response body so if you have this error then you can just set that error value as exceptions alternatively you can just display your snakeboard to show that there's an error then you don't need to throw exceptions cuz this might cause the application to to break like a b that causes your application to stop functioning after all this is rent we need to set our ISL to F right to signify that we are finished loading our data then we can retain the data use effect is R each and every time that we are going to be opening that widget that we are using that particular hook in let's take for example we're going to use this in our in know homeage page right if we open a homepage we're going to run use effect so use effect will trigger this function and this function will set all the data here in the state variables all right cuz we are setting the data here that's why we don't have a return value here and then we jump back to our return values refet we explained how refet works if we do have a but if we have a widget that we need to that needs to change cut is a good example since if we add something to the cart then we need to have an updated cut so to update the cut we use refet or we just trigger this use effect to to run so that we can get a new set of data and the other thing that I need to jump into is our rain our rain value our rain value here we are retaining we are retaining a fetch hook this is the model that we're going to use to retain the data but there's one thing that you need to take note of here we have Dynamic cuz I just did this I just did this so that we can have one reusable response hook but there's a cat to it once you set your data is dynamic here you need to reconvert it in the widget that you're going to use it if you don't want to do that what you can do you see this model that we are using here you can create different sets of hooks of return hooks for each and every hook that you're going to have in your application with a specific data type that you're retaining for that particular hook so instead of retaining Dynamic that particular hook will be hooked to to a retain class that retains a particular data type in this instance if it is list categories here it has to be list categories data so once you head into your widget that you want to use the data in you don't have to convert the data again you just have to use the return value as it is since it's assigned to a particular data type okay but this provided the complexity of our application this might be a little bit tedious to do so we are going to do it this way but for good practices you can go ahead and set the data type for for each and every return value that you're going to have for your hook that means you have to create different classes for each and every hook that you're going to have so if this is a fetch hook right for if this fetch Hook is aain value aain class for fetch cart you can change the name here to to fetch fetch cart right so each and every book that you're going to have will have like a each and every class that you're going to have to handle your retain data who have a different class name so that you you have different data types each and every time that you call a hook so this is all for this part this is like the foundation of our hook this is the foundation of our hooks the next stop that we can make is to just create the hooks and and then we can go a little bit deeper on how we are going to use our hooks inside of our application cuz the way that we create our application now is different instead of using stateless widgets state for widgets now we have to use state for who hook widgets and hook widgets okay so that's the next part but first before we get to how to explain on how they work we need to create a particular hook in our application and then we can go ahead and demonstrate with the working example okay so let's jump right back into our code so here this is our our code so what we need to do we need to go ahead and create a new hook and we're going to call it fetch cut okay my keyboard is not connected okay now it's working so our first hook is going to be fetch categories and it's going to be a do file so we're going to be following the same format that we we were just looking at inside of our inside of our of our example okay let's go ahead and delete this let's create the fire again and we're going to call it fet cart categories and it has to be a do five okay like that and create our first hook so to create our office hook here we're going to require the return the return value first okay so our return is going to be fetch hook so we need to import that as importing we need to give our hook a name so it's going to be use f supposed to be fet categories not cut okay keep on saying C cut not instead of category okay so here supposed to be categories let's go ahead and add a g over here after adding a g it has to be a function like that so here we do have an error cuz we need to return something afterwards right right inside the first thing that we need to do we need to go ahead and create our state variables so we're going to have a final category items so for category items we're going to use use state then that we can set the state of this VAR of this variable variable so we're going to use use State okay so we need to go ahead and check whether we have flatter hooks installed so we need to go to our pubs SPO in our Pub SPO let's go ahead and check we do have flatter hooks so we should be able to import your state okay but first before we do that let's just go ahead and mention the data type so we are going to return a list and this list is going to be of list categories category supposed to be category model if I'm not mistaken it's supposed to be category supposed to be category model let's go ahead and import or category model and this can be now okay like that so we need to close that right here we are not picking up flatter hooks so we need to import flut hooks manually import right on top we're going to have a package so our package name is flatter hooks flatter uncore hooks okay so our eror is gone as soon as we import flatter hooks so that's our first state variable our next state variable is going to be a bing we have to give it a name it's loading okay so this is our data type and right at the bottom we're going to use we're going to create a state variable with the name and eror so for this one we're going to use States exception not exception right so we are done with our state variables what we need to do now we need to go ahead and create our our fish data function okay fin out let's create another one API error we might use this a little bit later is to use date API eror we might use this a little bit later so here down at the bottom we're going to have a future void meaning that we're not going to retain anything since we're going to be setting our data to our state variables right on top we don't need to return anything in this function after we R the function we don't need to rain anything so we have to give it a name f data so our F data function is going to be asynchronous so the first thing that we need to do we need to go ahead and set is loading to to true so to set is loading to true we're going to access is loading and we need to get the value of that and we need to set the new value which is true okay that's the first thing the next thing we are going to have a TR cach block right so we said we're going to have finally so that's relevant so whenever we finish running this function we're going to just go ahead and set is loading to false just to be sure we don't want our application to to be just loading the Shima without the Shima because we didn't trigger this value to be set to be to false okay so in our try catch what we need to do we need to have in our try we need to have a final response so our response is going to await we are going to await for an HTTP call okay so we need to import HTTP here is HTTP supposed to be HTTP is HTTP okay http dot get so inside we need our our URL okay so for URL we're going to have a p URL and our endpoint okay so what we can do we can create a variable right on top of our of our try so we're going to call it URL supposed to be u i is equals to u i do pass so inside we need our URI so our URI is going to be our base UR that we don't have at the moment we are going to have our BAS and we're going to have our end point so the best way to get our end point here is to go back to postman and we go back to categories let's go ahead and send this okay we're going to get random so these ones are the ones that we're going to get for our homepage right where we have a set of rest a set of categories and then right at the the last one should be more okay so this is the endpoint that we're going to to copy after copying the end point we go back to to our project that's our back end not our project M front end so we need to go ahead and paste the the end point so now we need to go ahead and go to con we have a app best URL here so you need to create this if you don't have it and then you need to change this to the to the correct port number cuz here if we take a look at our back end we going we are using 63 so that's the port that we should use when we want to access our back end right so now that we have this best URL we can go back to our hook and we can put it here we need to import it from constants after importing we need to go ahead and close this we need to remove interpolation okay so it's going to be like this so here instead of having a string we are going to push the the URI and then we just going to close so now we do have our response right but once we get our response we need to check whether we're getting a 200 a status code 200 here like this code that we have here we need to check that if this code is 200 that means we've successfully gotten the data now we can go ahead and set the data to our state variable so right at the bottom we are going to have a condition so we need to access our response and we're going to get our status code if our status code is equal to 200 and then we are going to run whatever we're going to put inside here okay so we're going to set the data that we get from our request body to category item but before we do that we need to access our model our model function to convert the data J response to to our model data and that that function takes in a string okay so here we do have a string so that means the data that we're getting from our response. body is a string okay so we need to push response. body here supposed to be boring else if our status our status code is not equal to 200 what we can do we can go ahead and set the API error do value to API error from Json and then we're going to get whatever we get from our API the string that we're going to get from our API convert it to the correct data correct data type okay so if we do have an exception what we're going to do we're going to set a do value to e as an exception here okay so that's all that we need to do for fetch data after fetching data now we need to go ahead and create our use effect okay so use effect we say use effect is run each and every time our widget that we're using that particular Hook is up or is triggered by a value change in the value that we provide in here but for this instance we're not going to provide the value here okay but we are going to run a test somehow to show how it works so we are going to trigger changes or to trigger the ref of data using a value and we are also going to leave it as like leave it as an empty array so that we can just fet data when our application opens when the state of our homepage of our homepage changes then we're going to refresh data and get a new set of data okay so in here what we're going to do we are not going to rain an RoR function but we're going to have braces inside of our braces we're going to call our fish data function and then we're just going to return now like that okay so down at the bottom we're going to create refetch so void refetch so our refetch function so we said when we calling brief fet we need to just go ahead and set is loading to is loading do volume to True after that then we can call our fake data right down at the bottom now we need to rain the data that we we are setting here okay the category data as well as the the error data okay so to retain that we are going to be using this hook hook result that's the one that we're going to use so here we have this list okay made a mistake somewhere oh this spelling is wrong categories model so if you visit category model cies like that okay so we need to adjust the changes so we need to go back to our face data so here it's supposed to be catgories model and here supposed to be categories models from Json okay like that so I eror is gone okay so we say this data is dynamic data right Dynamic but I was what I was saying before if you wanted to retain the same value as this data what you need to do you need to go back to this F hook and you change the data type here okay so in this instance let's say our data type is list okay so it has to be like that okay but the downside with this you need to create all like every every hook that you create you have to create a different different class as a return a different return class with a particular data type in here that's why I didn't choose to do it in here that's why I use Dynamic I'll reconvert the data inside of the application okay but that's best practic is it just increases the number of files that you're going to have here so let's say we have 100 models that means you need 100 100 models that we're going to be using in our in our hooks you need to have 100 sets of results so let's go ahead and work with this format for now if there's any need to change it then we can change it later so this this is our model we done the next thing that we're going to do is to go ahead and hook this model to this particular widget that we have here and then we can run a r run some tests on how this particular custom hook Works in an application and how to trigger the refet of data on a certain click or on state chain done creating our hook we need to go ahead and use this hook inside of this widget that we have here so we need to go to our files let me Zoom this a little bit yeah okay so probably the first time it wasn't zoomed so I'm just going to zoom it show all the code if you have trouble like looking at the code now I think that would be a little bit better so this is the code if there's any part that you missed you can just get it from from this point on okay so we need to go to our files in our files we need to go to our views instead of our views we need to go to to home so we need category list okay so this is our list here we are consuming this list this list is inside of our of our con constant data our UI data the one that we have in our constants okay so we need to get away from using this data we need to just use the data that we're getting from our rest API so the first thing that we need to do in in order for us to consume a hook inside of our application we need to change this stateless widget to a a hook a hook widget like that okay so that's the first thing and the second thing that we need to do now is to call our h hook so a hook we're going to call it in our build context before we return anything here okay so first we're going to have a final and we're going to have hook results you can call it whatever you want but for me I'm just going to call it hook result is equals to now we need to provide the name of the hook that we're going to to be consuming in this instance a hook name is fetch use fetch categories if I'm not mistaken so let's just go ahead and check the name use f categories okay that's going to be the name that we are going to be to be using so after that let's come back here and we need to use the name use fetch categories okay we need to close that so each and every time that we open our application we're going to run this hook and it's going to get the data so I'm not going to do anything is yet so what we need to do we need to revisit our hook here what I need to do I need to just print the data okay or print the status let's print the status not the data okay so it's supposed to be response. status code okay if our status code is 200 that means we are getting the data so we need to put this right outside of our our if statement right outside of this condition okay why are we putting it outside because if our return status code is not 200 we just need to see it as well if we do have any errors then we can go ahead and rectify those errors before we move on okay so here let's go ahead and save this okay so we need to rebuild our application now okay so here we are returning a 200 we're getting a 200 so if you hook a hook to a widget then you might need to hot restart your application okay so since our return value is 200 here that means we're getting our data we can go ahead and get rid of this print statement that we have save again after saving now we need to deconstruct the data that we have in our result so if we take a look at the results that we're getting in our category list widget if we have a over it's returning the the class that we created so we need to access this class and get the values out of it okay so down at the bottom we're going to have a category list so here it's supposed to be final category is equals to hook results. data cuz this is the name that we gave to our data so what we can do here is to okay categories let's change this name we don't want it to to conflict we don't want it to conflict with this one what we can do here we can just change this final to at list list category category model okay so that's going to be our data and down at the bottom we are going to also require a final a bullet is loading okay so the name is is loading so is loading is supposed to be M to is loading so for now these are the two that we are going to to require for error is going to be final error then hook results. error okay we're not going to be using refret for this instance but we are going to run an example whereby we are going to refret our data before we start doing other things CU we need to just get get into a little bit of we we need to explain a little bit more before we we start using hooks cuz after this what we need to do is to just copy the hook that we have and just change the end points and the rain data type like the models rain data type and then the process will be easy but we need to get more into how they work in different situations in different scenarios okay so now that we have this category list we can access this category list right here okay so it's a list category model and here we are getting a category a single category from this category list so this value should be a category model okay and we can change the data type from a VAR to a category model right like that but before we do that what we need to do we need to import our Shima because we need to show a Shima when our categories all looted okay so what we can do let's go go to components we don't have our shimmers in here but these shimmers were provided to you beforehand so you need to visit the code that I provided you at the beginning of the co at the beginning of this particular course and then you take the the files that we have in that particular folder and import them in our project okay so here my files are on the desktop so I'm going to just close this for a little bit so here we need need the starter files so instead of our starter files we have shimmers right these are the shimmers that we have they already made so you don't have to do anything you just need to take this folder and drag it into your common your common folder okay so I'm going to open the the project and drag and drop this folder inside of this common folder okay so we have oima but we do have errors there are some inputs that we need to to fix okay so let's just go ahead do that and then we can continue so let's put our simulator side by side with our C editor okay so now we need to fix our shimmers so the first one is going to be a category Shimmer so this particular widget is not imported or it's coming from a wrong place so we need to get rid of it and we need to repport it okay so that's it for the first one the second one we need to do the same so we need to import height from constants it's supposed to be height here from constants and we need to import this Shima widget okay and here we need to do the same as well import our Shima widget and then we import our width from constants so this is the Shima widget that we are importing in the other shimmers okay in the in the other list that we have okay secondary light that's coming from constants so here we're just building the Shima so when we call a Shima then we are going to be providing Shima height Shima width and Shimmer radius right so this is our Shimmer region and we're building the lines here okay I'm not going to get more into details on the Shima but that's going to be our Shima so the first Shima that we're going to use is a category Shima so when our data is loading here from our hook we need to use his loading so if the data is loading then we're going to have a category Shima let's check the name is categories Shima okay and we're going to to retain the list so let's format our code a little let's add cost okay so now we're getting our data but the way that we we're handling our data in our category widget has to change cuz now the data that we're getting is coming from our category our category model is no longer coming from the the data that we have the constant data that we're using so here we need to change how we are accessing the data from from this category okay yeah okay so this should be a category model just copy the type paste not category Shima but supposed to be category model categories model okay let's take a look at our list categories model category this is the same data that we're sending here so this one should be required okay like that so we've gotten rid of the error so here when accessing the categories the category we're going to get the idid and here we need to get the value and we do the same for this particular widget here we're getting the ID and here we're getting the title right ID here it's supposed to be imageurl so we have one more field which is the title here okay so we need to go ahead and reset okay so we're getting our data so what we need to do we just need to add now here and down here when we accessing the length we need to go ahead and and put an out check okay but there's also one thing that we need to take care of that's our Shimmer we need to change the the size so that it can it can fit well here so here each and every time that we let's say we reset this application these categories should change okay so chicken Burger pasta Beverages and more so let's say we hold reset again or we have a few categories but they change they shuffled yes they're shuffling so this part is working fine what we need to do now is to go ahead and fix our category Shima so our height is 75 it might not be the category Shima problem but let's change this to 80 after changing this height of our category the container that's holding this this category list we should be able to see whether we need to re adjust okay so here we don't need to readjust cuz it was the problem coming from from this part so our overflow was coming from this end okay so we're done with this part next we're going to move on to to our restaurants then our food so these ones are going to be using the same uh try something new and Foods close to you they're going to be using the same hook even if we run the same hook since the data that we are returning is dynamic is changing each and every time these hooks they going to retain different sets of data not the same data okay so the lists are not going to be the same so this is how we can use a hook a custom hook inside of a a widget this is how we can consume it so we're done with this part so let's say here we need to trigger a change manually if you want to trigger a change manually let's go ahead and oh we need to create a button so that's something that we can do later we can create a button and try to trigger the changes or we can explain this part when we get to the cart cuz the cart it is it is the only hook with that kind of functionality that we might need to trigger the hook to pret after we send data to to our API and get the response okay but basically this is it when we consuming a a a hook inside of a widget move on so now we have this data we are not going to handle this data that we are going to be displaying here is yet but what we can do we can handle the data that we are displaying here okay we need to get our data from our race API and just display a list of all the categories that we have in the back end and the data that we're getting won't exclude this small so that's one thing that we do need to take care of so we need to go to to our our hooks in our hooks we're going to create another one with the name fetch categories supposed to be fetch all categories and it has to be a that fire over here after that what we need to do here we just need to copy everything that we have in this particular hook and then we are going to paste it in here okay and we need to change the name of this hook cuz these hooks are going to be similar throughout the application basically the things that we need to change we just need to change the base URL and the models that we are consuming right but for this one and the last H that we created they share the same model so the model is always going to remain the same but what we're going to change is the end point and the name of the hook so we are going to start with the name of the hook so the name of our Hook is supposed to be fetch all categories right like that and here instead of getting random we're going to get all categories so we need to visit Postman so these are random categories that we were getting and we need to get all categories okay so let's send a request here so if you send a request we are going to get all the categories that we have in our back end excluding the more category okay since we are going to be showing all the categories so this is going to be our service end point so we need to copy that go back to our application and we need to paste it here our B URL Remains the Same right so that's going to be our end point that's all that we need to do here so our work will get lighter and lighter as we are using hooks we are just going to change a few parts okay so let's save that after saving now we need to go to where this page is and see how it's structured then we can make changes to it okay so we can go to our our views inside of our views we're going to look for a page uh that page should be all categories category list no not that one categories all categories this is the page that we are looking for this page okay so we need to change this from a stess widget to a stess to a hook to a hook widget okay and we need to mention the name of the hook that we're consuming inside of our build context so here we're going to have the same hook results is to use fetch all categories and let's close that after closing we're going to have categories right from this data Dynamic data that we have like that and we need is loading as well so if our data is loading now we need to display a Shima as well so for this one if we visit our Shima our Shima we do have a foot list Shima that's the one that we're going to use here okay so here before we return return this background container inside of the background container that's supposed to be let's see here let's put it here okay is loading then we are going to be displaying our foodly Shimmer okay like that let's format the code so the data that we're consuming now is different we are consuming these categories and we need to add a now Checker before we we use the data and here instead of VAR now we need to specify the model that we are going to be consuming so we need to just hover over after hover hovering over copy the name of the model replace this V with the name of the model and this data of type category model is the one that we're pushing to this category tile and we need to visit this category tile and we need to change this data type and we need to import it as well right so we don't have an error here but we need to change the data that we're consuming cuz it was was coming from a a map we need to change it to to the model okay so here we have title so we can save that and we can save this as well okay let's add costs and then we're going to reset our application okay so after resetting if you visit more yes we're going to have our Shima first and we're going to have our list so this is our list from our rest API so just to be certain that is the list that we're consuming what we can do we can go ahead visit this the custom hook that we just created and we print response here response okay here we need response. status code supposed to be status code okay so if we get a 200 that means we're getting the data from our rest API this is just it's just to be sure okay okay we get a 200 here that means this data is coming from from our rest API so let's get rid of the print statement save again so we're done with that part let's move on on to nearby nearby restaurants okay let's go ahead and mark the tasks that we are done with is done so the first one is to create use f category hook with are done with that part use it in car list widget we're done with that uh trigger refet we haven't done that so we're going to leave it here use use fetch all categories hook in categories all categories page we are done with that okay so these tasks we done so we'll create a new list that we're going to work on next so the next thing that we need to go ahead and focus on is getting our getting our our nearby restaurants first okay and then get our restaurants here okay and then we do the same for the food so without wasting any time let's go ahead and jump into a code and do it so the first thing that we need to do we need to create a hook designed to get the data for this particular section okay so we're going to go to our hooks create a new file and we're going to call it fetch restaurants and it has to be a that file let's create another one and we are going to call it fetch or restaurants and it's going to be that file as well so what we need to do here we just need to copy one of the hooks that we have we just going to copy fetal categories we just copy everything go to restaurants fetch or restaurant and we paste the code in here after pasting the code what we are going to do is to rename the hook okay so we can give it a name fetch restaurants so you can call it use fet your restaurants that's okay as well but the problem comes when I want to say use use fetch or restaurants that's a little bit complicated but let's go with that with Disney and that would be okay so here it's supposed to be a list of restaurant model okay so if this changes that means we have to change this this function that we're using to convert the data from a string to model data okay so here supposed to be restant model from Json okay and we need to change this name to restaurant data restaurants data no just restaurants here that will do okay we do have an error because we didn't select this part okay so our error is gone but we need to change the end point okay so we need to go back to our Postman inside of all Postman okay this is get all and this is get nearby okay so we're getting nearby restaurants here we're only getting a set of three restaurants that's okay so we need to copy the servic end point and we're going to to paste it here so this code can change okay so what we can do is code we can receive it from where we're using the hook from so it's supposed to be string code and this code is the code that we are going to to use here okay so let's go ahead and use code like that so everything else Remains the Same so we need to just remove whatever we are not using inside of this particular hook let's save that so we are done with this part let's go back to okay this one it has got an area in and the name we included two FS instead of just putting one here so let's let's go ahead Rectify that and then we move on okay so the first thing that we need to do let's hook this one up and then we can move on okay so we're not going to go into fetch our restaurants before we resolve this this resurant that we have in our homepage let's just close close some of the items that we're not using so this is not our priority this is not our priority as well so our priority is this particular hook and we need to go ahead and open this list okay this is the list that we are going to use the data that we're going to get from from our hook or the list that we're going to use our hook so first we need to convert this hook to a hook widget instead of a stateless widget and down at the bottom we're going to have final hook results is equals to use we're going to use use fetch restaurants okay and our code here is supposed to be let's put this code for starters cuz this is the the data that we have in our restaurant this code is related to the restaurants that we have in our particular restaurant so this is a postal code related to the area that I'm in okay so don't get confused down at the bottom we're going to have final not final per se but we're going to have at least list and this list is going to be lists supposed to be restaurants over here restaurant model and it has to be knowable and this list is going to get data from Hook results. data like that okay it seems like we do have an error some how probably okay what we can do just go to category list it's supposed to be okay I didn't include the name here is supposed to be okay and here supposed to be restaurant okay so you need to include the name of the list that you're going to be consuming down here so this is the list that we going to be consuming instead of consuming this list from from our local data right so the name is the same as the data that we're getting from our UI data so we just need to get rid of that and here let's add an out check so that means the data that we're consuming here is coming from list model OKAY is going to come from our rest API and here now that we are consuming the data from from our back end we need to change this far to the name of the model that we're consuming so if you have over if we accessing the data we accessing the data of each index and put it in this value in this variable and this variable is of type Resturant model okay and now we need to just map the right data to this particular to to the data that we're passing to to the widget CU now we have the resturant data we need to access this data right so for for restaurant this is a string so this is okay for our logo let's go ahead and see our logo is a string as well not time but it's supposed to be tied over here and down at the bottom we're going to have time and we're going to have rating supposed to be rating count so we don't have rating count let's see rating count so if you visit our model what is our model models we have to access our models let's close this this is a a little bit confusing models we have Resturant model okay we don't have rating count over here so for rating count let's put a constant number okay let's just put a random okay so we're going to run in the same eror into the same eror as before so as we said before we are going to also require a a list here right so a Shima not a list so here nearby Resturant Shima so it's a list already it's a list already so what we need to do we need to hook this list let's try to hook it here okay so if our data is loading then we're going to display the nearby restaurant shim else we're going to display our correct list so we don't have this fire boy yet so we need to get it from our from our hook results so here we're going to have fin is loading is equals to hook results do is loading okay let's add con over here and let's what application okay looks like we ran into an error let's try to hot reset again okay now we have our data but there's one thing that we do need to fix this Shima shouldn't be here let's try to move it outside right like that if we move it outside then it should be like that okay so that same criteria should apply for the category list as well instead of having a Shima inside then the Shima should be outside like this let's try to reset okay try to watch reset again there something that I'm missing okay everything is working fine so this data is coming from our rest API now so we only have a few restaurants but if we hot reset you have to take a look at the the data that we are getting so the first is La Foods then Italian restaurant beverag is back right on top right so if let's say the state changes this is like more of a state change these lists should retain a different set of data okay so this is okay this is good for application because users get to see a new set of data each and every time they they open an application the the data is not static okay so we done with this part next let's move on to all restaurants okay so for this part will be okay we have the page already but we just have to get all restaurants which are belonging to a particular area code and we display them over here continue we're done with fetching our nearby restaurants and each and every time we are receiving Dynamic data so don't mind about don't mind the picture is we're going to change them a little bit later all the pictures that I'm saving this is just one picture for for the UI so I'll change that so our data is going to be dynamic so that you can see like this part is different from the data that we're saving in the first widget is different from the next widget okay so I'll do that and uh we tested that the data that we're getting is being randomized each and every time that we we save the data okay and now we need to go ahead and work on all restaurants all nearby restaurants here okay so what we need to do first we need to go ahead and just open the page that we're going to be working in which is this page right and we need to just go ahead and open our our hook cuz we need to create the hook that we're going to use to get this data okay so we already created a file for it but we didn't create the hook itself okay we didn't write the code so the code is going to be similar similar to the code that we have here in our fetch restaurants what's going to be different is just the end point that we're going to use to fetch all restaurants is going to be a little bit different the service end point is going to be a little bit different as compared to the one that we use in this particular fetch restaurant okay so first let's just copy the code after copying the code we need to go to our fetch all restaurants and we need to paste the code after pasting the code what we need to do we need to change the name that's the first thing that we should do every time that we copy the code change the name of the hook in this instance we're going to call it fetch or restaurants this is always going to remain the same if you're going to save the verant data but if you're saving a different set of data a different data type then we need to change this the second thing and the most important thing that we need to do here is to change the service end point so we need to go back to our Postman right inside of our Postman this is supposed to be our service end point Okay so let's just copy the service end point go back to our application and we need to replace this with our service end point okay so here we're getting the code from wherever we are going to use this hook okay so that's all that we need to do inside of this hook after that we can save so after saving we need to go back to our viewers inside of our views we need to visit all nearby restaurants okay we need to visit this page okay so let's put this page let's not put it side by side per se what we can do is to have our Shima first okay before we have our Shima let's go ahead and hook our hooks here so we have to conver convert this to a hook widget so that we can be able to consume a a particular hook inside of this widget okay so if we have a over let's just take a look this is very similar to a stateless widget but hook widget doesn't have any life cycle only implements the build method it allows our hook widget to store mutation data without implementation of a state so here we don't have any state that's the same that's why we're using it so by using hooks we convert all our widgets into stateless widgets so that's going to be to to boost our memory like we don't have to consume a lot of memory when we we're building our application or when we're using our application right at the bottom now we are able to consume our hook since we have our our hook widget here so we need to import this and we need to pass the code okay so this is the code that we're passing here down at the bottom we're going to have a list of of restaurants and the data is going to come from results do data and we need to import restaurant model after importing resent model we need to ensure that we have is loading so here we're going to get is loading from Hook results and then we're going to put it in this value okay similarly similar you can change it from final to a bulling value okay final bulling either way it's going to be a bulling value here okay so down at the bottom we need to make sure that we are getting a Shima before we before we rent our data so when our data is is loading then we have to display a Shima first so here our Shima is going to be Foods list Foods list Shimmer and if we have data now we are going to be displaying the list view Builder okay okay my bad so it's supposed to be like that let's form the code after that now we need to add our Checker here since the data that we we have here has the same variable name is this data that we're getting from our from our hook data okay we need to get rid of this data from from our constants so that's basically it that's everything that we need to do here but we need to consume we need to change the data that we are consuming inside of the restaurant tile okay so here it was Dynamic but we no longer consuming Dynamic data okay now we are consuming restant model okay so we can change this to restant model and we can just copy this model Mel type model name go to our tile we change this to restant model and let's go ahead import it after importing we don't have an error but our error comes down here so here we're supposed to access image URL after accessing the image URL we need the resturant title so we need to get the title and here we need the time and for our address we need to access codes okay so here we have coordinates inside of coordinates we can access the address is available so this is the bulling that we use to trigger whether a restaurant is open or closed so it's the same thing that we're going to do here as well so that's all that we need to do let's save this part first and let's save the the other page after saving we need to do the same reset hot restart we need to hot restart so that we can see whether we getting the right set of data or not okay so if we click now okay our data is going to load first and then we're going to display our data here so here this list is supposed to come right outside of our padding okay supposed to come right outside of our padding so we need to move is loading the footless Shimmer outside of the p ping right there okay and we need to save okay after saving let's just reset we want to check how our Shima is going to look how it's going to appear okay it's going to appear nice so that's what we need so we are done with this part the next part we're going to work on our Foods okay how to get the foods how to display it and how to get all the foods related to a particular a particular area code move on to our Foods okay our Foods so what we need to do here we need to just close all these tabs so first thing that we need to do we need to just go ahead to our Hooks and create two new files fetch FS okay supposed to be a that file and we need to create another one fetch all F and it has to be that file as well so we're going to just copy whatever we have here inside of our fet restaurants and then we're going to paste in in Foods okay because we want to handle Foods before we go to all foods so we say the first thing that we need to do is to change the name so we're going to change the name to fetch Foods use fetch Foods okay so here we just change it to Foods let's get rid of an extra F here and we need to change the model that we're consuming Okay so here is supposed to be food's model okay so if we change this model that we're consuming we need to change the method that we're using to convert the string to to model data so it's supposed to be food's model from Json over here and everything Remains the Same but we need to handle our service end point so to Serv to to handle a service endpoint without an air we need to go back to our Postman in our Postman we need to go to Foods okay in foods we have random or recommendations let's see okay so here we have terisu is our first okay so this is the one that we want to consume so we are just going to copy this and then we are going to go back to our project that's going to be our service endpoint so our service endpoint has to be inside and here we're going to pass the code so let's pass the code and let's get rid of that Resturant model that we are not using so everything is done in here okay everything is done we need to go to the page that we're consuming this use fetch Foods so use fetch Foods we're going to use it inside of this this widget and the widget that we have down below but this is one widget we're just going to change it in One widget but it's going to save different sets of data each and every time so let's go to our homepage widgets Foods list in our Foods list the first thing that we need to do we need to convert it to a hook widget okay after converting it to a hook widget now we need before our rain value in our build context we need to go ah have go ahead and have our final hook results so here we're going to use use fetch here we need Foods okay so we need to pass the code so this code in in in in a like a real world use case scenario you have to get it when you get your your location data okay that's going to be the postal code so we need to access our hook results first we're going to have a list and this list is going to be a Foods model and it has to be now here and we have to access our hook results and we get the data okay that's the first thing we need to give it a name so we are going to call it foods like that down at the bottom we're going to require a bing so final is loading is equals to hook results dot is loading like that so first first we need to go ahead and hook our our loer first and then we can have our data but before we hook our loer let's go ahead and add our Checker here so that means the data that we're consuming is coming from this list food model OKAY down at the bottom instead of having VAR now we're consuming Foods model okay and this Foods since we're consuming Foods model we have to change this from as list map string to to our model okay so the first one is going to be an image URL okay so our image URL is a list so we need to access the first item in that list the first image and for our title is going to be do title for our time as well is going to be do time and for our price is going to be dot price like that so this is how it's going to to look like and here we're going to go ahead and add this right before our add our Shima right before our list Feld okay so let's go back to our common folder in our common folder Let's see we have a foot list Shimmer is it food list or nearby restaurants it should be one of the two so let's go ahead and open this Shimmer okay this Shimmer is a a horizontal it's not a horizontal it's a vertical Shimmer it's a vertical this one is vertical so we need this horizontal shim that's the one that we're going to use so here we're going to use a nearby okay and let's add con over here so right inside we don't need to do anything since we passing the data okay so that means the data is is correct is well defined okay so let's save that let's save that list okay and let's save the the food so we need to what reset our application so that we can we can have our hook hooked to this page so here it's working fine but we do have an error all right so what we can do let's get rid of this exception let's see what's the reason why we ain't getting our data okay okay so we have to go back to our Foods we need to print our response here uh it's supposed to be response. status code like that okay so let's just go ahead close it and then but reset our application okay now we have a 200 but we're still getting the air so that's something that we should go ahead and look at restaurants okay first let's go ahead and change these two Foods to get rid of the error we're going to get rid of these exceptions let's just print if we have something if we have an error so what we need to do here we need to debug print okay debug print and then everything else remains is the same okay so now that we're getting our data this data is from from our rest API so we say we're going to just create this food list once that's what we did so if we take a look to at our homepage we go back to our views home homepage okay so in our homepage we have a food list here and we have another food list here so this food list and this food list okay so if we take a look at the data that we are receiving we are receiving different data coming from one response okay that's why we we opt to use hooks because without the state managements this might not be possible okay so we just created one food list and it will save different sets of data each and every time that we open it or close it so now we need to go ahead and work on all new foods okay and this fastest close to you okay we need to work on these Pages we need to work on rendering the the food over here and we also need to work on rendering food over here okay so what we need to do we need to go ahead and work on our fetch all foods okay yes we have the hook already but we don't have cod in it so we're going to copy everything from here and we're going to paste it in all food okay after pasting everything else Remains the Same everything else Remains the Same but what we can do is to change this let's see we need to go ahead go to postman and this should be the same unless the data is limited in the back end let's see okay we should use this endpoint instead of the one that we're using uh by location but we have this one is for categories this one is for categories so that must be wrong get food food recommendations okay let's see how best we can we can do it but for now what we can do since the retain value is going to be the same it's going to be Foods we can hook it up to the hook that we created and then we can see how we can retain all the data related to a particular area Okay so let's go back to our project in our project what we need to do let's just change here to all foods right after changing to all foods this Remains the Same but the only thing that we need to work on a little bit later is to have Foods here like all all foods related to a particular area not recommendations cuz recommendations retains a set of three foods only okay if you take a look it's only three okay so let's go back to our not fastest nearby restaurants it should be one of the pages off food nearby restaurants recommendations okay it should be recommendations so this is the page that we're working in so we need to just go ahead and change this to a hook with widget after changing it to a hook widget now we need to have a final instance of our of our hook results yeah okay supposed to be results over here so this one is supposed to be use use fetch all foods right like that and we're going to put our code down at the bottom then we're going to have a list a list of foods Foods model it's supposed to be foods not food Foods model that's the first one so we imported it here we're going to have food stored in this variable down at the bottom then we need to go ahead and have our bulling so here it's supposed to be is loading is equals to hook results do is loading okay so first when we loading our data we need to show a Shima so our Shima will come right before this padding this is padding all so it will come inside of the Ping then we are going to show Foods list Foods list Shimmer okay and we put put the alternative widget let's format our code after formatting our code what we need to do now is to add an out Checker to the fields since we're getting these foods from from our rest API and we're going to have const over here after that we need to go ahead and change the data type of this food instead of having V then let's specify the model that we're consuming okay so we need to open this food tile in this food tile instead of consuming Dynamic data we're consuming Foods model okay we need to import the food model after importing the foods model now we need to access the images okay not images but the data so here supposed to be image URL and we are taking the first image in our in our list string down at the bottom we're also going to have a title and we're going to have time so here we do have tives list so here we're going to have tives so we need to access these edit atives okay and get every item on each index and store it in this variable so this variable is of type EDI okay and to access the title we need to access EDI and get the title like that so we have one error left supposed to be in the positioned widget so here it's supposed to be dot price okay like that so we don't have errors anymore so let's take a look at this particular one this one is for the cart so we're going to deal with it a little bit later so we're going to save that one first let's save our recommendations and I think we have something missing since we are still getting the errors uh let's see the error is coming from fastest food okay so this one we need to change this one as well we need to make it the same as our other page so that we can run our application so let's just change this to to a hook widget and we have our results so final hook results so the naming convention is it might be a little bit weird but I'm writing it in a descriptive way so that it won't be of a problem to a person who's following if it's hook results that means they results from from a hook okay so that way is easier sometimes it's self-explanatory I don't need to run it back again to explain like okay this is the data that we are getting from from our hook so hook results is the data that we're coming that we're getting from our hook that's why we called it hook results so we need to use use fetch okay all foots and we need to provide the code down below we need to have a list of foods and it's going to be this list is going to be a list of foods model type okay and it can Bey can be now is equals to hook results now we need to access a hook results and get the data okay so we need to give this list a name so the name should be Foods okay put the name over there so just to clarify a little bit if we visit our hook results or ourain value of our hook okay this is ourain our return return value okay so we have data and this data is the first do value and this fo. value is coming from here okay or here either way but this data is the data that we are getting from our rest API we convert it to model data and we store it as a model here okay so this is the same data that we accessing if we say data dot or hook results dot data this is the data that we are we are getting so this data is automatically of type foods model okay so any change we have a value Notifier so any change that is made to to the data the application is notified okay that's why each and every time the state changes we are receiving a new set of data so let's go back so we're done with a little bit of explanation of there so now we need our Lo so final is loing is equals to results hook results dot is loading okay so we need our loader first so our loader will come right before our list view so this one is supposed to be a vertical not a vertical but a horizontal a horizontal Shima and this horizontal Shima after this horizontal Shima then we are going to have our our Foods so we need to add a out Checker now we don't have an air and the data that we're consuming here is of type foods model so we need to change this far to Foods model we're just doing this to specify the data that we're consuming so that we don't have uh misunderstanding okay so whatever we are passing here is of type foods model so since our Foods model is the same in both cases like here and here when we open we are saving the same the same widget okay to display the list so if you're saving the same widget the data type that we are putting in that widget should be the same that's why we had to change this and this is why we had this error cuz when we worked on recommendation like this part try something new we're pushing Foods model data inside of inside of the food tile and we changed everything to go along with the data type that we have but in the other in the other widget which is the fastest food page right this list the food which was pushing to a foood tile it was still a a map string Okay so we've taken care of that we can save if we save we won't have an error so let's just watch reset so our application is running so what like what I was saying before that we might need to change we we might need to change the retain type so this was our retain value what is it like uh our fetch hook we are retaining Dynamic data Dynamic data is our data but we can change this to to the model that we are using in that particular hook so I've created the one for Foods okay this one okay it's the same everything is the same but here we need to specify the kind of data that we are we're retaining so when we use it in our hook then we will be getting the the exact data we don't need to process it further our data would be of type foods model okay so if we visit to our if you visit our hook fetch Foods when you're fetching food we should change this one to fetch Foods okay so our state is the the same as the as our return type the data that we are returning and everything else here Remains the Same and here you have the liberty of putting this one as well inside of this particular model so if you're returning different error types from your back end or if your errors have a different structure then this becomes handy okay instead of throwing exceptions you can have this one in your return type of your hook and everything else Remains the Same and the only thing that we need to change is this part okay when you're retaining if you have over data data is going to be of Leist food model okay so if we go to the widget that we are going to be using that particular hook everything would be smooth let's go ahead and open our views Foods list so our food list our data here is of type list Foods model okay everything else Remains the Same and continue like here we do need to make one adjustment so I hope like you are not having any problems so make sure that the data that you have in your backand is matching the data that you have like your model is matching the data that you have that's the first thing the thing that make sure that your data that you have in your database have all the fields that you have in your model cuz if the data there's a data difference so let's say you created the model but you forgot to add like one value to the data that you post to your database then you're going to have an error because all of the fields that we have in our model are required all the fields that we have in our model are required so if we go take a look at our Foods model all the fields that we have here are required so make sure that you don't miss anything otherwise you'll be running into some errors right so now that we got this out of the way we need to I just made a Readjustment of the UI so here instead of starting with nearby restaurants I just switched to try something new with the nearby restaurants this is just a switch up of the code I just grab this code from from the bottom where it was okay and I put it on top so you can do the same so here it was like this initially it was like this right so yes it was like this so you just need to grab it and put it on top cuz here we have food and we have food so what we can have we can have food on top restaurants in the middle and food down at the bottom okay so what I need to talk about in this section is that when we are getting all the food for a particular code we hook this to the same to the same end end endpoint Service as the one that we used here but we need to get all the data so I've realized that we didn't work on it on the back end so what we're going to do we're just going to jump into our back end at a at a function at a route and then we come back to to our application so here going back to our back end so in our back end we need to create a function okay this function is the function that we're going to create create ghetto Foods here you can say by by code so that it will be clear okay so let me just rewrite it okay so here we're going to have get all foods by code okay so if we getting all foods by code we have to have an asynchronous function that is going to take in a request as well as a response as a response here and we need an our function and we need our braces so we need to add a comma right there down at the botom bottom the first thing that we're going to require is the code from our params so con code is equals to requests. params do code okay now that we have our code we can go ahead and have a TR catch block down here so you know try the first thing that we need to do we need to create a variable where we are going to store the data okay so here we're going to call it Foods list okay so our food list is going to await for the data that we're going to get from from our database so it's supposed to be food or Foods okay it's supposed to be the name of the model is food okay dot here we want to find all the food with the same code okay so we need to put braces inside of find and here we need to specify the key that we're using to get the particular Fed so the key is code and this code that we're getting from request pars is the one that we are going to use here to find the the food okay so once that is done we can just close this and down at the bottom we are just going to return a response with a status of 200 and we're going to send back our list and down at the bottom we're going to return datas uh no response do status 500 and we need a message so our message is supposed to be error. message and we need to close it as well so that's going to be our function so we need to go ahead and hook this function to to our router so we need to go ahead and open routes food route so here we need to open this up so the endpoint name is supposed to be is going to be by code and we need to provide the code as our parameter here okay and we need to map it to get all foods by code okay so let's save so our database is supposed to our backand is supposed to spin without a problem so we got that out of the way so now what we need to do we need to run a test in Postman okay so if we go to postman I've already created an endpoint a request with the name Foods by code so you can do the same and here you just need to attach your best URL and then you have your end point and you need to put in the code of the food that you want to get and if you send you're supposed to get a response okay supposed to get a response so this is the end point that we're going to use when we are getting the the fastest food and uh recommendations basically so let's go back here so we have recommendations page right we're in our homage we're in our homepage in our homepage we need to open this recommendations page it's weird it's not opening okay let's go ahead and look for it it's here recommendations page it's inside home amongst the pages that we have in our homepage so here use fetch all foods right we're passing the code and if we open we just need to change the endpoint here from um the one that we we are using in the front end to buy code and then we provide the code over here okay so let's save this if we go to if we press on recommendations over here so we're supposed to get this data back okay cuz this is the amount of food that we have in our back end one other thing that we need to take care of we need to take care of our Shima I think our Shima is positioned wrongly so in this page we need to move our Shima outside of the padding okay like that so if we run this again okay let's say we open this here our Shima is supposed to to be in that way it's not supposed to be in the middle of the page okay so we are done with that part so the other part is to go to fastest so fastest they are similar in the sense that these fastest food they have the same code so they are closer to you so we can open fastest so here we're basically getting the same data since since we just change whatever we're getting from this hook okay and here we need to do the same so that we can have a better UI okay we just need to minimize the kind of the amount of mistakes that we make in order for us to have like a better design okay so here if we just press we're supposed to get all the foods okay so we are done with this part the next part is going to be let's go ahead and jump focus on our search after our search then we can move on to to the pages that we we want to to render so we're going to have the the food page that's one and we're going to also have the restaurant page okay then we can move on to profile okay so let's finish with search and then we can move on to the to the next task okay in this section we want to work on our search so the first thing that we need to do we need to go to our search page so in our page we need to revisit it in view so views search we do have a search page here and we need to create another model okay not a model but we need to create a new file my bad and we're going to call it search results okay so this is where we're going to render all our results so it has to be a DOT file so we are going to start with the UI and one other thing that we need to take a look at it is whether we have our search function or not cuz I'm not quite sure so let's visit the back end first before we work on the front end so this is our back end okay we do have search and we do have our indices so that would work so let's go back to our front end in our front end what we need to do we just need to create a St less a stateless widget here let's call it search results okay so in our search results we're going to return a container so everything that we're going to put in there we're going to put it later for now we can leave it like that and we need to focus on this page okay so what we can do we can close everything and we can open this this page only okay so here we do have our custom container so inside of our custom container we need to to work on our air bar first because that's where we are going to put our our text field our search text field so the first thing that we need to do is to work on our custom text field okay so we need to go ahead visit common inside of common we need to create a new file and we're going to call it custom text field it's supposed to be field over here and it has to be a that file like that okay so we need to create a stateless a stess widget and we're going to call it custom text widget and let's go ahead and import material after importing material right here instead of just having a container an empty container we're going to give our container a margin and let's go ahead and give it a margin of agen say. and we need to utilize our screen you toose so here let's give it a six. h okay after that let's go ahead and have a padding we're going to have a padding to the to the left so here we're going to say only so we're going to manipulate the left side only okay so this one has to be inside of the bracket and down at the bottom we're going to require a decoration so in our decoration we're going to require we're going to require a color so here for color we're going to go with K gray okay uh not as such but what we need to do we need to have a border okay so our border is supposed to be a border do all and here the color that we want is K gray like that and let's put a a comma here so here we need to make it as small as possible the width so we're going to go with4 we might reduce it a little bit later as for B radius we're going to go with nine let's make it a little bit so it's supposed to be 9. R okay so that's it for styling our container so after styling our container we're going to require a child a child okay so our child is supposed to be a text phone field so in a text phone field we're going to require the key not the keyboard type okay let's just go ahead with the keyboard type keyboard type so for a type we are going to get this as a parameter right on top so we have to give it the same name keyboard type okay so keyboard type is supposed to be keyboard type over here so we need to hover over our keyboard type so that we can get the the type okay so that's going to be the type of our of our keyboard so right at the top we're going to have a final variable with the name keyboard type and we need to import it here okay so after importing that means we can manipulate this custom text field that we are we are creating for other for other purposes okay and the other thing that we're are going to require inside here is a controller so our controller we just have to give it a name controller it's supposed to be controller here like that and this controller is supposed to be a text editing controller okay so we're going to do the same copy the type and then we create the variable right okay and then we edit two or four more parameters after editing it to our formal parameters we need to continue to our next field on edit complete then this one is going to be a function okay so let's go ahead and have final on edit complete let's addit to four more parameters and the name is supposed to be the same like that so here obse secure obse secure text okay so for OB secure text we're going to take obse secure text just the same name cuz we want to use it when we are creating when we are creating the password not the password but the login registration Fields as well so this is the same same field that we're going to be using so if it is false if it is not provided then it's going to be false but if it is provided then we're going to use the provided value okay so here it's supposed to be a ping the final B of secure text in this one it shouldn't be required here so the bowling that we're passing is supposed to be aable bowling okay so that's it for that part so we're done with these fields the next thing that we need we need decorations okay so for decoration we're going to take input decoration uh that's supposed to be input decoration so inside of our input decoration we're going to require uh the first thing that we're going to require here is the B okay so for B is supposed to be input border. none and for hint text we need to also provide it with the style so supposed to use app style and the size we're going to give it a size of 11 for the color we're going to give it K dark and for the font weight we're going to give it font weight. normal okay so that's it for that part and we also need a suffix icon and as for suffix icon we're going to take in a suffix icon over here so a suffix icon is of type widget so let see that we can use we can use any widget that we want to put in in a suffix icon okay so we need to have our suffix icon right on top like that let's edit okay okay so down at the bottom not down at the bottom we have our decoration so this one we can put it right here so we need k a height so for k a height we need to give it a height of 20 and for the style of the text that we're going to to have we're also we going to use our app style okay so that's it for that part and for validation we're going to have a validator okay so here we're just going to put it in a way that we can either use it or not use it okay so valid dator we need to create this field right on top let's close it here and let's make it a final let's add it to or for more parameters that's it I think this is all for our custom text field next what we need to do we need to go back to our page and then we can work on our on our air bar okay so we already have an air bar and we're just retaining a container so we need to get rid of this air bar somehow that we have here so we're going to have a container and we need to give it a a two height two bar height and we're going to give it a height of 74 like that let's give it an elevation we're going to give it an elevation of zero after elevation we need to disable automatic leading let's make it to false and our background color we need to change it to K off white it has to be the same color as the the background so let's go ahead and check which color do we have as our background okay so it's the same color so that's good so we need to add a title okay so our title is of type widget okay it takes in a widget so that's where we are going to put this Custom Custom text field okay but first we need to to RI it around a petting widget right so in our petting widget we are going to have agenes dots only only need to manipulate the top part and for the top part we're going to give it a petting of 12 and after our petting our petting takes in a child so we want to put our child and our child is going to be the the custom text field that we we just created okay let's see custom it's supposed to be custom text field it's not showing up custom text field rdet okay let's go with that name in the way okay okay so that's going to be our our search okay so first we can try to style it a little bit okay let's see what we have here we have suffix icon we can also have a a prefix icon okay so we're going to make it a inable as well it's going to be inable widget it's either we can include it or exclude it okay so we can just copy this and we can have our prefix icon okay so the name has has to be the same so we got that out of the way let's go ahead and add this to for more parameters so we're done with that part let's save nothing changes here so back to our page the first thing that we are going to require we're going to require our controller so here we have to convert this to a state for widget and right at the bottom we're going to have our text field okay so it's supposed to be final text editing controller supposed to be text editing controller search controller okay so this is going to be our controller uh let's just ignore the the private okay so that we won't have our link complaining in stuff so here first let's mention our our controller so our controller is supposed to be the search controller that's the first thing next we're going to have our hint text keyboard type is supposed to be text and then our hint text why our hint text is not showing up uh let's see we don't have hint text okay so we can add hint text so hint text comes or hint style we added hint style but we didn't add hint text okay so for hint text we can give it the same name so it's of type string so let's go ahead and add a final string right on top it's supposed to be final string hint text and we need to head it to our formal parameters after we edit our formal parameters now we can be able to access it right inside of our our custom text with hint text uh let's just say for Foods here okay so that's going to be our hint text so what we can do we can have a prefix icon and but we don't want our prefix icon to be here we want our prefix icon we want this search to be on our suffix icon not on our prefix icon so we have to change this to a suffix icon okay and for suffix icon that search will do so we need to wrap this icon inside of a gesture detector so that we can click on it each and every time that we want to and for on tap we're going to leave it as an empty function for now until we work on the controller that we're going to use to search for foods okay so let's go ahead and just format our code after formatting our code we need to change the icon that we're saving in here so for this one we're going to have icons from flatter Vector icons so it's supposed to be search but not this kind of search but search Circle uh that one is too small so let's try to increase the size a little bit let's make it 26 for starters 26 is way too small 34 yeah okay 34 38 40 okay 402 so let's add screen you choose so if you add new chose we have to get rid of this cons let's go ahead and break on the widget that we're supposed to display inside of of our custom container okay so we need a loer okay a loing widget in h basically we don't okay let's just create it let's create it and see how it goes so in our search then here we need to create the widget so the widget name is supposed to be loading widget okay and it has to be a that file so here we're going to have a stateless widget loading widget is going to be the name let's import material after importing material what we need to do we need to go ahead and work inside of this container so we need to give this container width and height so we're going to give it width first so width is going to be width so the width is coming from our constants and we're going to give it a height and the height is coming from our constants as well after that we need to have decoration uh okay we can skip decoration for now and see how it looks and then we can add decoration a little bit later so child we need to have the padding so our padding we are going to only manipulate the bottom part okay so here supposed to be agences dot only and we're going to have bottom okay so for bottom we have to give it 180 after that we need another child okay so this child is going to be the the animated Json file that we're going to be rendering to our screen so to do that we're going to be using loty I don't know whether we do have it in our P or not so let's go ahead and visit our P okay we do have it here so we should be able to import it somehow Lo bu do asset supposed to be asset over here and we need to provide the path so here we're going to have width and our width is going to be width and we need to provide height as well so our height is going to be our height and here we need to divide the the height by by two okay so we need to provide the path with which we are getting the assets okay the asset that we need to to render so we need to go ahead and visit this folder anime anime and then we are going to get delivery. Json Json over here okay so we need to make sure that we import lot here so we're going to say import okay that will do but we do have an error here so supposed to be height let's save that let let us add Ed so we done with that part search let's hook it up in here okay so this is a a loading widget like that okay so that's going to be our loading widget so we need to make some adjustments uh the adjustment that we can make of here this is K primary our container our custom container texes in a color it has off white so here what we can do we can have a color and the color should be nullable and we have to give it a name color okay this do color like that okay so if a color is not provided then we're going to go with off-white if it is if a color is provided then we are going to go with that provided color okay so we are doing this so that we won't affect the widgets that but this is so that we won't affect the widget that we created already okay cuz we need to just change color of this particular page not all the pages that we created already so here we can provide a color so this color it has to be colors white let's go with white here let's see okay so this is what it's going to look like so what we can do we can add a little bit of style here so that we can we can either add a little bit of style or just make our air bar the same color Okay colors do white not with come on colors. white like that okay so that's going to be our page for now everything is is uniform so this is not a priority though so what we need to do next is to focus on creating our controllers and how we are going to get the data when we hit search Okay so here we need to test our search first so we need to go back to our Postman instead of our Postman we go back to our collection and we're going to go to search Okay so let's just push this if you get the data back that means our search is correctly implemented in our back end so that's cool so the next thing let's go ahead and create the function that we are going to use but before the function we can work on search results or we can do them both we can do them both so first let's go to controllers and let's create a new controller and we're going to call it search controller okay so search controller is going to be a DOT file like that so let's create a class so here supposed to be search controller and it's going to extend get gex controller okay so right inside of our controller we need to create some variables so the first variable that we're going to create is an RX in an observable value okay so it's going to be RX po okay so the we'll be using it to denote uh like whether our application is loading or not our search is loading or not not application so we're going to have rxo with the name is loading so the value is going to be initially is going to be false do OBS since it's an obser observable value right at the bottom we need to create a getter so we're just going to get the value of is loading and store it in is loading okay so right at the bottom we need to set that value okay set loading here we're going to have a bing we're going to take in a in value and we're going to set the value of this private variable to the new variable that we're getting from wherever we are calling this function okay so since that now that we're done we need to create a list so this list is going to be of type foods model and it has to be anable and we're going to call it search results like that after that we need to create a a function with the name uh search okay search foods so when we are searching Foods we are going to require the key that we're going to use to search for the food so our key is supposed to be a string and we're going to just call it a key okay like that so inside the first thing that we need since is going to be to be an open we're sending this to an an open route it's not protected it's not a protected route so the first thing that we need to do we need to to set loading okay so here what we can do we can say set set loading equals to true so whenever we are going to hit this particular function we're going to set loading to to true so here instead of that let's call it let's call a set not a void function here okay so that we can get rid of the of the error that we have down at the bottom we need our our URL so URI URL is equals to u. pass we need to provide our URL so first what we need we need our base URL right after our base URL we need to search we need Foods we need to access Foods first that's the service end point search and then we provide the key and this is the key that we're getting from wherever we are going to call this function so down at the bottom we're going to have a trach block okay so in our try we need to create a variable with the name response is equals to await we need to await for for the request that we're going to to make so here http.get so when we're getting we're going to require the the URL okay so first thing we need to import HTTP right here okay so we're going to say import HTTP yes HTTP yes HTTP Okay so we've gotten rid of this error and we have a second error showing up on our screen so we have a wait so that means we have to make this function a synchronous okay so here we have to add a sync and let's close it here okay so if we have results if response. status is equal to 200 setus code is equal to 200 then we are going to go ahead and set the results to this this particular particular value okay so we need our results first right so to convert the string that we're getting from our from our response we need to convert it using the method that we have inside of our model and we store the data inside of this particular variable that we have here okay and we also need to set is loading to force okay so let me check one more thing we go back to our back end we open our search okay so in our else here we can say for error is equals to API error not error API error from Json and we're going to put response. Bing so that means if this is not 200 this is what we're going to do so if we catch something let's just go ahead and set to false and then we can just go ahead and debug print not print but let's go ahead with debug print okay so here supposed to be debug print supposed to be e to string so these ones we can show them in a snake bar a little bit later but for now this is all that we need to do uh I guess this is all so let's just get rid of the complaining link okay so if we type something and we hit on search we're supposed to get the data if the data is loading we're supposed to get a Shima in here so if we go back here it's a single single sing Single s scroll view either way okay so we need to access our controller so we're going to have final controller is equals to get.put here we need our search controller so before everything let's just go ahead and wrap okay we're going to wrap the whole scaold in OBX so here now we need to use the the OBX value otherwise we will run into an error so we're going to be using our object value inside of our of this body okay inside of the body but here okay so we're going to have a condition let's bring this down so here we need to access our controller after accessing our controller we have to access the controller is loading okay what's the reason why we ain't accessing this okay so the name that we used is the same as this controller that we have here so we need to change this name okay let's give it a name search food okay like that so this one is supposed to be search then food controller like that so we have three errors and they're coming from from this point so here supposed to be loading the controller do loading then we supposed to display something so the first thing that we need to display if our our foot is loading we need to display a shimmer else okay so that's way it gets tricky now so if it's loading we display a shim con right and if it is not loading we have a scenario whereby we we do have our search results as empty or now okay so we need to access the controller controller dot search results is equals to to now we're going to display loading okay else we're going to go ahead and display the the widget that contains our search results okay which is this widget that we have here okay so let's go ahead and put the name like that okay so here it's now all SE results are now so that's why we have this if it's loading then we are going to to have a Shima indicating that we are loading okay so we need to hook our our controller not our controller but our function here so we need to access a controller and the name of the function that we're going to be using and since this function takes in a a key that's a search key this is the key that we're going to provide here and it's coming from from our controller okay so let's save that so in our such results we need to show our data okay finish on our our search results okay so in our search results the first thing that we need we need to have our controll right on top okay so here we're going to have a final controller and this controller is our search controller so don't get confused is equal to getput after that we need search foods okay it's supposed to be search food controller okay like that it should be the one and let's close it down there so after closing it now we need to jump right into our container so inside of our container the first thing that we're going to require is padding so for the padding we're going to use dot only so we can use dot only or we can use from Left Right and bottom so to the left we're going to give it a 12 and from the top we're going to give it a 10 okay Mouse the computer is a little bit slow so on the right we're going to give it a 12 and at the bottom let's go ahead and give it a zero so after that we need to go ahead and have our height so our height is going to be equal to the height that we have in our in our constants it's not showing up okay spelling error okay so now we do have our height after that we need to have our child here okay so our child is going to be elv Builder supposed to be this your do Builder so our Builder text in context text in item Builder and item count okay so here we're going to have item count which is our results dot length and for our Builder we're going to have context and index so we need to rain something in here so in our return before we return return something what we need to do we need to have Foods model and we're going to call it food is equals to controller set results and then we're going to access the index and store the data inside of this particular food down at the bottom we need to ret 10 the food tile okay so our food tiles takes food tile takes in food so we already have the food right here so this is all that we need to do so let's go ahead and save probably we might run into an eror but that's something that we can handle in a little bit so let's just watch reset our application and then uh and what we can do over here it might be now as well so let's go ahead and search for a pizza now okay we do have an error we do have an error we didn't manage to to search so let's see what is the problem so if you go to our search page let's go ahead and print our key okay before we print our key we need to make sure whether this P sure is correct or not API okay we forgot API so the service end point is wrong it's supposed to be slash API slash Foods okay so now if we try to search for something we should get something over here so this is how our search works so now we need to set it in a way that if we have results here we need to be able to clear this clear the data okay so let's go back to our search page in our page G A detector so we need to change both of these too okay so if controller. search results is equals to now then we can go ahead and run our our search function else we are going to to set it to now and we are going to go ahead and access this search controller and we're going to clear okay like that so the same condition so here it's supposed to be is not equal to now then we're going to do something we're going to show one icon or we going to show the other so here let's change the color to K primary we don't want the color to to be the way it is like now so let's just copy this something is missing this shouldn't be inside okay it should be outside now the question is we have one okay so it should be here we're going to display another icon over here so let's just form out the code so that it can be visible so our code is visible here we're going to have close with a color a color k red like that okay so here this supposed to be or to be your function okay so here if we press we're supposed to clear and we're supposed to clear the data okay so let's go ahead and search again now our state has changed yeah but we're clicking twice we don't want to click twice we do want to click [Music] once okay no problem no problem so here what we can do we can use an alternative way is instead of doing this we can just use an OBS to trigger the the changes here okay so whenever we're hitting this we should have a bulling value that we're going to trigger okay so let's go back to a sech controller let's copy this RX bulling that we have here and let's paste it down and we need to change the name trigger it's triggered that's the name that we're going to give it like that okay here supposed to be set trigger like that okay so that we can have an easier State change so here controller dot is triggered is equals to True is equals to false we can be able to to search else if it is true then we are going to to do this okay so down at the bottom that's the same logic that we're we're going to have so we can have Pizer here search is equals to true man okay so here it's is equals to false we didn't trigger any change so we need to search and then we we trigger the we change the state of this variable that we have okay so we're going to have set trigger here is equals to true and on click here we going to set it to to false so let's go ahead and run a test again so we're going to go to search and let's search for Pizer okay now that we have this we can be able to to clear okay so our state is responsive everything that we want to do in search we have done so the next thing that we're going to focus on is creating our our food page okay this cuz these Pages they need we need to redirect to to somewh we need to redirect to somewhere and we also need to handle the way that we are going to be handling these selections so that we can have our Dynamic homepage we still have a lot to cover but so far so good on our on our Dynamic homepage Okay so so what we need to do over here we need to rrap everything from this first heading up until to to the last one to to the foot list that we have right at the bottom in a column okay let's put this in a column okay let's form out the code a little bit okay after wrapping this in a column what we need to do we need to wrap it we need to cut the cut this code and wrap it in an OBX okay so after cutting we need to have an OBX CU we need to observe the changes the changes that we have in our category controller okay so here we need to paste our our code okay so we're going to have a condition whether to display this column or to display play the the data that we're getting related to a particular category so first we need a category controller so we need to have a final controller here so our controller is going to be equal to get.put so we're going to consume a category control controller supposed to be category controller so here we can just put C category controller and let's close it so we need to use this controller to access the value that we have related to to our category okay so in order to do that let's have our controller here controller dot we need to access category value if our category value is equals to an empty string then we're going to display the the column else we're going to display something else down at the bottom so at the bottom we're going to have uh another custom container supposed to be custom container over here so we need children for our custom container we need a child no children okay so our child is going to be a column so inside of our children inside of our column we need children so our first child is going to be a heading okay so it's going to take the same the same style as the one that we have here we need a heading and we need the the data that we're displaying here okay so we're going to just copy a heading from here uh this heading let's see yeah okay we can just copy this heading and we're going to paste it down here let's format our code after pasting this we need to change the title okay so our title is going to be explore it's supposed to be explore over here explore and then we need to mention the category that we are exploring okay so we need to access our control controller after accessing our controller we need the title okay so the title value that's the one that we are going to to show there and we need to mention category okay so let's go ahead and save after saving if we click we're going to have this change all right so we need to get rid of this okay we need to get rid of this so what we can do we can visit our heading in our heading we need to have another value here final Bing uh this one should be nullable we can call it uh button it's a button but we have to give it a name okay let's just say more here okay so initially this more is going to be false oh if it is now then we don't need to display if it is now then we we need to display if it is not now then we need to go ahead and remove it from here okay so we're going to have a condition more is equal to true then we're going to show the icon else we're going to show size box size boox to strink like that so now let's go ahead and close this so we removed everything here that's not what we want is equals to now okay if more is equals to now then we are going to show if it is true then true or false then we're going to show we're not going to to show okay so since we have this condition here we can test it inside of our homepage so here we can have the value more and then we can assign it to true or false okay so if we click then we're going to have our heading without the the bottom okay so we done with that part right here we need to display the foods list okay that's another food list okay so this this food list it has to be a little bit not a little bit different but it's supposed to be category food list okay so let's just give it a name get rid of cap category Foods lists okay like that so this is the name that we need to use when we're creating the the widget so we're going to create the widget inside of this folder that we have here home widget and then we're going to create a new a new file and we're going to call it category Foods category Foods list okay and it has to be a that fire over here so here we need a stateless widget and we have to give it the same name that we gave it inside of our homepage so here let's go ahead and import material let's save okay let's save and here we need to import the category list let's add con over here okay so inside of our category category controller we we going to create a function to handle the the data not the data but to make an API call to to our back end so that we can get the food that's related to that particular category that we need to display okay but before that let's go ahead and just work inside of this list that we have here okay so this list is supposed to be this same as the list that we have inside of our fastest foods okay so it's going to be the same as this list that we have here so probably we might need to get rid of the padding but for now we can just take it take it as it is so here let's go ahead and copy this hook data we not going to use a hook but just for UI design let's use this and we can change it a little bit later so we need to come to our category list inside of our Builder we need to paste our hook data and let's import our hook and here let's import our our model after that we need to change this to a hook widget okay so inside we need to put this particular particular code uh do we even need a container nope let's see how it goes if you put it like this so we need to import the Shimmer and we need to import screen your TOs and we also need to import the food tile okay like that so let's just format the code so if we click okay that would work that would work but here we need to to have the container we need the container so what we can do we can cut everything from here and let's have the container we're going to give this container a width and the width is going to be width and we need to give it a height as well our height is going to be height like that and as for our child we are going to paste the code that we we copy and let's get rid of that and put and close the close the widget down so we need to change this to a size box so let's go ahead reset our H reset our application so we have our data okay and we also have our data here so that's exactly what we need so if we click on a particular category then we're going to have the data here and if we deselect we going to have a homepage so we need to just change change this data where this this data is coming from so it's either it can come from a hook so we can go with a hook a hook might work what we just need to push is to push the ID the category ID okay so the category ID here is coming from from our controller okay so if we visit our category controller we have the r string that's the category value so what we can do over here is to print the value okay so we have a title and we have a value so let's go ahead and print the value and see what we're getting so if we're getting an ID we can use that ID to to to call our our race API okay we can use it in our hook so let's just resize our Termino a little bit okay that's a category ID so this will work without a problem so now it's deselected we don't have a category over here go ahead and create a hook to face the data by category and the code okay so here we're going to have a new file and we're going to call it fetch category category feds okay so that's going to be the name and it's going to be a DOT file after that we need to just go ahead and open one hook which is related to to the field okay so we can copy this okay and one other thing I added a delay over here so that we can have our delay when we're searching the food because here if we using the same hook we might need to delay a little bit so that we can render the data like Dynamic data without any error okay so you can add a delay here a little bit before getting the data back that's for the homepage besides that our hooks remain the same okay so here I'm going to select everything and and I'm going to C to paste it inside of the hook that we just created so inside of this hook what we can do instead of having this exception we can leave it there we can leave it there that's no problem so here we need to get food by category and the code so if we visit our Postman and under getfood recommendations we have this endpoint with the name recommendations by it was initially recommendations by location so I had to change it to recommendation by cut and code okay so we need to copy the service endpoint from over here and we are going to paste the code the line here okay so here we need a or our food okay not we don't need our food but we need our category we need our category our category ID so in order for us to get the category ID what we need to do it's either we can get it from here or which is a little bit it'll bit complicated okay let's go ahead and open our page first okay so this is where we are hitting the the widget okay we don't have a controller here related to to the category controller so instead of using it here we can just use it inside of the hook straight from the hook so right here we're going to have a final controller is equals to category controller uh final controller is go to get put get.put so here we need to mention the name of the controller that we're going to be consuming so we're going to be consuming category controller here we're going to to have some bres dollar sign we need our controller dot category value and we need the code over here so dollar sign code okay so that's going to be our our URL okay everything else Remains the Same here we are retaining fetch Foods okay but we just need to change the name okay fetch Foods like that okay so that's the name that we're going to give it so we need to go ahead and use it okay so to use it we need to go back to to our file this category Foods list and we need to change this to use fetch if it's by category okay okay so we can go ahead and run a test let's just put start our application before we we do anything okay so here we successfully get our data and if we click on passer then we are going to get this data so I set it in a way that if a category has less than five foods we are not going to retain those Foods we're going to just rain all the food that not all the food but we're going to rain a random a random list with probably I don't know the number but the number is like 108 but it's not that much okay so if you click here on Burgers on Burgers we don't have anything so that means everything that we have is below posture okay let's just run the test again so all our food are falling under one particular category okay that needs to change somehow we're going to change that a little bit later and then we can run some test so this same uh we can use the same hook this hook that we have to get the food that's related to this category so we are going to minimize the code we're not going to rewrite but we're just going to find a way to connect this hook to whatever we got going on over here okay ER is disorganized is mine you can go ahead and change the categories so that's what I'm doing right now I'm using 3T to just make the changes you can do it using Atlas dashboard that's way too easy so you can choose whatever you want to use to change the data so for me I'm going to go ahead and try to work with with 3T okay so I'm looking for for beverages okay so we need the ID Beverages and need to visit our Foods terisu bow G platter okay so this is a beverage so we need to go ahead and edit the document okay okay update so we've updated for beverages so what we can do we can try to okay so now we have one beverage that's that's good chicken we don't have anything carry we don't have anything pastor we have three okay so you can distribute I have less foods but I might make some more in a little bit and then just make a demonstration with the foods but there's one thing that we need to take note of before we proceed we need to change the background color for for our tile okay so when we're using this tile inside of this particular particular widget that we're in in our homepage the color has to be different okay so we need to do the same as we did for for that button the button that we removed so we need to have another final B in here and we're just going to call it color uh okay we can have a color the color is quite okay not colors but color color here okay so this is not a required parameter so it appears this do color okay so we need to change the color of the container is it offwhite uh yes let's offwhite or or color here it should be color if the color is now then we're going to show off white okay so if we go back to this page we can have the color over here so let's put it to let's just go with colors do do white that would do let's go with white first and see how it looks okay that would be a little bit proper cuz we can see the edges of our of our tile so let's go ahead and visit this okay yeah it's okay cuz the color is white and here it's a little bit gray it's offwhite so off-white on off-white that on that won't come out okay so this is good so we are done with this part we got our food the next focus is going to be our food page but before we do that let's go ahead and try to see whether we can have the same for for this page okay we can have the same for this page so so for that particular page our return is going to be the same as we have here let's take a look at the page first okay so this page can use a little bit of design so what we can do we can look for the page first and then we can go ahead design it and then uh try to figure way how we can use this use fetch F by category okay so we need the same design so for that page we can find it in categories category page okay so category page we only have a center so we need it to look like this page that we have here so all categories we can just copy all the code that we have here that's that's the body we need the body let's close the other pages that we are not using over here we finish with search search controller custom container custom text Field height food tile okay so we're focusing on the category page so our return value is going to be whatever we copied from the other page so we need to import the background container we need to have this Shimmer and we need to change the list view that we are returning here so the list the list view that we're returning it has to be the same as the one that we have in our homepage okay so it's going to be the same as this one so we need to copy the padding go back and then we paste the code in here so here the error Still Remains cuz we need our hook here we're displaying a a foot style like that so let's go ahead and copy this particular hook and let's paste it right on top we need to import okay and let's format the code after formatting we can go ahead and Save okay so if we click here nothing is going to happen cuz this particular the category doesn't have anything okay the category doesn't have anything so let's go ahead we're going to run into an error this areas because we didn't change this page to a hook widget okay so take note when you're using hook whatever hook you whatever page that you're own it has to be a a hook widget whatever widget that you're trying to use a custom hook or any kind of hook it has to be a hook widget okay so all categories we have all categories here we don't have anything because we didn't get we didn't have the the category I guess so what we can do we can go to pizzer still nothing so that's okay so we need to set the value inside when we are we need to set the value of the category value when we click on this tile okay so we need to go to our category list so here we have our category widget yes so we're going to use we can use both okay both of these functions but we're going to use them in a different page so this page is a little bit different that's all categories right so we need this category tile all right when we click on it we're transitioning to this page but before we transition we need to set this data belonging to this particular category to this controller that we have okay so we need our final controller here is equals to get.put so we need a category controller okay like that so if we click on Pizza uh probably that should work but still not working what we can do we're not supposed to be updating to nothing here okay so these we should be setting to category dot title and here it's supposed to be category. ID like that okay so if you go ahead and click yes our data is loading but we have an overflow issue over here and we also need to change the category title okay so since we do have an overflow issue let's go ahead and address it so it's like what 13 pixels uh let's go ahead and close some of the pages here because it might cause a little bit of confusion we need this tile or initially we we done with the tile whatever we are going to do we are going to do it inside of our category page okay so here we might need to have leading we need leading CU we need to clear this the controller the values that we set into the controller on the time that we press back okay we need to set those one we need to reset them so that we won't have data in our homepage okay so that's something that we're going to take care of so here we do have this let's get rid of the padding and let's see how it looks it looks fine with without the padding so let's just get rid of the padding from over here change the container to a size box after changing the container to a size box we need to get rid of the color here okay so so far SEC good as for our title our title is going to come from from our from our controller so here we're going to require our controller as well so let's have a final instance of our controller is going to be equal to get output so here we need to use cut controller so our title let's just have our reable text widget so we need our text for our text is going to be of type string so here we need to access our controller to get our text controller dot category title and we need app Style let's give it a size of 13 and let's give it a darker color so we're going to go with K dark and for the font weights let's go with 600 like that okay pizzer okay C great so the color here can be K green or like that it can be faint so that's one thing on pack we need to just clear whatever we have here cuz if you click on another one then but that's not the case okay let's press back back so if you press back back back we're going to find the results here as well okay so that's something that we don't want to do okay that's why here we're going to have leading so for leading we're just going to have this button here we're supposed to get back so this one is an icon button on press we are going to to have a function in this function we are navigating back right let's just change the color to K dark like that see it's supposed to be iOS at the same time we need to access our controller and then we're going to update category to an empty empty string and we're going to update update Title as well to an empty string like that okay so that's all that we need to do so it gets easier when we we at this point because the only thing that would be left is to just hook the correct pages okay so pass if you press back we Cate our titles and if we come back here we have our data so it works okay the beverag is we should have one item this is good okay so everything is working fine without any problem so we are done with that section next let's focus on our Foods project the first thing that we need to do in this section is to create a new file CU we need to work on our food page cuz we are done hooking these particular pages to the correct widgets but we have to work on the pages that we have to display that's for instance for the food widget we have to hook it up to to the food page for the restaurant widget we have to hook it up to to the restaurant widget so that's one that's two two pages that we need to create when it comes to restaurants not restaurants but categories if we open categories Pizza this is a full item now so we have to hook it up to a foot page so once we're done with these Pages most of our bre will be done the only thing not only thing will be left with a cart and our profile and we need to also work on our Maps so Maps we're going to focus on them on a different section cuz in that section we just need to deal with maps only and cover all the sections that requires Maps Okay so let's get right into it so we are going to open our project directory in our project directory in our project directory we need to go to views after going to views we need to go to we need to create a new folder okay so this folder we're going to call it food we just need to separate it after separating we need to create a new file and we're going to call it food page all right okay in this page it has to be a DOT file so inside of this page we need to create a stateless widget let's go with the state for widget supposed to be a state for widget in here and we have to call it food page like that okay so we need to import material first after importing material right at the bottom we need to rain a scaffold so our scar fold this scar fold is going to be a little bit different cuz for this page we are not going to include the the AAR so what we need in here we just need a body okay so we're going to have our body and as for our body we're going to use a list view because we want our page to be to be scrollable okay so we're going to make this a list view uh let's make it a list View and here let's include physics first so at first we just we are going to disc disable this scroll okay so con so to disable this scroll we use never scrollable physics so that means the page is at list view but that list view is not scrollable here okay so that's our list next we are going to go ahead and have our padding okay so for this page we need to get rid of the padding that we have in a in a list view for instance if we go to just put children here all right and then let's just have a container as our first child okay we're going to put a container here and this container we're going to give it width and height okay so as for our width it has to be the width that we have in our constants and as for our height we are going to give it the height that we have in our constants as well so after that we need to give it a color so this is just an illustration of why we're including the pading okay so for the color we can go with K primary right like this so this is our page so in order for us to use the page we can go to any of these widgets that require that requires the page right so let's go to to this tile that's full tile inside of Home widgets okay so here we have on tap right so on tap we need to get to the page that we created okay we need to navigate to that page so to navigate to that page we're going to use get to okay and the other thing we're going to be passing food so here we do have an error because we are not requiring this particular variable inside of our our food page so what we need to do we need to go back to our food page inside of our food page we're going to declare a final variable of type food model Foods model and the name we're just going to call it Foods here okay so we need to import this model and then add this particular value in our formal parameters after adding to our formal parameters we can save after saving if we come here then we import this page we are not going to have the error okay so that's one problem solved so now we are able to navigate to this page and we're able to display the data related to this particular particular widget okay if it is this widget that we click we should be able to get all the data related to this particular widget okay so we come here to our food page inside of our food page just to make sure that we are receiving our data we're going to print and we're going to access Foods okay dot uh it ain't supposed to be foods but supposed to be food here so to access it we use widget. food dot okay so let's just print out the description of that particular food item that we click on okay so right now or we can get rid of this foods from con so if we click on this page we are going to be redirected to an empty page with a container and on our console we should be able to see the description of this particular food okay oh we in okay category list no food tile okay that's a food tile not this tile that we have here so let's just copy our navigation here and go to our f list in our food list we're going to we're returning the food widget okay so on returning food widget we have this on T function okay so this is the function that we want to utilize to navigate to to the page that we created to the food page okay so here we can paste the the navigation code first we have to import get and we have to import the page page itself after importing these two we can save okay and if we click we're redirected to this page and this is the description of the of the particular widget that we clicked done so what I was saying before we do have this empty space right here on top right so that's the space that we need to get rid of inside of our food page so we have this list View and it's not scrollable okay okay so if we remove this particular property and save then this page is going to be scrollable but that's something that we'll do a we'll deal with a little bit later for now we need to get rid of the padding so I'm going to uncomment padding so here for padding we have to use agenes dot zero it's supposed to be zero over here okay like that okay so everything that we have in this particular container is covering starting from the top of the screen and we not leaving any space Okay the reason why we are doing this we're going to have our image so our image should cover this part we shouldn't have any white space right on top okay okay so let's get into it so first what we need to do let's uncomment this section and let's remove this print section okay so instead of having a container over here we just going to remove the container and we're going to require a stack okay so for a stack the best way to not the best way but the easiest way it's a trick to create a STI without a problem we can just create a a column either way the difference is the same okay let's just go with the stti so our St St takes in children okay so we have to leave it like this for now so on top of our St not on top of our St but our first child of this de is going to be a clip wrecked okay so we're going to have a clip rck and a clip rck takes border radius so for the Border radius we're going to have border radius dot only but we're not going to manipulate both sides we need to manipulate the bottom right only okay so let's get rid of that and we need to import screen new tools okay after importing screen new tools we are done with this clip rack we need to go ahead and give our clip wck a child okay so for a child we're going to have another St withget okay and we're also going to give it children so inside of this children our first child is going to be a size box so this is the size of the container that we want to display right on top the container that's going to contain the image okay so over here we're going to have a size box and we have to give this size box width and height height will do because the width it will take up all the width that we have so we're going to give it a height so for height let's give it a 230 and we need to include our screen toils okay after that we need to give this a child but before the child let's go ahead and convert this to a container first we need to see what our design looks like okay change it to a container and we just give it a color over here okay so that's going to be our design okay so we have to place our image right here inside this is why we didn't need space right on top okay so for our images we are going to have a list of images because if we take a look if we come right here on top and we say print okay we need to print widget. food do images image URL okay so our image URL is a list okay a list of images so in order for us to display all the image is we're not going to use any parkage for this particular part but we're going to use a page view okay so we have to convert this back to a size box get rid of the color after getting rid of the color we need to have a child and our child is going to be a page view Page view. Builder Okay so our page view. builder requires an item Builder and an item count okay so first we need to take care of our item count and our item count is going to be widget food do images. length Okay so for our Builder our builder takes in context as well as the index so we're going to have context and we're going to have I representing our index and we need to return return the to rain the the widget that we need to display okay for this instance we're going to display an image but this image we have to encapsulate it inside of a container okay so we're going to have our container here after that we need to give our container width and height okay so as for width is going to be width okay so let me drag this down a little and let's get rid of this this what we can do we can just okay for width is going to be width okay that's for our height our height has to be the same as the height that we have on top so for height we have to give it a 230 after giving it a height we need to give it we need to give this container color let's just go ahead give it 230 first and let's give it a color so for the color we're going to go with let's go with K light white the color is unnecessary though so I have to let you know so here we do need a child okay so for a child we're going to use a cached Network image because we don't want our images to load not to load we don't want to load for our images from from the API each and every time so if we open this particular food item and we have a cach image that's the image that we're going to use the next time that we open the application okay so we're going to use cached Network image so for cach Network image it requires an image URL as well as the other properties but we are not going to take care of as many properties here so we're going to just have fit as our first property and for our fit we're going to use boxfit do cover because we want the image despite the size okay of the image CU we don't know like what's the size of the image the restaurant is going to upload to the application but whatever size we are given we have to make it fit to our design without any any problems or without altering the appearance of our application so we have to use boxfit do cover okay so here we have to provide the image URL okay so for image URL is going to come from this particular list right this is our list of of images so if you take a look here we do have a list string so we have to access this list string and get an image from that list okay so to access the list we have to use our Index this I that we have right here on top okay so we have to put that and we have to put I so we are accessing our list and we're getting the index that is provided right here okay so that's all for image image what we need to do we just need to close this and and reload so that's our image so that's going to be our food image so we have two images one two one two okay it's not the same image it's just one URL printed twice okay so we have two okay just to be sure here what we can do we can print wiget do fed not I but we want to print the length to see how many items we have in our list okay so we have two items so one two one this is the first one this is the second one okay so we are done with that part now we need to move on to our positioned widgets okay cuz we need some widgets down here and we also need to show an indicator like which image are we on whenever we are sliding through our our images Okay so let's get right into it the first thing that we need to do we need to go ahead and close this size box over here okay so we need to add a comr after adding a comma since we are in a positioned widget what we need to do we need to go ahead and and have a position Bridget so in a position Bridget we're going to require a a child but before the child what we can do we can specify where we want to position or our positioned widget in this instance we want to position to position it on the right bottom like here right bottom right not right bottom but bottom right okay so we're going to give it a bottom of 10 okay so here what we can do we can just have our no widget so our widget is going to be a raw widget our main exis alignment is going to be Center okay after that we need to specify the children but the way that we're going to do it we're going to use list or generate we're not going to use uh like children in there like to put one two three like according to the numbers no we are going to put a list of generate okay so that's going to be our children so we need to get rid of this array and here we're going to use list do generate so we need the length so the length of our list is the length of our image o image o list here okay so that's going to be our length so we put that there after that we need to go ahead and we have our return return our retain widget okay so for return widget let's get rid of that put braces and we need to return a widget in here so here we're going to return a container it's either we can return a container or we we can return a a cirular no that one might be too big so let's return a container if it is a container this container we have to give it a we have to give it a a margin and we're going to give it a margin of four on all sides okay margin agenes total let's give it a value of four so here do H after the the margin we going to require width okay so for width we're going to give it a width of let's give it a width of 10 for now we might need to change a little bit later and we need to give this container decoration so for decoration we're going to have two different colors but we are going to also require a controller to keep to observe like which index are we on okay so let's have box decoration first after having box decoration we're going to require the shape so the shape is supposed to be box. Circle over here that's why we are not going to require a b radius okay down at the bottom we're going to require a color okay so for colors we're going to go with K secondary let's go with K secondary for now whenever we are hooking it up to our to our controller then we're going to to change to change this to change the condition not to change but to put a condition on like which color are we able are we supposed to display on the screen depending on the index if the index is zero then if the index that we are on on our pay view is zero that means we on a particular index that index index color on our indicators should be different from the selected indices okay let's save first okay so let's continue here if we save like this our indicators won't show why because we didn't include height over here so we're going to add a height property let's give it a height of 10 as well okay so we do have our our Dots here okay so everything else Remains the Same but we need to give this a little bit of padding so that we can push it inside a little bit all so let's go ahead give it a padding and here our padding it a't supposed to be do all it's supposed to be dot only okay so we're going to go with only and we need to manipulate the left side so here we're going to choose the the left side and we save so if we save we push our our widget a little bit right to the left okay 12 that will do okay so those are going to be our indicators so what we need to do right now we need to go ahead and create a controller that is going to keep the changes according to to index change all right and then we're going to use that index to show a different color over here okay so let's go ahead and create a new controller and we're going to call it foot controller okay so we just need to create a new controller and we're going to call it food controller okay the spelling is wrong so supposed to be food control over there and it has to be a DOT file okay so after that we need to create the class inside so we're going to have our class our class is supposed to be fed controller and it's supposed to extend gex controller not controller here it's supposed to be gex getex controller like that yeah okay so we need to import get inside of our controller to be able to access gex and then right inside of our controller we need to create a an RX int okay supposed to be RX int and we have to call it current page okay let's give it the name current page is equals to 0o dot OBS okay so let's go ahead and close it so down at the bottom we're going to require a seter and we also going to not freely this is enough this is enough so we can have this change page okay and just observe the changes we can put it like this okay so let's go ahead and have a print statement over here so we want to print current current page do volume okay so this is just a function that takes in an INT okay and change the value of this current page to the provided value over here okay which is the index in this case Okay so whenever we're calling this function we're going to require one argument which is an which is of type type int which is of type int and the same int that we push through our change page function is the one that we're going to store in here okay so that's all that we need to do for this particular part and let's go back to our foot page so right at the top of our foot page we need to just have a final controller let's just call it controller is equals to get that putut food controller like that let's go ahead and close it over here after closing it we grab the name this name over here we need to come to our page view okay so our page view has a a page controller and a property with the name on page changed I guess if I'm not mistaken yes so we need the the controller we need to add the controller over here okay so that's going to be the first and we're going to say page controller uh supposed to be page controller so we need to create this page controller right on top but before we create it let's go ahead and have on page changed on page changed we're going to take in the index right and then we're going to call our function from our controller right here it's supposed to be whatever value that we are going to to be taking from here okay so we need to push I over here so let's go ahead and create our controll up right on top okay okay so we're going to have a final supposed to be final over here page controller Dam keep on making some some typers okay page controller let's change it make it private page controller is equals to page controller okay so that means we need to change whatever controller that we have over here to a private controller okay like that so let's just go ahead qu restart our application and then we we click on a fot item so now we are on index one we are on index zero so everything is working as PL so now we need to get the current Index right for the selected index current index or selected index the color has to be different from unselected index okay so let's go back a little Pi up a little okay so for instance index one index zero so let's say over here we do have our colors right so we need to access our controller after accessing our controller we need to get the the current current page index okay if the current page index is equals to is equals to index then we're going to display a color else we're going to display another color okay so let me just format the code a little bit so that it can be visible over let's push this down and here this is our condition so we need to have our colors right at the bottom so we can press enter over here so if the index is equals to if the current page index is equals to index we're going to display this color else we're going to display okay Gray light okay like that okay so let's save that so this is what we need exactly okay so it's on this is our selected index that means we on index one index zero if we go to index one then this should change to to Orange and now the reason why we are not getting the change because we didn't wrap this particular this particular widget inside of an OBX so we cannot read the changes from our controller okay so what we're going to do next we're going to just come here to this particular row okay and we're just going to cut the row and we're going to have an OBX okay and we need to paste our code after pasting our code then we're going to save it again so now we on index one and the color is orange if you go to index zero the color here is now orange so that's exactly what we need so we are done with that part next thing that we can do let's get rid of the print statement okay the print statement is inside of our inside of our controller so we need to visit our controller get rid of the the print statement uh okay let me Zoom the code a little bit oh that's way too much that's way too much you won't be able to see anything okay let me leave it like this but our print statement is in here we need to get rid of it save so we're no longer printing anything so we're done with that part next we need to have our buttons right here on top or back button right here on top and we're also going to require a button to be able to navigate get to the particular restaurants particular restaurant that's saving the food okay so it's either we can put it here or we can put it right on top but I'm going to put a button right here with the name open open restaurant okay so let's go ahead and close the controller for now and let's go ahead close this positioned widget uh before we close we need to take note whether we put a comma right at the end we didn't so we need a comma over here and we need a comma we need a comma let's format the code after formatting the code we can be able to close it after closing make a little bit of space and we are going to have another positioned widget okay so our position Reg is going to require the position so for this one we have to give it a top and the top we're going to give it a 40 and we need to put it to to the left we need to give it a 12 let's see uh let's give it a child and then we manipulate it a little bit later so in here we're going to just require a big button okay so for me I fancy gesture detector okay so you see in most cases I do use a gesture detector okay so we're going to use on tap on tap we need to navigate back okay so here it's supposed to be get back okay that's about it to get back and we need the widget now so for the widget we're going to have a child and our child is going to be let's give it a container first and after giving the container let's put it like this we're going to make changes to it for now I just want to see what it looks like in the position of the widget so don't worry K dark supposed to be K dark over here okay after saving that's what we get but that's not what we want okay so here we do have a container and the container got a color we have to get rid of everything okay we need to get rid of this container we only need an icon over here okay but our icon shouldn't be like this so we need to change the font that we're using for for the icon so we're going to be using uh flatter Vector icons we already have Vector icons inside of our Pub specmo as well as the other package that we used which is the c network image it's also in know PS I forgot to mention it so that's why I'm mentioning it now so hopefully I didn't cause any incon opinions okay so so here this is the font icon that we need but the icon that we need we need Chevron the back Circle outline no we don't need to outline it it has to be only a circle let's save okay so it has to be like that but the color now has to be a little bit different so let's go with K primary just to maintain a little bit of uniformity in our this icon okay so if you press we go back right if you press we come here go back so colors you can adjust according to the colors that you pick for your application but with the colors that I have here I'm going to go with that and this is all for this button this is all the code that we need to to write for this part particular button okay so let's add W over here okay that would do we're going to close that one so let's make sure that we close it right at the bottom as well after closing let's format the code save and then we can create another positioned widget right at the bottom okay okay so for this one we have to create a button okay so our button here it has to be wbed around a container okay not a container as such we already have a custom button we just need to adjust our our custom button okay so let's see whether we do have a custom button or not uh let's check did we use a button anyway probably not custom container custom M we didn't create a custom button so that means we need to create a custom button before we proceed so let's just give it a name over here uh custom button okay so this is a widget that we also need to take care of right inside of our common widgets so we need to create a new file and we have to give it a name a custom button like that and it has to be a DOT file okay so don't forget to add dot after that we need to give it a name not give it a name but we need to create the widget itself or widget it has to be a stateless widget uh or stateless WID it has to be custom button the same name as the name that we just gave it in our page okay Double T and then n so here let's go ahead and import material after importing material we need to work inside of this container so we do really need a container but we need to wrap it with a not a builder But A G A detector okay so here we need adjust a detector okay so for adjust a detector we're going to require on tap for on tap we have to put it as on Tab over here okay with small letter O so that means we need to receive this part particular function from where we are using this button okay so we need to create a a final variable right on top we need to declare a variable so we're going to have a final void function on T okay and we need to import it into our formal parameters that's the first next we need width okay width and height so width so for width we're going to have a bian let's just call it bian width if we don't have bian width then our width is supposed to be width okay so here if we don't provide this particular width our widget is going to take the width from our from our constants same as height we have to use the same criteria so we have to have BTN height if we don't provide the button height then we are going to give it a height of 28 do H over here right at the bottom we do require decoration so for decoration we're going to use box decoration so for box decoration we need need to have the color right so for the color we also need to have two colors okay so our first color not our first color but if we don't provide a color like color supposed to be color over here if it don't provide a color then we're going to go ahead and use K primary so we need to give it a b radius of 12 over here after that our container needs a child okay so let's take care of everything on top before we go on to the child so we are going to require a bottom width okay so for our bottom width is going to be of type it's going to be double all right okay so this is not required as well as our height and as well as our our color so we need to have final color and it can be nullable in the name we can call it BTN color over here so we have to copy this name and paste it here and we can copy the button height and we paste it here okay and we need to add these ones to our form more parameters after adding to our four more parameters let's just go ahead form out our code so we can hook this button to this particular page but we also need to take note if we import it like this it will have a width that covers the whole par the whole screen Okay so let's go ahead and minimize the width okay so we're going to have width and we're going to give it a width of oh let's give it a width of 90 for starters it's not width per se but it's B and width okay so it's going to be that small so for the position we need to give it a position so that we can position it right at the bottom so we are going to say bottom at the bottom we have to give it a 10 so it will come right at the bottom so we need to push it to to the right not to is it right but we need to give it a 12 okay like that okay so our button will be over there so we need to also manipulate the the radius of our pattern somehow cuz this radius is way too much we don't want our design to be to be an ugly design so let's have the chance to alter our radius so here we also going to add a final it's not supposed to be final radius but it's supposed to be a dou over here double okay so here supposed to be a double and let's addit two or for more parameters after adding these two or four more parameters let's give this a radius of nine 9 do 9 do okay so now we can style whatever is going to come inside of the the button so we need to put everything that's going to come inside inside of a of a text not text but we need text that we're going to place in the center of the bottom okay so we can use a reusable text widget so for the text this text since the since it's a reusable button we have to provide this text right so we are going to provide the text from from the widget that we're going to use that particular button in okay so final string text so text is going to be a required variable and we need to provide the style of the text so for the style of the text we're going to be using using App style uh let's close this a little bit for our size we're going to give it a size of 12 for the color we're going to go with K light white and for the font weight we're going to go with w500 over here okay so here we do have an error CU we didn't add this two or for more parameters and it's required over here so that means we have to put it here we have to include it each and every time that we are using this custom button so if we come to our custom button we're going to have text okay then we can say in this instance open it's supposed to be a string okay so we say open restaurant like that okay so we need to add a comma here to get rid of the the error okay we need to save this one as well okay so that's our text all right and our text is not in the center because we didn't place this reusable text widget inside of a center widget so after we repeat in a center widget and save it's going to be at the center so now what we need to do is to adjust the width of the of the battern so we're going to go with 120 okay like that so that's going to be our button okay then on top on tap instead of no not positioned widget right inside of our custom button we can have the on tap function so if we tape here we're supposed to be redirected to the to the resturant page okay but we don't have the pages yet so what we can do we can just go ahead and create a folder inside of our views and we're going to call it restaurant like that and it has to be no it's not a file but it's a folder so let's rename it over here add a the spelling is wrong so you can correct that it's supposed to be Au okay let me just do it Resturant and let's create a new file and we're going to call it the restaurant page like that and it has to be a DOT file over here after creating it we need a instead for widget and let's give it a name restaurant page like that and let's go ahead and make the P AAP after making the P CAP we need to import material after importing material probably we can just have some dummy data over here so we can have a scaffold instead of a scaffold we can just have a container and right on top we can just add a dummy a bar like that okay so let's close this page we don't require it anymore we'll get to it later we just need to set navigation here get dot two okay and here we are going to get to the page that we just created uh it's supposed to be like that and we're getting to restaurant page okay so let's go ahead add some some braces and add con over here okay so now if we click we can be able to navigate to this page let's navigate back okay so for this page not the page per say but this particular part we are done now we need to go to move and work right underneath the this St widget yeah okay which St widget are we in it's this St widget that we have over here and I doubt that we need this TCH by the way okay I doubt that we need it so let's remove it for now okay so we have a clip W is our first child now at the bottom we're going to require a a column uh this column let's see so for this column we're going to put in our our titles three we need a column since we're in a list view we don't need a column for this particular part we don't need a column okay so let's get rid of the column and we can jump right into whatever we want to do but whatever we are going to do we are going to put it inside of a column eventually cuz we need to to manipulate the the pairing before we proceed what we need when we open this restaurant open restaurant right we should be able to push the data related to that particular restaurant from this page but we don't have the data so we have to get the data first when we load this page right so what we're going to do we're going to create a hook to get Resturant data okay we get Resturant by ID because whenever we're getting the food we're also getting the ID of a particular Resturant that apply the food okay so what we need to do over here we need to go ahead and open our hooks right we do have our hooks over here so we're going to create a new hook and we're going to call it fetch restaurant right and it has to be a that file with one R not three Rs Okay so here we do have fetch restaurants but we need fetch restaurant okay uh does this one have code it does have code okay so we're going to copy all the data that we have in this particular particular hook fetch restaurant because we need to fetch one particular restaurant with its ID okay so we are going to paste the code in here okay we're going to make a little bit of adjustments in here before we return the data okay so we need to go ahead and create another model OKAY a hook model okay so here we have food hook Foods hook hook results but what we need to create we need to create restaurant okay restaurant hook so this class is going to be the rain type of our fetch restaurant hook okay so we're just going to let's go ahead and copy one of these hooks so we're going to copy from Hook results and we're going to paste the code in here after we paste the code we need to change the name from F hook to whatever name we want that particular hook to be okay so we're going to say give it a name fetch restaurant okay like that so we need to change this Dynamic data to to the resturant data okay so for our restaurant let's check restaurant's model that's going to be the data that we want to return here okay and so so let's make it knowable so going back to our fetch restaurant hook we need to change the return 10 type right that's going to be the first and here we need to change this one as well so let's go ahead and select them all and here we're going to have fetch restaurant is our Hook is our hook return value okay like that and we need to import this particular result so the reason why we do have this error is because our return return type of this particular use state is a list of rest model so we need to get rid of the list then we are just going to have use state of type resonance model right and it has to be nullable so if we change here we're going to have another error here CU we're converting this data using the list Resturant okay the function that we we have here is for the list restance model okay so we are going to use the same the same the same model if I'm not mistaken so we're going to use restant model Dot from Json okay and this one it has to be a string so we have to find a way to convert this as as well to to convert this to to another model or what we can do okay let's find a way here first okay let's cut this right on top what we need to do we need to create another variable and we're going to call it uh let's call it Resturant okay is equals to uh is it we need to convert the data is it Json encode or Json decode let's see this one takes a string so it's supposed to be decode then we put in our data after putting our data we're converting our data to we're converting it to a dynamic data type right so let's put this restaurant in here no not not not the response. body but the resturant data the dynamic data that we have okay so now that our error is gone we don't have an eror inside of this model so here let's go ahead and just get of The Unwanted code and so that's all about it in here but we have to be sure like the data that we are getting is from the the correct end point as well as to change this name okay from use fetch restaurant to fetch restaurant okay that's all that we need to do over there and then here we do have have an exception we do have an error so let's not throw exceptions we are going to just debug print because if we have an error our error is going to to be shown right on top uh that's wrong supposed to be print over here e do string and let's close it over here okay so here we do have use fetch okay when we're using use fetch probably I didn't say it before but I have to say it now if we're using use fetch that means this is this is run every time we open this page right every time that we open this page we're going to run this use fetch function so this use fetch function is going to the hook use fetch hook is going to run the fetch data function right and the fetch data function is the one which is responsible for setting the data to our state variables right and that's the same data that we're going to return whenever this loading is set to false over here okay so that's all that we need but we need to take care of our our end point so so if we go to our Postman in our Postman we need to go to restaurant so we have restaurant by owner get restaurant so to get a restaurant we need a particular ID okay and here let's change the the base URL first okay that's UT wrong so let's go back probably we need to go back to our back end and check whether we we have that particular that particular Endo or function function and Endo related to this particular use case that we want to to use okay so what we're going to do first okay we're going to just go ahead and get our nearby Resturant and then we we go ahead get an idea and we get any data related to a particular particular restaurant okay so we have this Burger King so we copy the ID that's the same ID that we're going to use here to get the data related to that particular restaurant so let's send okay so this is the data related to to Burger King Okay so this is going to be our service endpoint so we copy the service endpoint we go back to our project in our project we need to change the service end point and we need to receive a code from this page okay so if we save we don't have an error because we haven't hooked it yet let's close this let's close hook results custom button in custom button okay we have to get rid of this let's close that as well for tile let's close it list let's close it fetch restaurant we leave this open but we need this page open so to use this particular hook that we just created right now we need to convert this St widget to a state for hook widget okay so we just need to add let's see what's the best way to do it to convert it to a state for hook quet we just need to change it to state for hook widget flatter hooks our eror is gone so that's all that we need to do so right now we need to have our hook right so right on top here we're going to to have our instance the instance of our hook final okay we can call this data or restant data what should we call it okay let's call it Resturant this should be hook result okay so we want to use fetch restaurant over here so for the restaurant we require the code of that particular restaurant and the code is coming from the data that we post okay this food okay so we need to access widget dot food do restaurant okay that's the ID so now we're able to get the data so let's go ahead and come back to this particular hook in this particular hook what we need to do before anything we need to just print the response if our response is 200 that means we're getting our data okay print response do status code like that okay so let's close that we save that page right now we don't have have anything over here cuz we didn't hook no we didn't save we hooked but we didn't save this page okay we also need to H reset the H restart the application cuz we can't just put a hook in the middle of development and hoping that the application would work okay so we have a 200 over here so that means a hook is working fine so we can close this eror over here now we need to access the hook results so that we can get the data related to that particular hook okay so instead of okay that is okay we can leave it like this but here when we are pushing the when we are pushing to the restaurant page okay so we should go to the restaurant page in the restaurant page we should require the data related to that particular restaurant so we should have a final right here on top right okay so we should have a final restaurant model and we're going to call it restaurant okay so that's going to be the name of our variable so we need to import that particular variable right in here after importing let's go ahead and save so since this is a required variable we need to pass the data from this particular page okay so first we need to just go ahead and have our variable name and our data is going to be hook result dot data okay let's remove cons first okay let's solve the problem because if we get the the result over here let's see whether we can fix the problem or not let's get rid of this to fix the problem let's start with our data okay it can't so this has to be now so what we can do we can just come to the restaurant page and make thisable okay so when we pushing let's push the hotel results. data okay so our error is gone so over here what we need to do in our restaurant page we just need to print the data that we're getting just to be sure that we're getting the data or not so we're going to print is it Resturant supposed to be widget Resturant over here wiget Dot restaurant dot let's just print uh is available that might be false a pick up let's close it and add and now Checker somewhere okay so here we don't see anything as yet uh what we can do let's go ahead get rid of The Unwanted un wanted code unused code okay so let's open now okay so true so we need to print something else codes these are coordinates so that's an instance that's now we need to access okay so this is the address of that particular particular restaurant okay so we're getting our data in our restaurant page so we can do the same for a restaurant page as well because what we need to do we need to make these Pages as reable as possible we don't want to create another side page so everything has to be interconnected interconnected so since we have this page right so when a person clicks on this particular item they have to be taken to the same page the same thing that we did for our for our categories like we minimized the the number of lines of code that we brought but we still maintain the same functionality everything is functioning as it should be okay so what we need to do we need to go ahead and visit the nearby restaurants list okay so if we have a over we have on tap right so on tap function we need to navigate to the restaurant page okay so to navigate we're going to use get to okay and we need to mention the name of the page that we're navigating to so in this instance we're going to navigate to a restaurant page okay so our data is the resturant data that we have here okay so let's save so one thing that I'm not sure is that we hooked it to to the right to the right page because we have this one and we have this one is wrong okay okay so this is correct we're going to our page and our data is being pushed with the is being pushed with the page this is the this is the address of this particular Resturant that we clicked on okay so we are going to hook the other restaurant page the other widget to the restaurant page which is this one okay so this one is a restaurant tile okay so on our in our tile we do have this restaurant and we do have this gesture detector so inside of this gesture detector we need to navigate right get to and we're getting to a particular page so here it's supposed to be get not get okay so here we need an arrow function and we need the page so here cost restaurant page okay and we do have an error let's get rid of the con over here not const const doesn't have any problem supposed to be widget dot is it widget dot con and we remove this widget dot okay so we hook this successfully so if we click on any restaurant then we're getting the data as well so so far so good so we're done hooking our restaurant page next thing that we can do do is to continue working on our on our food page right course we've got the data related to the restaurants now we can go ahead and work on whatever comes after this particular widget that we created continue here let's go ahead and close this tile close this list close fetch fetch restaurant the restaurant hook close the restaurant page we need to focus on this particular page okay since we're done with this button we have to come right underneath okay we need to come outside of this particular size box okay so positioned not the size box per se the clip W okay so we need to add a coma over here after adding a coma let's close this bar for a minute give ourselves a little bit of space and let's go ahead and close the the clip right now okay okay can we close it though okay we can okay so after closing what we need to do we need to have a a padding widget okay so our padding text padding so for this particular widget what we're going to do we're going to have agenes do symmetric okay and we need to manipulate the horizontal side so for the horizontal side let's give it a 12 and let's make it let's apply our screen new TOs okay after applying our screen new TOs let's add a coma so our ping takes a child so we need a child in here after we have a child we need to have a column okay instead of a column what we can do let's have another list F okay another list view in here okay so this list view is the one that we have to make scrollable and the one on top it doesn't have to be scrollable okay so the first property that we need to include is physics so for our physics we can leave physics since by default if we leave physics is going to be scrollable so that's what we're going to do for padding we're going to just go ahead and have padding do0 okay so if we save this probably we are going to run into an air because we have unbounded height so that's going to be a problem that's going to be a problem because this Le view let's see what we can do okay um let's change this to a single child scroll View and see how it goes and we're going to have a child in here and for the child we have to have a column so even if it's this way probably we need to wrap it in a size box and provide size to it okay so let's just save and then H set our application over here so we are going to run into the same air if we don't no the chances are slim okay oh that works this works so we should go with this approach single single single CH scroll View and then we have a column so the first widget not the first widget we're going to have children and our first child is going to be a text widget okay so we're going to have the title on top okay but first let's have a size box we need to create a little bit of space right so let's have height over here and we need to give it a height of 10 and down at the bottom we need to have a reusable text widget so we need to give it a text and we need to give it a style so first we're going to apply our style so for our style is going to come from EP style and we need to get rid of this cons from over here let's leave it like that supposed to be F style over here and let's go ahead and give it a size so for the size we're going to go with 18 for the color we're going to go with K dark after that we need font weight so for the font weight we're going to go with w600 so FW Dot 600 so invalid con this is why we should remove con from over here okay and add con we shouldn't even add con so here let's go with screen new TOs okay so we have this text right here okay so we need to add cross axis alignment over here so that we can have our text to to the start of our of our column all right like that so this is the pading that we added to our the the Ping that we added to our single single child scroll view right so now we need the text okay so for the text we're going to access widget and we're going to access the food for the food from the food we require the title over here okay so now we have our title so we should have this particular title and the price on the other end so what we're going to do we're going to just going to copy this widget and paste it down let's add a comea over here and let's change the color to K primary on the one that we have down below okay after changing the color what we need to do let's format the code so we have them one on the top and one at the bottom okay so if we save is going to be like this so what we can do we can just select both of them and then we can wrap them in here in a row and then we save after we save they are going to be in a row so what we need to do we need to include main exis alignment so we are going to use space between okay so for this particular reable text widget that we have over here we want to have the price okay so our price is a double so we have to convert it to string as fixed because we need to have two decimal places right like that okay and we need to concatenate this particular string okay and we need to put a dollar sign right at the beginning okay like that so that's going to be our price but this is not the price that we're going to be displaying because our price should include the price of the the additives as well so once we handle additives here if a person clicks on an additive then we're going to add the price of a particular additive to to our initial price Okay so for this particular row let's leave it like this for now down at the bottom we're going to have a size box and we have to give our size box height and we have to give it a height of 15 so height supposed to be do H let's format the code and down at the bottom we should have description okay so for description we are supposed to use a text widget since our usable text SS only accommodates the one line okay max line is one okay so here we need to have at least it to cover everything that's related to to the description okay okay so that's going to be our description the size can be a little bit smaller so you can make it larger or a little bit smaller that's according to you okay so I'm going to put it at 11 so that it can be visible okay and let's change this to F5 like that okay so we need to add another prop right inside so we're going to have text align okay so we're going to use text align to just justify so if we have a food item with more lines our text is going to be justified anyway okay so let's go to the pizzer it's only two lines let's look for an item with only two lines as well what we can do Pastor two lines two lines lines okay it seems like most of my forood items they got two lines but if yours got more then the way that we we put our text it will be able to accommodate the number of lines that you put even if you put like five six lines of description that would be okay so let's get back to our page we need to handle what's coming next or we can set a limit here so max lines let's set max line Max lines of eight okay just like that those a lot of lines just to describe food right at the bottom we're going to go ahead and have another size box and let's go ahead and give it a height let's give it a height of five as well is supposed to be five do like that and at the bottom now we need a list this list is going to be a list of food tags okay a food tags so what we can do we can have a size box oh not size box. expanded so it's just a size box over here so it's supposed to be size box over here in our size box we need to give it a height and let's give it a height of 15 after that we need to give it a child so for a child we're going to use a list VI Builder it's either we can use a list Builder or we can use list VI and then we can generate okay so list VI list view so all this view texes in children so for our children now we need to put a list to generate right so we are getting the length of the list that we want to display so the length of the list that we want to display here is supposed to be widget dot food dot fot tags okay like that uh dot length over here and we need to retain something okay so we're going to retain a brace so in our brace we're going to rain a container let's rain a container over here after retaining a container uh let's close it first so before our return we need to get an instance of every foot that we have so we need to create a final value and we're going to call it tag so tag is equals to widget. feed and here it's supposed to be index okay so we're going to take each and every item you know index put it in tag and this tag is the tag that we're going to use to display whatever text that we want to display in our widget okay so let's go to our container so our container we have to give it a margin of five to the right okay margin me agencies. only five and we're going to give it a w since it's it's a what you call it it's a veral pading is it very cool okay so let's deal with our container for container we need decoration we need box decoration H we also need a color so for the color of the tags we're going to use K primary and after the color we're going to require border radius is for Border radius we're going to have border radius. and here we need to have radius do circular right so for this particular radius we're going to give it a radius of 15 okay 15 do R so that we can include our screen new tools so we don't have anything as yet over here so what we need to do we need to give this particular container a child so let's give it a child in our child we're going to have let's have a center first and let's give our Center a child so our child is going to be a padding padding then we are going to take a reable text fidget and the text that we're going to display inside of our text inside of our reusable text is going to be a tag the tag that we have right here on top right so let's just auto complete this code so pading our ping here is not going to be a but it's going to be four okay so if it is horizontal we have to use uh let's let's just go with h but we need to remove this it should be W over here since it's horizontal and let's save yeah okay so we cannot see anything so let's go back to our container let's give it a height let's give it a height of 15 and let's give it a width let's just give it a width of 50 for now that's weird probably maybe the foood that we're on doesn't have the tags it can be fot tags okay so let's just display let's print the food tags over here to see whether we we getting the tags probably we should fed foot Tex okay so these is supposed to be tag these are tags right so we have tags so they should be able to display right here underneath let's see what's going on we have this row we have this text and we have this size box Center okay so we can use a row here so if we use a list view then that means we should have scroll Direction over here so that our list can can display okay so this was our this is the problem this was our problem so we should have scroll direction right so now that we got this out of the way let's try to get rid of these two okay so that will do but still we need to push this a little bit up to the top okay not up to the top but only right radius 15 let's make this a little bit larger nah that don't come out well let's give it a six a six will do but okay container only right that's five botom let's give it need to okay we shouldn't even have bottom over here we're just trying to position this thing to to the center okay so let's remove this Center doesn't have an effect on anything horizontal vertical sucessful okay that will close it so that's not what we need 15 let's go with 18 okay 18 is the right size okay because if it it's 15 it's too small we won't have space at the at the bottom okay so let's go with that so this is going to be our tags okay okay fruits smoothie blah blah blah okay so we're done with that part right at the bottom now we need to add another another size box so let's go ahead close this but before we close let's check we don't have a comma over here so we can just add a comma and then we give a size box and this size box is supposed to be 15 okay and we're going to have another half so for the heading we're going to use a usable text widget and the size of the text that we're going to put is going to be 18 so we can copy this one inside we can copy the reusable text widget that we put in this particular Row the one that's designated for this particular for the title okay so let's close this close the text as well close that that close the list and right below the size box we're going to paste the title again so we have that title but we don't need the title what we need here is a heading okay so this heading is going to be for the additives and toppings okay so it's supposed to be tives and toppings like that so that's going to be our our heading over here so after this heading we're going to require another list view okay so this list view is going to to be a Le little bit different in a way not different but it's going to be a column a column or a list view with a vertical AIS okay so here we can add add a column after the column what we can do we can have children after children now we need to have our list okay so this supposed to be list view dot not list view list. generate so we need to get the length of the list that we want to display which is widget. food do food tags not food tags but tives okay so that's going to be the list we need to manipulate the list a little bit further so that we can we can be able to manipulate it when we click on it and when we click on it and we want to trigger the the price change over here let again so that's something something that we're going to take care of in a little bit but for now let's just create the list so that we can have our UI okay so down at the bottom we're going to go ahead and have a final aditive which is going to be equal to F take dot widget do food Dot tives and then we are going to get the index and we need our return value okay so our return return it has to be a checkbox checkbox list tile probably that's the first time that I've used that one in this particular particular situation okay so first we need the value and we need need unchanged okay so unchanged let's just go ahead and have our bulling value here okay let's just call it volum okay it's supposed to be so the value here the value that we're going to have is going to be foot tag not foot tag I'm still on foot tag erative dot it's not even here okay so that's why we need a new model so we're going to have to put it to True let's just put it to True over here and let's let's go ahead and close in we still going to design it a little bit so that's what we need here okay we need this check box and our titles are going to be on this other end so first we're going to have our title um title is going to be a title is of type widget so if we have over it's going to be of type widget so here we can put any widget that we want so we want to create a widget with a name Rotex where we are going to just have it's either we can create it or okay let's just go ahead and create it or we can create it afterwards so what we're going to going to have here we're going to have a RW all right a RW Tex in children so for the children we're going to have two text widgets okay so we have the one for for the title here supposed to be title and the other one is going to be a price but we do have an error here because this is a string Okay so let's leave it as a string over here so that's what it that's what it is going to look like so what we can do here let's try to manipulate main AIS alignment space between between will do okay space between will do so we're going to leave it like that but we need to adjust our our content padding okay so let's go back to our our checkbook list tile in our list tile we need to go ahead and have content padding so for the content padding we're going to use agenes zero so we don't have that extra padding anymore so let's go ahead and add another property we're going to have visual density so for visual density we have to go with visual visual density. compact okay to make it a little bit smaller because we don't want it to occupy the whole page and let's add dense we're going to set dense to true oh we need more properties let's go with active active color so for active color we're going to go with K primary so each and everything that we select the color is going to be K primary then inactive color so if it is inactive in active color we're going to go with k k light green uh is that even is that even possible let's have over and see the properties that we have selected content title color that's going to be a little bit tricky okay so if it is not active then it will adapt another color so let's just change this to this value to false and see what will happen okay it will be like that so that's good we don't need any inactive color so we're done with that part what we need to take care of is the text that we're displaying inside that's going to be the size the size of the text and the density like whether it's going to be this big or a little bit smaller so we're going to go with a smaller size probably let's reduce it down to 11 okay that's going to be 11 for that part and 11 for this one as well so it's going to be like that so what I need to do over here before the column I need to add another size box so the size box should come in between the the reable text and the column okay so here I'm going to give it a 10 so that we can have a little bit of space to have even space over here from on the top and at the bottom okay so for our prices we have to make them a little bit bold so instead of going with W6 w400 let's change it to 600 and save okay so those are going to be our price if we take this price then the price should increase over here from if we put two the price will go to eight okay that will take take care of it in a little bit okay so let's go with another prop that we need to add over here so TR St we have to set it to false so it's either going to be true or false right there's no in between so we done with that part we're going to revisit it when we are going to change the data that we're feeding here okay that's a little bit of a tedious process but we have to do it aside and then come back we have to finish everything and do it so that we can have like everything in place cuz our price is going to be affected with three things that's going to be the price of the atives that's one and the count of the things that you want to order that's going to be two so we're going to have initial price tives price and then the count of items that you want to order let's say you want to order two items with the same tives then we're going to just multiply the two items we're going to multiply the item that you added by two so our price has to change it has to be dynamic okay it doesn't have to be static so we'll come to that part in a little bit and just get done with it so for this color we can change it a little bit cuz it doesn't have to be primary but we can go with Cas secondary okay so active color let's go with Cas secondary over here and save okay so we get that out of the way our list our column so right below our column we're going to have another size box so let's give it a 20 not a 15 to begin with let's give it a 20 so right underneath we're going to have what we call like we're going to have a counter okay account that's for for incrementing and decrementing the quantity of things that you want to order to your card okay so for this one we're going to have a row similar to this one right so we can copy this row that we created for uh for this part okay so we're going to have text and we're going to have a counter on the other side so we can paste this over here and we can get rid of this title so for the title we're going to have quantity like that so our quantity has to be to be like that and for this reusable text widget we have to remove it okay so for this one let's just go with we need another row widget in here okay so for this row widget we're going to have children so that's going to be we need an a gesture detector to increment and decrement okay I'm tempted but anyways let's just write the code we need gesture detector over here gesture detector we need to have on T so let's put it as an empty function for now so Orest detector takes in a child as for the child the child is going to be an icon let's go with an icon so for our icon we're going to go with end design okay and design dot we need a plus let's go with a plus Circle okay that would do so we're going to have another one for decrementing oh we're going to have another one for for decrementing over here so instead of having a plus here we're going to have minus like that right and right in the middle we're going to have the count okay so for the count we're going to just put a reusable text widget and let's just put a number over here and let's give it an app style color color should be K dark but for the size let's go with 14 k dark FW let's go with 600 for starters and let's add a Comm over here let save okay so that's going to be to be our text but let's add a little bit of padding so that we can create space between these the increment and the decrement so here we're going to have symmetrical symmetric and we need to manipulate the horizontal side okay so here is supposed to be horizontal okay like that it makes more much more sense okay so let's go ahead there's no need to change color so we can add const everywhere the file so that we'll get rid of the errors so we need to create a we do have a Foods controller already so what we need to do we need to go ahead and handle increment and decrement right so this particular text is going to come from from our controller so initially the text is going to be it to be zero like that go ahead and create our functions increment and decrement function so what we need to do over here is to create a new controller not a new controller per say but we can put whatever we want to put everything that's related to this counter inside of our or food controller so we need to visit our lib folder visit our controllers open food controller okay so we already have one RX int over here so we need to create another variable B so we're going to have an RX int as well so this one is going to be count okay we're going to call it count initially it's going to be one okay so when I said it's going to be zero the initial value is going to be zero I was wrong is going to be one cuz we are not going to have a zero items of something we can only have one going forward okay so the first thing that we need we need a function an increment increment function so we're going to have void increment so just to increment we're going to just get our count it's supposed to be count over here count do value Plus+ okay like that so down at the bottom we're going to have void decrement so to decrement we have to check if value is greater than one then we're going to subtract from from count okay like that so that's how we're going to to handle our count so we have these two functions that we need to hook to our or just detectors okay so right in here we need to access our controller so in our controller we need to access increment okay the increment function that's for for the first one and for the second gesture detector we're just going to to decrement Let's close this for a second so here it's supposed to be decrement like that okay so for this particular reusable text we need to just go ahead and let's just cut everything that we do have in here and we need an OBX okay so for OBX we need to re return the text widget after returning the text widget we are going to go ahead and access the RX int that we have inside of our Foods controller which is this particular particular value count right okay so here we just going to and Braes uh supposed to be dollar sign over there okay so it's supposed to be dollar sign control account. value okay so let's save that so our value is one that's our initial value 2 3 4 five if we decrement it's working fine and if you're decrementing our values will never get down below one okay so now that we have this value we have the value what we're going to do we're going to take this value okay and we need to come to not our quantity but we need to come to the price the price that we have over here okay what we can do let's see this is description so that price is over here so before we convert this to string so it's a double so we need to multiply this double by this in this integer RX in right so we need to wrap this inside of an object as well okay so that we can read the changes okay so nothing is going to to change so what we can do over here we can convert let's see whether we can convert the value to string no that's not possible okay so let's Okay so this is okay this is okay but the problem comes in when this value is no longer two decimal places so this is why we need to convert this and we give it a fixed value okay so that's something that we might need to take care of in our controller a little bit later CU we are going to have this value and we're going to have additives as well okay but this is the kind of approach that we're going to take even for the for the editors but we are done with our counter so that part we are done but we need to make this quantity a little bit bigger so let's just go ahead and close this item that we do have over here and change this to 18 okay so it's going to be a little bit bigger and the font weight we're going to go with the same that we have over here so let's go with bold for starters and see um kind of No it should be 600 okay W6 600 not bold cuz bold is a little bit it's a little bit too much okay so that's going to be our quantity so let's just close that okay we do have this Rong and we need to close it since we're done working on it so down at the bottom we we going to have um what you call it preference so if you have any message that you need to give to to the person that you the person that is preparing your order so you have to write the message inside of the text that we're going to the text box that we're going to put below okay we're still in the same room okay so let's close that okay we have a row inside of a row that's why we do have so we have a row for this one and we have a row that's encapsulating quantity and the other row so we need to get out of that row encapsulating both right we add a little bit of size a little bit of height and then we're going to paste another another title so for title here is going to be a little bit different it's going to be preference okay what we can do here we can say order preference let's just call it preferences okay so let's say you're ordering a steak whether you want it rare medium or fully cooked okay so preferences then we're going to have a text box box or button is going to come right at the bottom of this particular item okay so next we're going to create the the text and then we're going to place the button over here the buttons over here the buttons for ordering and the one for adding to card our preference text okay that's supposed to be preference not preference okay the preference okay these are preferences and instead of both let's go with w600 over here okay so that's a change that we need to make and over here let's add another comr and then format our code after formatting our code right below we need a size box uh that's supposed to be a size box let's give it a height of 15 15 after our height we need to go ahead and add a size box again so in this size box that's where we are going to put our we're going to put our custom text Feud but we named it custom text widget if I still remember correctly so let's give it a 65 over here so 65. Edge and let's give our size box a child after giving the child let's go ahead and have custom custom text widget okay so our custom text widget we have to give it a controller so we need to create the controller we haven't create the controller here okay hint let's go ahead and have in text we're going to add a not with your order or with your preferences okay let's put it like that so max lines we're going to just make them three but in here in our custom text widget we don't have Max lines so what we need to do we need to revisit our custom text widget and then here we're going to have Max lines so max lines is is going to be equal to Max lines okay so that's the name that we're going to give the the field and this field it's supposed to be a double so we need to come right here on top final double and this double has to be nullable and it has to be Max Max lines okay so after that let's go ahead close it and then we edit all for more parameters like that so we do have an error over here okay so if it is not provided then let's see it's an INT not a double okay so it's a notable int over here if it's not provided then Max Lance is equals to one let's save this and come to this particular part we have three max lines so that's correct so let's go ahead and take care of this controller okay so our controller should come right over here okay so we're going to have final text editing controller with the capital letter t uh let's just call it not controller per say but we can just give it a name the same as its purpose so it's supposed to be preferences over here so we're going to copy this particular private text field text editing controller and then we're going to paste it over here okay so we do have our controller if we save we should see something over here now okay so we can take we can write something over here so let's just go ahead and clear okay but this is a little bit too the height is a little bit too large so let's bring it down a little bit and it's a little bit inside let's see let's close this row okay we can leave it like that so right at the bottom we're going to require our buttons right you these ones are not scrollable since it's a generated list so it's okay for this part but in here we're in a single child scroll view Le VI okay so let's see if we get rid of the the physics over here probably that would work okay so our page is not scrollable okay so we don't have we don't need this single child scroll view if our page is scrollable so let's just go ahead and remove that okay so down at the bottom we're going to require the buttons so the first one is going to be not not buttons per se we're going to require one button is it one probably one okay so what we can do here we can just go ahead and have a little bit of space probably not 20 but we're going to give it a 10 okay after giving it a 10 what we need to do we need to go ahead and create a container so in our container we're going to require a child so our child is going to be a raw so our RW is going to have wow not really we don't need this we don't need whatever we have inside we just need main AIS alignment over here so main AIS alignment is going to be space between and we're going to put our children in here so for this particular container we have to to give it a height so let's give it a height of let's go with 40 41 and if we do have any changes that we need to make then we can make we can make them so we need to add a little bit of decoration to this particular container so let's go ahead and add box decoration after adding box decoration we need to give it a color so the color ain't supposed to be K light over here so we have to make the color let's go with K primary okay after going with K primary we have a button L okay so here it's going to be a little bit tricky we need to just let's give it a 30 over here okay so it's going to be like that but we need to increase the size over here from 10 let's bring it to 15 okay let's bring it to 15 like that so inside we are going to require a text and we're going to require a button to add to the cart right at the corner okay so the first thing that we're going to have is a reusable text wiet it's supposed to be a reusable text widget no supposed to be reusable over here re usable text wiget so we require text our text is going to be place order and we need to give it a style so first we need F style let's give it a size of 18 and let's give it a color so for color we're going to go with K light white and for our font weight we're going to go with w600 over here okay so let's format the code a little bring this a little bit down so that we can visualize the container that we're working in working on not in okay so let's just save so we have our place order over here so we need to add a little bit of padding okay so the padding that we're going to have here is it has to be symmetric it has to be symmetric okay so symmetric we're going to have horizontal horizontal over here okay and let's make it do W over here so we need to get rid of the con since we're utilizing screen your TOS let's save okay let's go with 12 like that okay so on the other end after this padding we're going to have a cirular avater okay so for a cirular avat let's give it a background color and we need a cart a card icon Okay so so here we're going to just have a background color our background color here it's supposed to be K secondary because it has to be orange okay the radius is something that we're going to change in a little bit if it doesn't fit in here and we need to have cart okay so here is supposed to be we don't have a cards from in design so we need to choose the the correct the correct font to use okay so here we're going to use in icons dot cart it's supposed to be a cart not cart per say let's go with fast foods okay like that okay so that's going to be to be our button but this button might be tricky because not everyone is going to know okay so let's just say k white K light white the the color let's add this to cart change it to cart so if it is like this probably like people will know like it's a cart if you put in in another icon which is not a cart then it's going to be tricky for people to know okay so the button is fitting well okay so let's just add cones over here so that we can get rid of the complaining link okay and we have to W this in a gesture detector okay so we need AET we need gure detector okay uh it's supposed to be gure detector over here okay okay on our just a detector we need on tap right let's initialize it as an empty function for now and as well as this reusable text widget so we can just wrap this padding in AJ detector as well okay like that and we're going to have on tap and we initialize it as an empty empty function okay so these are buttons to add to card and to place a order okay so in this one we're going to have some like more validations like more validations CU we need to check whether like before user places in order we need to check whether they do have a valid address we do need to check whether they do have an address okay so not an address but whether the phone number is verified or not cuz when you're delivering food the one of the most important thing is the phone number of that particular user okay so uh what we're going to do over here we're just going to go down right at the bottom we can either go down right at the bottom or okay let's just do it at the bottom that's after scaffold here okay so we're going to create the future Dynamic it's supposed to be dynamic okay like that and we have to give it a name so verification status a verification over here so we need a to show up that's a bottom okay so in here we're going to take context okay build context context okay and we need our ret so we need to go ahead and show more bottom okay to have a show model bottom shet so model bottom shet requires context in the building so our builder takes in context no build takes in build context it takes in this okay so here we're going to have build context context after context then we're going to return something over here so let's try to close it over here okay so now whatever we're going to retain is going to come down here inside of this brace okay so we're going to return okay and we're going to return a container like that so let's leave the container like that we can just give it a little bit of size that's height okay so for the height I'm going to give it a height of 500 dot h we have to remove we have to make it a public not a private so this is just the UI part of this section cuz it comes in play when we have our user okay it comes in play when we have our user okay so now that we connected it if we click here which supposed to show a a mod shet so here it's 500 but we can increase the size a little bit so that it can cover the the additives and top and toppings okay so from 500 we can make 510 like that so let's bring it down 10 is too small so let's go to 525

Channel: dbestech

Views: 4,763

Keywords: flutter grocery app ui + backend, flutter grocery app with backend, flutter multivendor app

Id: G2klGUIldgQ

Length: 426min 29sec (25589 seconds)

Published: Sun Feb 04 2024