Transcript for:
Developing a Food Delivery App

all right guys welcome back to the Channel with a new video today that's going to be a food delivery app I know it's unusual for you to uh to see me full screen at the beginning of the video but I wanted to take uh just a few minutes to uh thank you guys again uh for all the support that you gave me and I've actually have a little surprise I've been working a bit on uh um a creation of a community center and the idea was actually given by one of you Flavio if you watched the video thank you man um and school is actually a website that I didn't know about where you can create communities for free um and that's exactly what I've created for us the community is called Roman flut Squad and you will find the link uh in the description below if you want to join uh it's pretty awesome I'm going to show you exactly how it works but uh I think it's going to be an amazing place for us to be able to gather around and to help each other uh in inside our uh our development journey and our entrepreneur Journey so uh I'm going to show you and you'll see a little transition oh my God coming professional so that's the uh that's the website I was talking about school.com uh like here like you can see and this is the community so you have different tabs inside the community so you have the community tab uh the classroom calendar members leaderboard uh Tab and uh so basically here in the community it's where we can right post right so you uh H you are doing a project you need some help or you want to keep the community updated about what you're doing I'll be posting myself a lot on there so we can interact with each other pretty awesome then you have a classroom space where you see here I'll add the weather app and I will add the the the tutorials that we've done here on the YouTube channel but I'll slice them up in way shorter videos so you also have them uh here um we have a calendar tab where I've set up here it's for now 8:00 a.m on Monday um a weekly coffee uh so we can gather all all together at least the people that are available and have a little chat of um how our week is going to go and all that so that's pretty cool it's going to move around I think with the hours but you get the idea and uh yeah then you can see the members and the leaderboards because as you go through uh the classrooms the the different courses you get some more points and I'll set up I will set up everything here but yeah I welcome you to join uh the community the Roman flut Squad here on school it's completely for free so uh just create an account and hop on uh I think we can really help each other there and that can really bring a lot of value for uh for everyone so with that said again Link in the description with that said uh today we are going to create um a food delivery app so uh I have the code right here but yeah basically I found this little design on dribble again uh I think it's pretty cool I think we can base ourselves on that in order to create something that um that can make sense uh so we're going to deliver pizza today so it's cool um and uh and yeah so I basically this design is going to be like an inspiration we're not going to create like text to what's there uh but I want to make it Dynamic so we are going to use Firebase so we are going to use Firebase authentication to create an account and to log to the app we're going to use block all throughout the app in uh as the State Management uh system so connecting Firebase using block and all this uh then we are going to create some um some uh documents inside our database for the different pizzas so I have the classes ready I think most of them I I know what we're going to what we're going to add there and we are also going to add some sort of a card that we a cart that we can't see here but we'll add that definitely and I'll show you perhaps how you can do that in uh in Firebase as well uh this this little system and uh and we're not going to follow through with the payments that's something I keep for uh for later videos because it's a little bit more complex using stripe and all this but I think we're going to have a pretty good uh sized app by the end of the tutorial you using flut using Firebase clean architecture well separation between the front and the back end code um and yeah so I think without further Ado uh we shall get started right so as you saw uh at the beginning I have already created the flut project right there so the flut project is running here on the left side of the screen and it's basically a blank flatter project for now um and yeah let's get started I think so uh the first first thing that we will do is create all the files and folders that we're going to have uh that we're going to need for the app uh so first thing first in the main. dart file we are going to delete what they uh what they gave us what flau gave us and we are going to um and we're going to create some files so that's uh broken but don't worry about it so by now if you followed through the channel already you know how I work uh creating a file that's called app. Dart uh create creting another file that we're going to call app view. Dart uh and another folder here that we're going to call screens that was not a folder that I've created my bad here new folder screens right exactly like this uh and we will need another folder at the very top that we will call blocks uh and perhaps as well a component uh folder so basically what I am doing here is creating the architecture of our um of our project all right so you have here the main. D file which is the entry point so that's going to be where the app runs itself okay with the main function right there then the main do do uh file will redirect to the app file okay in this app file we'll call uh all of our like repository that we want throughout the entire process of the app right so the authentication block for now because we don't have any other really stuff that were that that's going to be happening in this particular app but you can imagine having for example like a message notification block that you could also add inside this appar file um this app file is going to redirect to the app view file and this app view file is going to contain the material app right there so with the colors and the block Builder the authentication block builder in order to redirect the user either to the authentication screen or to the uh to to the app itself so that's for uh those three files the block folder right here is for the um is for the top level blocks so for now for us it's going to be for example the authentication Block it's going to be here uh because like it's top level so we don't need it down the tree so we can just put it up there and we have then the components it's like for common widget right so if we have like I don't know a button that that's coming over and over again inside our App instead of having to code it uh 10 times the same throughout the app we just create a button and we put it here inside the component as a file and we can call this custom widget in our different files in order to have less code repetition throughout the app let's see if we are going to use that in this video I I'll try to use it once at least um under the screens folder it's where well your actual app is right so uh it's always like for example I can create folder now I know that we are going to have a authentication system so I'm going to create a folder that's called oath for authentication I'm going to create another folder that I will call home uh and uh I think if I get the design again uh yeah I think that's pretty much it perhaps we'll have another one but we can just rock with that for now and under those under those different folders what I'm going to do all the time is having another folder that's called blocks all right and another folder that's going to be called views okay so that's that's how it works right we have the screens folder and for the authentication screen okay I have two uh sub subfolders which are the blocks and the views okay and inside the blocks uh folder I'm going to have all the blocks that are related to the authentication system so for example signin block sign up block they will be here and it makes sense for us in order to understand how our code is working later on once the project is Big because if you have all of your blocks within the same folder it's going to become a nightmare for you to understand what's doing what and once it when you have it separated like this it's way easier uh to be able to just understand and and remodify your code and just read your code so we are going to do the same under the home folder so we're going to have blocks and we are going to have views okay so for now that's that for uh the lip folder okay so I'm going to collapse it all uh we can delete that but we don't care so we have the liap folder that's pretty much done in terms of of architecture we need the files now but we are going to come to that later we are going to create on the root uh level of our application a new folder that will'll call packages okay and under this uh packages folder we're going to create another folder that we're going to call user repository so you've seen me doing that already in other projects right and those folders they are for the back end code right so that normally you want to have an API that's handling all the thing and you don't want any kind of backend operation happening on the client but like here we're going to just make it simple and if you do that that that's already very fine right um and the cool thing about that is even if you want to continue using flatter and all this for your back end if you're using GitHub you can push those repository independently inside GitHub and you can be working there uh specifically on the uh on the repository that you want and that's pretty cool because it's very well separated from your app itself and um and yeah makes it way easier if you're working with a team and all this so we have a user repository and um the other repository that we'll have I think it's going to well let's call that pizza repository uh okay Pizza repository uh yeah that's good okay so we have our two repositories right here okay perfect and within the repository we're going to create a pup speec the yo file for each okay uh for each one spec. yo file and that's that's cool because that means that we perhaps will use packages within those repositories that we do not need inside our UI right I'm thinking right now about uh let's say Firebase fire store which is the database that we will use we will need it in both our packages right there so we will need to import this package here and here but inside our root perspect that yaml file we don't need to import it because we are just not using it inside the um yeah inside the app so that's that's an example perhaps we will use it but you get my point it's like you can be very specific and track down every packages that you're using and see the application that you're having for those specific packages as well so um so we have that that's pretty cool now we need to populate those um those perspect thato file so what you want to do here is C copy something like this so you will have I'm going to close that so you see more yeah you see good uh user repository as the name of the package okay the repo that handles users uh we don't want to publish it to to uh the pub. dev so we just leave it at that the version right is that the environment and here we have a few packages perhaps I'm going to comment those for now but uh those packages are the one that we will use later on and I'm going to save that file that's going to do a pubg okay a command pubg and you've seen that some files and folders have been created which is totally normal and under the user repository I'm going to create now a new folder that I will call Lib you see I'm retaking basically the same architecture that flatter already gives us and uh and that's just to keep it every Everything consistent um and yeah so I'm just now going to copy uh the inside of the user repository perspective that yo file and I'm going to paste it inside the pizza repository but here I'm going to modify the name right it's not user repository it's uh it's Pizza repository a repository that handle that handles pizzas which is a dream actually right so uh save that file that will create other uh stuff inside the pizza repository as you see right here and uh same as the other one creating a leap folder under it as well so that's cool okay can collapse a bit everything going to save that and close that and if we look at our packages Pizza repository is pretty cool and user repository is pretty cool as well so now we will need to create so the order of what we are going to do so first we're going to deal with uh the authentication mechanism right because we need users in order to be able to get within the app and I don't want to build a system that we will go back to later on the video because we implement the authentication so i' rather start with the authentication and the user system for doing all that and then move on to the app right so uh that's the first thing that we'll focus on the getting inside the app all right and as a user so creating an account and everything once that done we'll move on to I guess uh first we'll Pro probably Define the user model for the pizzas so as you can see here in the design uh it's pretty straightforward a user model I mean a pizza model here data model in general it's um if you're working with designers and everything like you will add some stuff for technical aspect but most of your class is already going to be defined through the graphic itself here we have a pizza so we have a picture we have if it's ve veggie or not if it's pisy not so much pisy or or or or very spicy uh yes exactly that a name a description you have a price and you have a discount on this price I guess something like this um and yeah and you can see in the details you have some macros as well for the pizza so you see it's it's it's pretty much already defined throughout the design I've added some other few things for the cart and everything but basically that's going to be that's going to be that and for our user the data model is going to be pretty much straightforward I think we're going to have well we have an ID an email and a name and uh another few fields for uh the technical aspect of the cart and everything but otherwise that's pretty much that so let's focus first on creating the user repository then shall we so that's what we're going to do now so I'm going to collapse Pizza repository and I'm going to move a bit fast on this because we've already covered that thing in videos in fullon videos onto the architecture and all this so if I'm going a bit fast perhaps play the video a bit in slow motion and everything but otherwise go see other videos I've made on the top the topic and uh and you'll understand so under the leap folder I'm within the user repository right so user repository leap folder and then under that I'm going to be creating a yeah a folder that's called source and uh I'm going to create a new file that I'm going to call user repository. Dart right so under the source I'm going to create all the files and then we're going to populate them okay so under the source uh folder I'm going to create a few things I'm going to create first a file that I'm going to call user repo Dart I'm going to create um another file that I'm going to call Firebase user repo Dart and then I'm going to create two folders one folder that I'm going to call entities and another folder that I'm going to call models okay so let me explain fast what's happening here so we'll have here our user repository file that's basically the library that we will export uh within our UI within within our main code so here Library user repository up user rep repository okay and within this user repository we will export a few different files right so we'll come back to that at the end but we'll export a few different files then we have the user repo doart file here this file it's going to be an abstract class that will call user repository and that's basically the class that we will call within our app okay so each method me that we will be adding here are the methods that we'll call inside our block pattern within our app okay we're not going to call directly uh the method themselves adds a layer of of of security as well of clarity within your code because you have a place where right you have all the methods that are defined with what you should uh return for every single one of them and for example here on our uh um on our um user repository we'll have those methods right we'll have a stream of my user okay don't worry my user is a class that we will create okay that's for checking the authentication of our user then we'll have the signup class the sign up method sorry uh which returns a future of type my user okay and takes two parameters within uh the uh method my user as well as a password um a set user data which takes a my user and returns nothing but it's still a future and you have you see you see all of those methods we are going to implement that right now don't worry about that but the the the point is you don't Implement those method within the abstract class you implement those method with within the Firebase user uh repo uh class okay that we create right now so class Firebase user repo repo and that's going to implement user repository that we just created okay see it imported the user repository that we've just created okay and uh it takes it takes a few parameters for us in order to be uh able to work as we want we'll take a Firebase oath um parameter and we'll create a user collection uh parameter as well which is going to be a reference to our users uh collection within our app so you have a few errors right now so probably you guessed why for those two because we need to import those packages right so let's go within the perspect that yo file and here we're going to just say that we want Firebase oath and Cloud fire store for now for this specific um uh for this specific repository here so as you can see here now if I want to import Firebase oath I can and if I want to import uh Cloud fire store I can as well um yeah so that's that's that and then we need a Constructor for our uh Firebase oath right here so Firebase uh Firebase user repo so that and we are going to say that if fire B we're going to take a parameter of type Firebase oath right and if this parameter is null that's what I'm writing here Firebase oath so our Firebase oath is equal to Firebase oath and if there is nothing provided we're just going to say Firebase oath do instance all right um I think that's that yep it's not an equal here it's a it's a column and here yes it's that okay perfect so we can save that and uh and I think we'll be good uh well that's just an an error right there because it's here okay um we're going to use that in just a few seconds you can see our Firebase user repo is having an error right there uh and that's just because it implements the user repository uh class abstract class and within this class we have a few methods that we didn't Implement and he's not happy about that so if I just say here create the five missing overwrite I press enter you see that he created those methods with the right uh pram like the right types every time and the right parameters for each method and uh now the Firebase user repository has no error anymore and I can just save that and be happy about it and Implement those method later later on we'll implement the method just in a few minutes and here we have still some errors because we didn't create our my user class okay stuff that we'll do just now so within our models uh folder we are creating two files one that's called models. Dart and one that's called my user uh that's called user. Dart Okay so the modelsart is basically going to be the export for the user. dart and I want every time I will use the my user class to to import within the files the models instead of the file directly I mean it's it's easier to do stuff like this in terms of comprehension uh right so my user and why my user and not just user important stuff if you're working with Firebase authentication you must know that the class that it provides is a user class called called like this right you see user from Firebase authentication and the problem is that if you're calling your custom user class the same as the Firebase authentication you better make sure in your Imports you're not mixing up stuff otherwise it's just not going to work and I've been stuck a long time before understanding that this was happening so now my user class they are always called my user and never user uh anymore and I recommend you do custom stuff as well uh otherwise you can mix yourself up very easily so the my user class so what uh what's my user class is going to look like so we're going to have a string that we're going to say user ID we're going to have a string that's going to be email another string that's going to be named and I think that's pretty much it for uh our my user class except uh I've written down some stuff um yes so uh when I add a Boolean has active uh card so that's for later okay don't ask me why we put that uh uh you will understand later on once we are um way deeper within the app building but for now trust me we'll need that later on so let's create the class itself right so my user uh Constructor so we're going to require require my God I don't know how to write anymore this. user ID required this dot email I've missed the field actually uh I'll add that in a few second do name okay so here I mean I missed the feel yes and no you can say uh that you could um have a string that will be your password here within your user class right and I mean that would be to totally fine the only thing that you will that you want and you shouldn't do ever is to send that thing to Firebase without any sort of En encryption and stuff but even with that I don't recommend doing it at all because you're handling authentication with Firebase authentication with who already which already has this encryption built in so you would just add a Breaking Point within your security within your app so I would not recommend doing that um what you can do here is just exclude it from going to Firebase which is fine um but I found that having a user class that really close as close as possible if possible to be the same uh from what I have from the the Firebase from the cloud fire store is better for my understanding of of how the app works so I'll just leave it outside uh if you want to include it inside that's fine um we are going to create a few methods so I can perhaps just copy that because otherwise that's going to be very long to just write it down so I can just delete all of those things that's from our Tinder yoube YouTube uh project that we've did a couple a couple of days ago uh so has active card and for for the empty methods I'm going to just say false um then uh we are going to create uh three other methods so my user entity method so one one that's called that's going to return to my user entity and that's going to be called two entity and that's going to take uh nothing but it's going to return a my user entity that we didn't create it yet so don't worry okay we're just going to create that in just a few seconds and uh as parameters uh basically it's the one that we have within our my user class except uh except nothing it's really just the same uh and the reason why I uh don't put those methods within the my user class straight up uh I could to be to be fair I really could it's really more for comprehension is I have my user class and I have my user entity class which are working together uh but my user class is comprehensive within my app and my user entity is only dealing with sending classes like transforming classes that are coming from the app to map that will go to uh Json map okay that will go to the uh database and transforming Json maps from the database in classes to go inside my app and that's basically what the entity uh is doing and I think it's better in terms of comprehension to have it separated again if you want to have it in the same place to reduce complexity feel free to customize it as you wish but um but I I recommend having this separation it might it might sound a little bit heavy at first I understand but um once you get the hang of it and uh and understand really how it works and build uh some um like some models that you can just copy and paste once you create your app because here I'm with you but every time I'm creating a new app uh I have templates already made so I don't have to rewrite everything by hand uh at least for having the authentication system done and all that so it's pretty straightforward once you know how to do it so while I was talking I've created the from entity method so the two entity method it's going to take my user object and transform it within into a my user entity object that's then going to transform it into a Json map that's go to the database and the from entity method well it's uh having an entry adjacent map from the database then it's transforming the Json map within uh my user entity object and the my user entity object transforms itself into a my user object that we can use within our app makes sense right so uh here the only thing that I need to add then is the entity word in front of everything oh yeah just like that okay perfect and perhaps I want a two string method yeah let's add a true string method return um return uh my user up and I'm going to just say user ID email name and has active cards all right can save that up and now we're going to create the my user entity class okay so uh same model that we could uh that we've done here instead under the entities folder but instead of calling it the file models we're going to call it entities entity entities. Dart all right and we're going to export we'll see what we'll export because we're going to create a new file that we will call user wow user entity. Dart okay and within the entities. dart file we're going to export user _ entity save that up uh here oh wow yeah I did that up didn't I so uh you probably told me that already in the comments I've created the uh my user class within the modelart file which is not right so I've just copy and paste it again within the user. dart file that's better uh let me close all that so we have the user. Dart which has the my user class within it the models. dart which exports the user. dart that's for the models and we have within the entities folder the user entity that we'll create right now and the entities. dart that export okay fine sorry my bad let's create the user entity now so basically the user entity is going to be just a gigantic copy of what we already have uh except uh we're going to implement those two methods right so uh my user entity takes the same parameter as the one that we have in our my user class um and that's that um and now we're just going to create the two document method and the from document method so the two document method basically it's a map right uh string object string object like this two documents two do doent to Json it's the same you write it as you want to write it and that's going to return then a map obviously right and a map of the fields that we have okay so a map that uh we're going to call user ID and that's going to be the string that we have email same that's going to be email uh name okay and has active card up up don't know if it's the right English word if it's cart or card I have no idea uh we'll call it cart if it's not the right name I am sorry um so that's that okay so that's the two document method straightforward and the reason we do that because we cannot send um objects like we can't just send the my user object to the Firebase uh Cloud fir store and for instance any kind of database ever you need to send some sort of like formalized type of data and this map basically is like a Json uh file and that's a comprehensible thing that the database will understand because those fields are strings and the Boolean for example right uh the database understand a list understand a map understand a string a number but the database does does not understand an object of your custom class right so you need to break your class down into these sort of things in order to put it somewhere right and that's all the time the work that we that you will do you will use your class that you have within your app transform it to go to the database and then transform what you have in the database within your class in order to be able to use it within your app that's that's the mechanism that you have all the time going on uh so we have the two document method and now we have the uh my user entity sorry uh from document from document from Jason it's really doesn't matter the same so string object same stuff stream Dynamic uh document Doc and here we're going to return a my user entity oh sorry my user entity okay up oh wow up okay and here we are not going to say uh user ID but we are going to access the parameter within the map that's called user ID right and to do that you just write it like this so that's going to access the parameter of our map that's called user ID basically we receive a map like this okay from uh from the database okay and it's called Doc and we are accessing the user ID parameter within this map that's going to give us that and we can affect that to this because it's the same type okay and I've imported something without wanting to do that uh and I'm just going to add that for the three others kind of a bit that up but it's okay okay good so so uh we are ready that's the my user entity done uh now we can import the my user entity within our uh user. file and here I'm going to import entities okay uh so that's that can save that and I can import within our user repo now we created the my user okay so I can import models right there okay and can just save that so that's pretty cool um and here we can see some uh problem s why is that yeah because we imported some stuff within yes okay so one way to fix that thing is to delete that and recreate those overwrites yes perfect okay so now we have created the entities so that that's going to be cool we have creating the mo we have created the model so our user cool and now we have the methods that we will Implement right now uh we have our user repository abstract class and here yes here we can export the different file that we've created okay so we want to export Source uh SL entities entities. Dart we want to export Source slm models models. Dart we want to export as well uh Source sluser repo Dart and um I think that's that perhaps we want to export uh Source SL Firebase report. Dart and can save that not sure we'll need that but let's just export it but yeah okay can close that up can close everything actually and uh now we're going to implement uh those methods okay within our fire base user repository okay I'm just going to take a five minute break break and I will be back with you guys in a few seconds all right let's back at it again uh I hope you stretch your legs as well because it's what 40 minutes into the video now so if you've been there since the beginning I recommend uh stretching your your legs once in a while to be uh to be as efficient as possible so now uh we left off uh implementing the Firebase user repository file so that's just what we'll do right now so I'm just going to reorganize a little with the method I like to have uh the getter at the very top then we'll have uh the sign in sign up under that okay then log out and and set user data that's fine okay so uh let's start with uh the stream okay so this stream is basically going to change every time that the app detects that a new user has been connected right and so that's exactly what we want to uh create right now now so it's stream of my user so how are we going to do that so first thing first we're going to delete that thing and replace it with curly break bracelet so now we're going to return what we're going to return our Firebase oath okay right so that's the instance that we have right here okay uh Firebase and we're going to call the methods both uh State changes right and from that we're going to call a methods that's called flap map and flap map you could use map right but here we want to use a flat map that's coming from uh the RX Dart package so we'll need to import that as well okay and the flat map is basically allowing us to play with our own my user object right and change the the um user object from Firebase authentication to our my user object so I'm just going to import eric. Dart right there and uh flap map and uh here we're going to take make a Firebase let's call it Firebase user okay now we're going to say that this thing is a synchronous and we need to add the little star to it g okay the little star to it and because we are returning a stream right and synchronous basically if you return just in a sync like this it's going to be for a future okay and if you return in a synchronous with a little uh star like this it's going to be a stream and you're not going to return something something you're going to yel something uh and so here what we'll say is we'll say if um the Firebase user okay this one that's of type user okay uh is equal to n we're going to yel uh my user. mty right else we are going to yel uh we're going to yeld what we're going to yeld user collection okay so this collection the reference of our user collection do document Firebase user. UI uid okay so we are accessing the document with the right with the user ID that's connected okay and we are getting that one okay and once we've get that one we transform what we got so the ma the the yeah the map the Json map that we got from the database to a my user object and to do that we called my user from entity okay within this method we called my user entity Dot from document and here we are calling value. data say that this can't be all and uh we need to await that thing and that should be that should be good I'm going to collapse a little bit that so you can see more perfect okay save that thing and the stream is basically done so we every time that uh here notifies about changing to the user sign in states such as sign in or sign out so every time that a user sign in or sign out right well or sign up uh will be the stream will be notified because remember a stream is always open basically is when you open the faet and the water flows and the water is going to continue flowing until you close the the the faet right and that's exactly what happens here instead of future whereas as a future is just opening and closing and and closing straight up right so a stream is a constant flow of information that's changing over time and that's exactly what we have right now for our user so the uh getter is done so now let's create the signin uh method so here what I like to do all the time is um wrap my uh method inside um uh TR catch okay and uh if something goes wrong I'm rethrowing everything so my block will catch it and send me a uh a failure state to my app so here very straightforward we're going to await Firebase oath. signning with email and password because that's the one that we've decided to go for in this app and uh the email and password will be provided within the um the parameter of the function and we don't forget to Mark our method our as sync because it's a future and not with the uh Little Star because it's a future not a stream okay so sign in method just done straightforward nothing really to add to it and now let's create the sign up method so same thing so I'm going to copy the try catch because I don't want to rewrite it again uh same stuff I'm GNA put an a sync stuff right there and here uh instead of calling that uh I am going to up I did that and here I'm going to say user credential okay so user e equal to uh Firebase authentication create user with email and password all right so let me just drop that down so you can see everything uh and here basically my uh email is within my user right my user. email and as I said earlier you could have your password within your class so you would have just the my user parameter here instead of having the password for me it's just a bit more clear and separated but you can really do whatever you want there and what I want to do here on sign up I want to say that my user do do uh user ID is equal to um user dot user dot uid exactly like that and I will need to add that thing here and I'm returning my user all right what I've done just here so bear with me so once the user is going to click on sign up okay what's going to happen it's going to come here okay so Firebase authentication is going to create a new uh user with email and password okay and uh then I want to set my um user ID to the one that was given provided by Firebase authentication and that's exactly what I am doing right there okay and then I'm returning my user because my user change within our method because the ID now is the one that Firebase authentication gave us so I want to be able to update my app uh according to to that right so that's exactly what we are doing right there um the two last methods that we have the logout me method I'm going to get it out of the way because that's really one line that's really Firebase authentication do sign out really not complex at all and the set user data perhaps a little bit more complex but really nothing complex at all um we are going to embed that thing within the TR catch just going to copy that because I'm a lazy guy and here what I want to do is basically just say await okay user collections so the reference of the user collection that we've created above otherwise it's just it's really for me to gain time okay because otherwise every time that I am calling the user collection I'd have to write that on all of that instead I just have to write user collection and if you have other type of collection the pizza collection or whatever you can just make a reference to it and call that thing instead of having to call all of the stuff all at the time so that's just going to be too heavy in the end so uh set user data so we want to create a document within our Firebase fire store so our database our user document so here I'm just going to say uh up user perhaps I'll call it my user so it's more clear for you my user. user id okay document do set and here I want to convert my user object okay to uh a map as I said earlier so to do that I'm going to call it first to entity so now it's a my user entity object and and now within the my user entity I can call two document and just like that it's done easy straight and easy so for our Firebase user repository that Dart we're done for now so perhaps We'll add a few other stuff later on but the the big big base is here I don't know why I have all that but okay so we are going to leave that alone for now and uh we are going to go inside the leap folder and um and create the logic in order for us to to start uh yeah to start uh building our uh authentication UI and I'm going to ba base myself on stuff that we've already done because it makes no sense to recreate an entire and make a very detailed uh understandable explanation of how the uh login system works I have videos dedicated to that so you should check them out so um all right close that up and navigate to the Le folder now so now let's play with uh let's play First with our prospect that yo file we'll need a few stuff right there so we'll need the Firebase core package first uh so under dependencies you're going to need to import Firebase core um we'll need to import as well those block packages I don't know if they are are the right um uh the right uh versions uh but for now we're just going to say that they are otherwise you can just go to pub. pub. deev and take the latest version that should not be a problem and then I'm I'm importing my custom repository my user repository that we've just created I'm importing it as well right there uh I'm saving all this which is getting me a pubg um there are newer version you have newer version with the dependency constraint all right so um okay let's see how that thing uh ends up okay that looks okay so now inside our main. Dart file here so we're going to call a few things so the first thing that we'll call is widget flutter binding. unsure initialized so that makes sure everything is in is like initialized right okay uh I'm going to make my main function asynchronous because here I'm going to call await Firebase do initialized app okay for now you're going to say what are you initializing a Firebase project we didn't created anything yes okay I know but I will show you how to do that in just a few seconds and another file that we need is um this file right there that I'm just going to copy within the lib folder simple block Observer okay so this file is basically in the console keep us updated on the state of the blog okay it's main it's only for development purposes that I have this file okay uh and uh and for us to understand which state and which uh yeah which state and which events are triggered within our app and I want to call that thing within my main. Dart file here I want to say block. Observer uh is equal to and perhaps I'm going to need to import a flut block uh is equal to a simple uh Observer block simple block Observer yes that's the one okay uh and here we still have an error because we're not calling main app here so let's fix that so let's navigate to the app. dark file and here I'm going to create a stateless widget that I am going to call my app okay and here within the main. dart file I'm going to call my app okay I can save that and as you can see the error went away so now let's deal with the my app file okay so what's happening so what's happening here I told you it was for the repository that was going to be accessible throughout your entire app so here what I need is a parameter that's called user repository right and this parameter I will just call it user Repository and I will access put it directly within the Constructor of the stateless widget there uh so now we have an error in the main. dart file because we need to provide uh this user repository and we can't just say user repository like this right because uh this is an abstract class and abstract class they can't be instantiated right but what we can do is say Firebase uh user repo okay and that will work if we put the constant away here I say user repository see abstract class cannot be instantiated and that's a basic principle but the Firebase user repository implements the abstract class and can be instantiated so I'm creating the instance of this class right there and then by having it available here and within my um uh authentication block as a public parameter I don't have to recreate a class uh an object of this class every time I need something from the user repository I can simply use that and that's very cool in terms of performance game because if you create a 100 instance of a class to do one thing that's just not optimized right but that optimization is for later on down the road uh if you uh really get serious about uh building apps for a larger public now here what we want to do is return a repository provider uh repository provider like this all right and uh of type authentication block so for now it's just going to be an error right because we didn't created our our uh authentication block but we're going to create that right now authentication block um and so create so that takes a context okay and um up just like that and that's going to be authentication block authentication block and the authentication block I can tell you right now it's going to take a user repository parameter that's going to be equal to user repository okay and uh as a child parameter of this thing we're going to have my app view all right and we have a few errors authentication block not created my app view not created create it so we can just create the authentication block first so the authentication block we are going to create it within the blocks here just under the liap folder right because it's the top level block that we want to be accessible throughout the entire app okay so how would you do that thing so I'm doing there I just right click on it and uh I don't have the I don't have the extension installed on this Mac so perhaps we can do that together oh I thought I had why create block oh does not allow me perhaps it's another one flut block let's see block normally I have it uh normally this thing can create a new block for you uh if I disable it and enable it let's see yeah so now with this extension here I have block new block or new qbit we're going to create a block all right and the name of this block is going to be authentication underscore block and you see it just created the uh the block for us so that's pretty cool um yes okay I'm just going to rename it authentication block right there so we know what's going on can close that perhaps extend that a little bit so you see more and um and I can just do that right now because we don't need the uh app yet so let's create our authentication block right I can just import that thing right now but not yet I authentication block block yeah what what did I do again okay let's try that thing again all right authentication and it's just going to give it to me like this yeah okay so now I think I can import that thing yeah blocks blocks all right and here I just going to rename it authentication block all right up import that thing again save okay good um little sip of coffee needed now we have that authentication event block and state so let's start with the first one which is the event so you see that the package the extension that we have created the some stuff for us already so that's pretty cool we're going to leave that but now we are going to create our custom event right because this is a sealed class so that's just what we are all going to all of our events are going to extend the authentication event all right so now we create a class that we're going to call authentication user changes user changed and that's going to extend authentication event all right that takes a parameter that's going to be a my user okay and we're going to call it uh we're going to call it user right and uh that's going to be constant for the uh Constructor authentication user change and that's going to be this. my user all right and perhaps we can just Implement that as well within our class because we have a parameter so that's pretty much it for the event authentic ation user change and that's that okay so now let's create the state so the state here you see that the package it created some sort of a class for us and you can basically create a block two different ways this way where every time that you want a new state you're going to create a new class right and you're going to call call that class within the block and that's fine but you have another way to do it and for the authentication block uh I prefer the second one so here I'm deleting everything and now authentication uh States all right it's it's an enumeration and here I have authenticated so the user can be authenticated uh the user can be unauthenticated and the States can be unnown all right so that's the that's the state that the user can be in all right so now I'm I'm going to create my class so the class I'm going to call it authentication state that doesn't move all right and that's still going to extend the quotable which is the package that comes with flatter uh block which allows you to compare objects so the Constructor of this thing is going to be authentication State all right up underscore if I can make that happen up so that's just semantic right here up and here we're going to we're going to in instantiate a few parameters that we have uh within our class which is final authentication stages all right we can just call that stages and final a my user okay that we can just call user and I can as well instantiate the props parameter because it's needed since we extend the quotable all right uh so that's that states and user uh so in inside our um our Constructor uh we want to say that this do stages is equal to authentication stages. unknown at first all right and that our user no this. user is equal to just that okay to what we are going to give it um and that's pretty much it that's pretty much it oh I need that otherwise it's not going to work perfect um so now I'm going to implement a few methods so we're going to say constant authentication state do unknown and that's basically going to just return itself it's just going to return the contain the uh the Constructor itself and do nothing uh then uh that's authentication state do uh authenticated all right and so that's going to take a my user object all right follow with me and what is going to give us this up calling the Constructor and the states now is authentication States authentication status dot authenticated all right that's that and the user is equal to here perhaps we can call my user so it's a bit more clear to my user all right so that's that and the last one that I want to create is going to be authentication state. unauthenticated all right and basically that takes nothing and that returns sorry up and that Returns the Constructor that we have uh with the status of um authentication authentication status uh do unauthenticated and uh I am not going to add a user since we don't have one and that's it for uh the state okay so that's how I like to create the authentication uh State for the block site uh in an app so now we're going to deal with the block itself Okay so we've created the event the state and now we're going to create the block so you see here we have a few thing already created but we need some more stuff so we need a parameter of the block of the block that we are going to call user repository okay that's going to be a user repository stuff and uh we need a um a stream subscription that we're going to initialize within the Constructor so we're going to call late first because otherwise it's going to tell us what right you didn't instantiate it so please instantiate that thing but with the late keyword you don't need that so we need a stream subscription of type my user remember the G that we've created within our package here our user repository package well uh it was a it was was a stream of my user and now I want to subscribe to that to that specific stream right of type my user okay I'm just going to call that user um subscription subscription like this okay so now few things so a few things inside our authentication block first I'm going to say that the user repository sorry that this the user repository is required I don't want to make this private because I want to be able to access the user reposit parameter of the authentication block throughout the entire app as I told you earlier in order to not create a thousand instance of the of the same class um so that's that for the for the block and then what I want to do is say uh that the no it's not user subscription sorry it's the user repository I think there and then uh here can delete that super um and then authentication States since we change a little bit everything and the first stages that we have is unknown okay and we can make that a constant um so then a few think here um I'm going to say that the user subscription okay is equal to user repository dot uh user okay the one that we've created the stream of my user all right and then I'm going to listen to that stream okay and here you see that it created the method because the listen that's what it does all right well I'm not going to read it but adds a subscription to a stream that's what we want here perhaps I can call that thing user okay and then what I want to do within it so what I want to do within it is ADD so the keyword add is going to add a new event event okay and the new is authentication user change and I'm going to just give it the new user that we have okay and um up yep just like that and um yep because I forgot in the event that this needs to be like this and so perhaps we can delete that thing okay good so now we have our user subscription that is um that is uh being uh instantiated here okay so that's cool and now we can create our uh authentication user change so it's right oop my God sorry almost broke everything so on um auen ification uh user change what we'll do is say here if event. user is different than my user. Mt then I want to emit authentication state do authenticated all right and the user is going to be events. my user all right and I just need to make that so that it's here if that's not the case I want to emit authentication state do unauthenticated I can make that a constant and save that thing and that's it I'm perhaps just going to add the close uh parameter of um the block so we can close the user subscription when it's done and that's it so remember what we've created within our package here user repository lib Source Firebase user repository here if the user that we get from authentication is null then we return We yeld my user. mty if not we return a populated object okay and that's pretty much what we have right here if the user that we have within our event so that's coming from here okay is empty then we have that if it not empty then we have that and that's going to change the behavior that we have within the app and since it's the stream it's going to be updating the app in real time without having to do anything really so that's pretty cool uh so the whole block is done we can close the block now okay we're back to the app. file okay and uh here uh app view now it's the app view time isn't it so let's create the app app view file uh app view file itself so that's going to be a stateless widget that I'm going to call my app View and so here we are returning a material app op that's what we're doing so we're going to give it a title uh piz um pizza delivery pizza delivery um and yeah so that's that going to save that in the app here Dart I'm just going to import app View and can make that a constant and if I refresh my app uh yeah I I for sure yeah I didn't initialize the Firebase that's the F that's the next thing we're going to do yeah okay okay I understand that you're pissed don't worry about it so we're going to do it now because it's really pissed so I think I've prepared it yeah so you're going to navigate to Firebase console. Firebase google.com right and you set up an account if you don't have one and then you're going to create a new project so here I'm going to say pizza delivery and I'm going to create that project I don't need Google analytics for this project because it's simply a test project if you want you can enable it but that's just you don't have any users so that's just not going to make sense I'll be back with you when the project has built all right right so the project has built so now we're going to click continue and it's going to redirect us to uh the console right there so we need a few things so we're going to create an iOS um project there uh and so we need a bundle ID so how do you find your bundle ID you find your bundle ID by navigating to your project under iOS Runner and I think it's here otherwise um I'm going to show you where it is I I think you have to open um yeah you probably have to open xcode but there is probably a way but yeah oops sorry that was not the right comment that I was looking for So within your terminal here you're going to type open iOS runner. xcw workspace press enter and that's going to open an um an xcode window and uh let me see if there is the xcode window somewhere yes it's here let me show it to you okay and here and you click on runner on the left and youd see here you have your bundle identifier so by default it's going to be something like com. example. pizza app but but you can make everything that you want here really and it's to be unique that's the only that's the only point so I'm going to navigate back to Firebase put the put that here I'm going to call Pizza app as the name I'm going to register my app so the app is going to be registered right now I'm going to download Google services uh info.plist that will that I will need to add to my project and you can just pass on to the other stuff we don't care and to complete the um to complete the uh the installation what we need to do is to uh add the Google service to uh the project and so how you doing that so you will need to open your download uh folder so I have my download folder right there and here you see the Google service- info. list and so I'm going to open a new um a new one up and um what I want to navigate to is the project itself so development now here for me meet Dev project YouTube um it's going to be Pizza app IOS and under iOS I'm going to iOS Runner and I'm going to take the Google info Dash list and I'm just going to paste it right here uh up like that I can close my download folder and uh I have it right here okay uh perhaps as a safety you might want to add as well see it's here now you might want to add it as well to excode directly because you see didn't didn't update it there so perhaps you want to do just a drag and drop there and xcode is going to tell you are you sure you want to do that you click on finish and now you see that the Google service is here as well so that's for uh that's for iOS and basically for iOS that's all you need to do now it's uh it's up and running so if I go back on uh fire story uh fire base sorry I'm gon to I'm I'm going to enable authentication so I'm going to say email and password just like that save and I'm going to enable fir store database okay create a database um it's just taking a bit of time up I'm not in the US I'm more in the euro in Europe I'm going to do that in test mode I'm going to create the database right so while this is creating uh I'm going to show you as well how to set that up on iOS it's very straightforward as well so don't worry about it um up okay so now we have uh the fire store uh database that's uh that's created as well so that's pretty cool and now perhaps we want to also enable sorry pizza delivery add a new app and add an Android app okay so what was our thing I think com. example. Pizza app something like this I think that was something like this uh let me check where is my code I'm lost it's here okay so now we're not on iOS anymore we are um we are not on iOS anymore but that should be here yes that's the bundle that we were looking for okay so I can close that up I'm sorry guys a bit too much stuff is happening on my screen okay I had it right I had it right so Pizza app Android you don't need to put a name you really don't I'm going to register the app and that's going to be the same process we're going to have to download yeah a Google service. Jon file that we'll need to add to our project next we can just pass on that and that I will show you what to do so now we have the file so I'm going to navigate again to can close that up but to my um download folder right and here I have a Google DS services. Json file that have that that just there right so I'm going to take that file and I need to put it under Android app and I need to put it right here okay so that's just exactly what I'm going to do right now so I'm going to take the file up and I'm just going to drag and drop it here okay perfect uh once this file is dragg and dropped in the right place so make sure you're under Android app and you put it right there not under Source or anything you put it here okay so you might need to um add a few different things to your project so within the build. Gradle which is under the Android build. Gradle so the lower one okay you need to add a few things so you need to add within the dependencies this line uh uh dependencies up Google service all right here it's already there and uh we can just save that file and that would be that under the other build. Gradle that you have so the one under the app uh um stuff the app folder you need as well to add within the plugins here the uh Google services okay and uh do you need to add something else I think you do yep you do within uh dependencies at the very bottom of it here it's empty you need to add this okay this line and I think that's that let me check my configurations uh yeah I think that's it okay I think one way to find out is to is to to test that out all right so I'll need to close that up because because we've made some modification and I'm going to rerun it again and we'll see if that works but that's it for the the configuration of uh of Firebase so I'm going to put the design right there so we have it on hand and the Firebase is right here so we have the authentication and the uh fire store so our database so we'll need that I we'll use as well Firebase storage so I might as well I might as well just start uh the service up takes a few few seconds to build up going to extend that a little bit and we'll see if everything works right um okay I'll be back with you when it's uh when the app is built okay perfect so as you can see on the left I know it's not very clear but the app uh built as expected and uh the refiguration of Firebase is good and as you can see as well the storage uh the storage product is also enabled on our uh project so that's pretty cool so we can now uh start really building the app I know it's been a long preparation almost what an hour and 20 minutes of preparation but uh you know it's it's always how it is once you create an app from the beginning and you uh you get to uh to understand how all the block and all the stuff works I mean you could be way faster uh but you would like uh the um the possibility later on to really understand your code and to uh and to make a difference with it so let's just create our uh my app view so I've just checked that off and now yep as you can see there is that but that's normal because we have no uh home parameter for our um for our uh material app that will do right now so if I look a little bit at the theme so we have blue which is the main primary color right so that's what we're going to do here so we're going to create a quick theme uh theme data uh within the theme data I'm going to access color scheme and I'm going to say color scheme. light okay and I'm going to set that the background color it's going to be colors dot some sort of a gray I think it's a gray shade 100 or something like this I'm going to say that on background uh the colors is going to be black right so that's what we have yeah mainly um mainly yes uh and that's the primary color it's going to be colors. blue I don't know if I like this blue yet we'll see later on uh and um yeah that's pretty much it we're going to say on primary for color and we're going to say colors. white and uh we'll add other stuff if we need later on right I think we can just get away with that now uh yeah yeah okay so theme is done now we can access the home parameter and that's where it get interesting because we've created the block uh the authentication blocks so what we want to do here is say block Builder I was just checking that it was recording right so block Builder Okay so our block Builder is of type authentication block authentication state right and a builder works with a context as well as a state obviously uh so what do we want to do we want to say if the state state. States right we access the stages parameter of our Au authentication state is equal to authentication stages. authenticated right so that means that user is authenticated what I want to do is return um home screen for now okay we didn't create it yet but we will and if it's not the case all right I want to return I want to return uh the welcome screen that we didn't create it yet but we will don't worry and I'm going to save that thing um we have an error right there expected to find some stuff expecting to find that yes okay all right I can just save that and now we are going to create those screens right so we're going to start to make this app look a little bit more like an app uh than just what it's what it is right now so uh we're gonna start with the authentication screen right but uh we can go navigate to screens and first home views and here new file home screen. Dart okay and for now we're just going to create that file and say that it's a stateless widget that we just call home screen okay and for now we're just going to say that this is going to be a scaffold all right and we're just going to leave it at that that means inside our view. Dart file we can import the home screen right so that's what I just did and we can make that a constant so that's that and now we're going to navigate to uh O So screen o views and here we're going to create a new file that we're going to call welcome screen. Dart and so this screen I'm going to base myself on what we did with the Tinder app right uh and basically I'm going to create the same screen so it's going to be a state for widget that we're going to call welcome screen and we can import that thing within the app view. Dart file I can save that and you can see here it's a placeholder and uh here is the right Bec is the right thing because we have a placeholder so I'm going to retake the exact same uh UI that we had on our uh Tinder app so I'm just going to take it and paste it okay uh so if you think are not working because we didn't create them yet but we will don't worry I'm thinking about the signing block and the signing screen okay so basically what I have done here is creating a scaffold but it's better if we just go through it later on okay so it's just a tab view controller where we have sign in or sign up okay so that's why we have a controller right here a scaffold and uh then a stack for a little bit of of of UI stuff of color and then we have the signin Tab and the sign sign up tab okay and now here in the tab view we have the um here we have the signin block uh and the signin screen and here the signup screen okay so we need to create those two files so I'm just going to take them from what we already created and just paste them right there okay before I'm showing them to you I want to create together the blocks okay so don't don't worry about those screens right right now okay we're going to get to them we're just going to create the blocks first so we need what here within the oath block we need a new block that we will call signin so that's going to be the signin block okay I'm just going to rename that to make it sign in block and we need another block that we will call call sign up that I'm going to rename as well sign up block okay so let's start with doesn't really matter but let's start with the signin block okay events block and state again you know with the package we've managed to uh the package created some stuff for us so the sign in event so we have here a new class that we're going to create that's going to be class sign in required and that's going to extend signin event okay so with the sign in required we're going to need two parameters two string so first it's going to be the email and the second one is going to be the password okay and I'm going to create the Constructor signin required and I'm going to say this email and this. password okay and I can as well overwrite that thing right here with email and password all right and we need another event that's uh going to be um sign up required if we want to sign out that's sign out required okay extend sign in event uh and that's just that for the sign out okay just save that thing now we're going to do the state so remember I told you you can do different ways so now we're going to do it the the way that it provided that it's provided for us so we're just going to create new class sign in uh so we can just copy that thing and duplicate it three time okay so we have sign in here we're going to up up delete that thing so we have first sign in failure then we have sign in load loading and sign in success and for the signing success perhaps we want to for the failure you would want to add perhaps a message and display the message to show you the right error that occurred we can add that later on but for now let's just leave it at that uh for the block here what we will do is uh add right here we need final user repository object as well that will call user repository I'm making that thing private so it's only used within the block um I'm going to say that I require uh I mean you can you you can straight up just say that that that will be fine all right um yeah we can just say straight up that that's going to save us time um so now we're going to implement uh sign in required okay the events that we've just created so I'm gonna I'm going to add a try catch and on the catch if there is a problem I'm going to emit sign in Failure okay sign in Failure um if before the TR catch I'm going to emit emit sorry signning uh loading all right and now I'm going to add the async parameter on this function because we're going to use some synchron methods I'm going to say await user repository and I'm going to access the signin method that we've created earlier on today and here to access the email and password that are provided within our signin required I'm just calling event okay events right there email and events. password okay that's just that okay there is one only one other um event that we need to um to add and this is uh sign up required okay and for the sign up required we just need to say await user repository. logout that's that and I think yeah think needs to be not here don't remember here all right so that's that's pretty much it for for our signing block so yeah it's it's done complete so now that we we have our signing block we're going to do our sign up block all right so I'm going to close all that up and I'm going to open our signing block so event block and state okay let's start with the uh event shall we so here same concept it's really sign up required okay that's going to extend sign up event all right here are two parameters my user okay and the another parameter that's going to be the password because remember it's not embedded within our class we could but we didn't uh now let's create the um the Constructor of this event so sign up required and we're going to we're going to pass it the user first and then the password okay and perhaps we can also add some parameters to the props up just like that and I can save that up now creating the states same stuff as before so I'm going to spare you sign up success sign up failure sign up in process okay sign up in process sign up loading it doesn't really matter it's the same as long as you understand yourself um sign up block so now let's create the block so again we're going to need a user repository object okay final user repository going to make that private so the underscore here is to make it private okay and I'm going to going to pass it within our Constructor right there going to save that up and here we're going to implement our signup not event but sign up required remember the way we've built our block earlier on it's the exact same thing here before the try catch I'm going to emit sign up uh process okay if it catches something I'm going to re I'm going to say sign up failur so that means something happened otherwise I'm going to emit sign up success like this okay so I'm going to add the asynchronous keyword right there and within the try before um doing anything two things I'm going to sign up the user and I'm going to set the user data to Firebase storage to Firebase fire store to our database okay so first things first I'm going to say my user my user is equal to await user repository DOT sign up okay and here I need to access my user which is within my event okay and I also need to access the password which is within my event as well and it's not called my user but it's called My it's called user in the event okay and remember the signup method we've created it earlier okay a future that Returns the my user and it Returns the my user because remember we changed the ID of the uh of the user with the one that was provided by Firebase authentication so that's exactly why we need it right here because we are now going to set this data within our database and we need the right ID otherwise we're going to have an ID that is one thing in the authentication services and an ID that is another thing in our database and you don't know who's who then so like this you keep track of everything and then we're setting up the stuff within our database so user repository dot set user data okay and we're going to access not event. user you could say that but the problem if you say that is that you access the user that doesn't has the uh new updated ID okay we want to pass my user okay here not event. user and save that thing and that's that we're done for the signup block okay so we can collapse all of these things I can close that and we can go back to our welcome screen so here in our welcome screen so what did I do so we have a scaffold a single child scroll view it's really just UI stuff but let me just import the uh signin block let me just import the signin block remove that and import the signin screen sign up block I'm going to import that just remove that and import the signup screen if if I save that uh you will see I need to import those stuff but you will see that we have no errors anymore right there so now we are going to create or just import The Right Stuff within um the signup screen as well we still have a few errors my text field okay because I used my text field so we're going to create that as well and I'm importing all the stuff here sign up process sign in process I it's process not loading that I'm using in the UI so signin block State and here instead of sign in loading uh I think we need to put sign in process sign in process you can make whatever you want it's just since I'm reusing the UI that we've already created in a previous video it needs to make sense uh and in the block as well I need to change it uh sign in process y just like that um okay good oh my bad sign in process here okay good yep so a few things yeah my text build so that's what I was telling you about the other at the beginning of the video you can have some stuff within the component here folder I am thirsty because you're going to reuse the component in a diff in all the different places so basically here what I've done already and it's creating a file that's called my text field dark and here basically the file is this one and so basically it's uh my text field okay extend the stateless widget and it takes a bunch of parameters that are parameters that are um uh parameters that can be activated within a text form field right and it's just for me to have uh then a custom and a global uh field to you throughout my screens okay so I can just scroll down uh and you can just pose the video to recreate that thing or go on the GitHub and see how it's done but it's really straightforward really there is nothing really to say about that so yeah that's just that okay so let's move on I'm going to import that and I'm going to refresh and then I'm going to walk you through it okay so I'm just going to import that thing here in sign in screen and import that thing here in signup screen okay I have one more error right there yes okay we'll deal with that later okay let me just refresh everything up refresh again okay perfect so you can see now that we have something going on on the app which is pretty amazing so there is some little uh stuff happening there because I need to add ccino icons to my ppec that yo file so I will just do that right now on the main pect Theo file import cerino icons okay and reload the app s okay so as you can see here we are inside the welcome screen okay and that's basically the core where we have our um our tab view right we have a sign in and a sign up okay so here in the sign in we have a scaffold single shell scroll View and everything so that's really just all of the stack here is for the the the uh colors behind Okay so we have a container with some height and width and the decoration with some um some colors all right uh pretty straightforward you can change the color you can do whatever you want there really doesn't matter the backdrop filter that allows us to have these blur effect okay and uh what's really important then is the tab bar here which um has some up let me just up okay good so the tab bar that has a controller okay that controls the scrolling right there uh and then you have sign in and sign up as the two tabs within it and then expanded uh the expansion of the rest of the screen is the tab bar view where we have our block provider of type signin block for the signin screen and our block provider of type signup block for the signup screen right here okay and uh in the signin screen so let's get this one first okay few things going on so we have state for widget okay and we have a few parameters right there so password controller email controller okay so for those two text Fields a form key controller a sign in required okay so that's just for the button to change as a circular progress indicator once you click on it uh icon password in order to be able to see what you're typing okay if I'm typing right there you can see that if I click on it I see and then I don't I don't see so that's as well what's the Obscure password parameter is uh right there and we have an error message if you try to log in but don't feel everything okay how's the widget be how's the yeah the the to sign in scrip Bild so we have a block listener first okay of type signin block so the block listener is just going to listen say if the state is sign in success then the sign in required so the loading is going to stop okay signning in progress the loading is going to go because the signin reord is equal to true and if there is some failure we're just going to display some message then we have a form okay we have a form that is too much instantiated as I can see okay so the form takes a key all right so here it's our form key then we have a column all right and this column takes well two uh sized box which are my text field okay and my text field is the custom text form field that I have that we've created up there in my text field okay and TT a few parameters that are either optional or not the controller for example is not optional uh and you can make all of the different stuff here as you want and we have a validator as you can see here that's going to say if you didn't fill the email address um fill this field and if the reject uh is not uh valid uh it's going to tell you as well if I just say that it's going to say please enter a valid email because the reck expression is not corresponding to an email okay so that's that's that and we have the other text field right there which is for the password okay so as well the password has a reject right here okay um that is a bit complex and that's way too complex for this update this uh testing video but it's basically because we want to have one uppercase one lower case a number special characters and eight characters minimum okay so that's what this reject says right there okay and um and yes that's pretty much it uh then we have the the button the suix button that I talk to you about okay and uh onpress is going to set state to the uh icon password um icon right here okay and the icon itself is the icon password that we have as a parameter at the very top here of our um of our signup screen sign in screen sorry uh and under that we have our size box for our text button okay for a signin button and as you can see if sign requires is is not is not I mean if signing require required is true then uh we are going to see the circular progress indicator if not we have our text button with a here a text button that has onpress method that checks the current state of the form and if it's validate then it's going to call the signin block and add a new event which is signin required and pass it the email and the password okay that's basically what this thing does all right and then we have some styling for the button and uh for the text itself as well so that's it for the signin screen straight forward then the signup screen the signup screen we're going to have to modify it a little bit but as well let me scroll to the very top of it all right so we have same a few parameter we can delete the name actually uh no not the name but the H because we don't need the DH controller so I'm going to delete that thing up and we have form key same icon password all of those things I've just explained that is for the password itself in order for it to be secure because as you can see here as I'm typing some stuff it tells me that i' I've added them right it's just for a a more UI seamless integration right so you have that and same you have a block listener as the root of the widget that listen if it's sign up succcess then it's just going to stop the the the wheel uh the the circular progress indicator and you don't need that actually and uh and yes that's pretty much it same thing then you have a form as well that's way too much instantiated let me just fix that up up scroll to the top okay so now we have this here at the very bottom it's instantiation okay sorry for that but now okay you have a form all right and it's the same Principle as earlier with the with a form key and then you have different size box that contains text Fields uh my text Fields okay so these are customs and it's exactly the same you have here for the email the password I just show you but here you have the unchange that that's going to parameter that's called from my text field that will change the color for each stuff okay so it's really really really straightforward look at the GitHub if you want the code right there or post the screen as I'm scrolling down because it makes no sense for me to um to explain that uh suix icon works the same validator works the same as well so really really uh nothing much to say about that then you have the row and uh for those um little information so the users know uh the name we're going to keep that field sorry sorry we're going to keep the name field but we're going to delete the AG controller field right there up save that thing okay and we have here our button that's uh working exactly the same uh but here I've commented that because we didn't implemented the copy with method for our my user because here I say my user is equal my user. Mt okay so that's that but now we we can just populate my user straight up okay so we can say uh that my user here we're just going to change. email is equal to email controller. text okay and uh my user dotame is equal to name controller. text that's pretty much it all right and then we are calling set state but you don't need that uh to uh add the sign up required from our signup block and we're trying to sign up the user so and then you have a little styling and The Styling as well for the text itself and the circular progress indicator button okay let's refresh everything pop up a debug console and try to create an account perhaps I've missed something so let's say test at gmail yeah that's my keyboard sometimes my bad test gmail.com password test one two 3 4 okay name Roma all right let's clear the console and see if we have some errors sign up in progress authenticated and now we are redirected to the home screen which is nice and now if we go to Firebase inside the authentication you see that we have a new user with the ID that was provided by Firebase authentication look at this ID right here HLT I don't know and if we go to fire store we have a new users collection with the same ID I you know the same ID right here and the right Fields within it okay well well done guys that that's pretty cool we have everything working right now for the users so now we can create the UI we're not going to create this page right here which straight up the home screen is going to look something like that okay so we can start perhaps building this because we are done with the um with the authentication process that's pretty cool uh how long 1 hour and 48 minutes it's going to be a long one this one I'm telling you because I think I'm not going to cut it in a few in few parts so uh yeah it's just going to have to uh to be a long one so I'm going to take a break and you should do the same now because we've worked very good and if you need more uh that it works navigate to LEAP screens home view home screen uhart and here navigate to background colors and just say colors. red and you see we are inside the home screen now so that's pretty cool uh so I'm taking taking five minutes uh I will be back right now you should pause the video and take five minutes as well and we'll be back uh just now all right let's create uh the UI now shall we and we are I think first going to create the UI and then we're going to make the UI Dynamic I think that's fair um so because we've done a lot of uh background back end kind of stuff so it's better if we do a little pause of it and just start uh working our way uh to uh DUI so what I want to do is within the scaffold here instead of calling colors is going to be team.of context. color scheme. background okay save that up and I hope your break was good and I hope you actually took a break because otherwise you're going to do a mental breakdown on me and that's not fine so then I'm going to uh call um abar and this AB bar I think I want to back background color to be the same as the as the scaffold so I'm just going to call that thing and see the advantage of having a theme it's just you can call the colors there and just not repeat yourself it's not it's more than not repeating yourself it's more I want to change the color of my app right I just need to navigate to the app view here and I said that the background I don't want it to be 100 but I want it to be 200 I just saved that but it's not really clear what I said perhaps I make it red see one place it changes everything thing instead of having to go through all of the files one by one and Chang it all so no that's not that's not manageable so that's way better uh so we have our app bar right here and we're going to have uh a title that's going to be a row I think yeah uh a row takt some children and a text widget within it which is going to be Pizza all right we're going to add some stuff styling to it uh going to say textile the font weight is going to be bold all right the font size perhaps is going to be like 20 that's too small 30 30 is okay and uh before that before our pizza I want to add a little logo and I have some images that I want to add to the projects and they are right here up under my download they're here I have a few images that I've created on canva really simple stuff and I have this image I want to add so what I want to do is uh take those images and create a new folder at the root which is going to be called assets and uh under assets I'm not going to separate them I I'm just going to dump all of them right right there under asset uh up assets okay so now they're here and in order for me to access them I need to change my ppec that yo file I need to add a line here the very end of it I and the indentation in the perspect yo file is very important all right so follow the same indentation otherwise it might not work and the spaces and everything all right so I just add the assets folder to my perspect the yo file and perhaps I'm going to need to rebuild my app we'll see in here I'm going to add image. asset and the name of the asset I have no idea I think it's eight yeah let's call it this one 8.png and I don't know if I need to call yeah that didn't work aset slash perhaps that's better if i r my app yes good it's gigantic uh so we're going to reduce the scale by quite a lot yes that that's better uh uh let's say 13 14 14 I'd said not 134 perfect well that will work and we're going to add some sized box between our two widgets which going to has a width of five something like this I'm just going to say that I add the constant parameter to everything okay good uh that looks cool uh perhaps I want to make it more bold the text I don't know if I can do that black the most thick yeah like this perfect okay so we have our title and now I want to add um I want to add here um I want to add actions and basically I want to add two things I want to add the card button and the logout button so the first uh button is going to be so we're going to do icon buttons I think it's good to have those so icon buttons that takes an onpress and an icon all right so the unpress we're just going to make it empty for now and the icon I'm going to say cero icons dot going to import cerino Dart log out out Arrow out I don't know every time I have to search so long for the right icons I think there is a website that helps me out but um it's let's use this one Arrow left to line but Arrow right to line and I need to wrap that inside an icon widget otherwise that doesn't work okay cool so we have the logout button that will be here and after this one I want another one that's going to be cart yeah this one okay I want reversed oops sorry I want to do that and paste it right here okay so we have our cart button right here and our logout button right here okay that's pretty nice so uh we can implement the log out so we can just make sure that everything is working good perhaps here instead of five I'm just going to put eight yes that's better and uh so for us to implement our uh logout system it's super straightforward we just need to call context. read and here say that it's going to be uh I think sign in block and we're going to add a new event which is sign out required and that's it the thing is we didn't pass the signin block to the home screen right so if I click here it's going to say well I can't find the signning block okay and that's normal because we didn't give it to him so what we need to do is in the app View here is wrap our home screen with a block provider okay and the block provider of type signin block okay and the signin block needs a user repository as a parameter right so I could just say Firebase user repository and create a new instance of it but I already have one remember within the authentication block so I'm just going to access it right here and just give it to him and remove the constant and add it right there and now if I'm rebuilding my app if I click here I'm logging out of the app and that's pretty much what we want so let's try the sign in now that we didn't start try or yet test gmail.com test1 1234 right that works sign in and we're in again see everything works amazing so uh with that said we were here on the home screen so we have the cart we have the logout uh now let's create a grid view okay uh so for that under the ab bar in the body parameter we're going to create a grid view dot Builder and you see why Builder because the information is going to come from Firebase so I'm just going a little bit ahead of time of time so the GD delegate so the GD delegate is going to be a sliver GD delegate with fixed crossed account okay and the crossed account is going to be two all right so I'm just going to make that sorry constant and the item Builder text a context and an integer okay to know the item within the list because a grid view is basically a list but with different parameters horizontally but scrolling vertically I mean you can do whatever you want really but here let's just say that we have some containers and just access the color of it and make it red and we're going to say that the item count is four save that up now you you're going to tell me Roma that's terrible we only have one item right there well you'd be wrong my friend because if you do um cross AIS spacing and we're going to set that to 10 and Main AIS spacing within the Greek delegate that we set to 10 Again bam you see that we actually have four of them as is our item count right here so I'm going to wrap that with some padding wrap the grid view with some padding uh I'm going to say 16 okay good and here the thing with the GD view is by default it's squared right and we don't really want something that square we would like something more that's more of a rectangle right but the cool thing is you can H you can access the child aspect ratio in it and uh if you say 9 divided by 16 you'd have something that's way closer that what we want right and we can actually build on that so that's exactly what we're going to do so um let's create the UI for the card here okay so let me zoom in a little bit so I see better inside the UI on my other screen so uh the container here is a good idea but first instead of the color we're going to access the decoration parameter and set it to a box decoration the Box decoration of this thing is going to be a little bit weird but for now we're just going to keep it simple by saying that the Border radius is equal to the Border radius do circular and for now we're just going to say like something like 20 that really didn't work oh yeah that did is just I put the color away so let me just put the color back in so we can see something okay um and actually here what I want to do is say that we want some box Shadow okay so box Shadow is a list actually of box Shadow and this thing takes some parameters so the parameters that these things takes is um so it takes an offset that I want to set to offset like I don't know three and three okay so for now up I'm going to just say that the color here is white okay uh the color is way too black so uh color sorry color and here we're g to say colors dot gray that's still too much so gray do shade 400 or something like this okay now we're going to say blur radius the blur radius perhaps two or something like this perhaps five yeah five is good um the shade we can turn that turn that a notch three is fine yeah like it perhaps I want the cross to be bigger um well it's just UI stuff here I'm just yeah that's better so uh going to put 16 here as well but I want to be able to see the pizza good as well but they can click on it as so yeah we're going to going to keep that I think it's pretty it looks it looks cool see and since it's a um it's it's a list view right it's a grid view you can scroll that thing so here if I say that the item count is G is eight instead of four you see that we uh have eight items within it okay and that's going to be cool because we're going to get items from our database and so we're going to just set that dynamically and it's going to give us the right amount of of uh of stuff so for now I've put the uh pictures here but we're going to put them in Firebase storage so we can access them dynamically but for now since we're building it I just want to have everything on hand so uh we're going to access the child parameter of the container and set that to a column colum takes a children parameter and the first one so now for now it's going to be image. assets but we're going to change that later on to a network image as I just said and just for now we're just going to access the first one that I see which is the one PNG one. PNG up and set that to yeah cool okay so that would be the image of the pizza that we have up there um okay then under that we'll have a row a row takes some children as well and here we'll have a container uh and we're going to access the decoration parameter of it and set the Border radius B border radius the Border radius circular do 30 yeah 30 or something like this but the most important thing is to say that this has a child parameter that's going to be a text and here um we are going to say we're going to make it Dynamic later on don't worry about that but for now we're just going to say non non veg save that up and say that here the color is going to be red non vegie okay and we're going to access the style parameter of our text text style all right so the color is going to be colors. white okay uh the font weight is going to be bold the font size is going to be like something like 10 we don't want it to be big yeah and we most certainly want some padding around that thing so I'm going to wrap the text widget with some padding if I can find it it's here save that that's too much uh so I want something that is symmetric in terms of padding so I want a vertical padding of let's say something four and a horizontal padding of something like eight double save that yes that's something that I could work with uh here uh what I am thinking is I'm going to add some padding to the row and I don't want to add it directly to the column because I don't want to add padding to the image it's already it's already good sized in my opinion so I'm just going to have to settle to add padding on each items down the road uh and here I just want to say um I just want to say symmetric and I want to say orizont Al horizontal horizontal I'm going to say eight uh yeah eight or 12 12 12 is okay um so non vegie so that's that going to add some constant keyword so we can see something and um perhaps so we are going to copy the container that we've just created and paste it right here and add some size box between those two of withth I have no clue eight something like this yes that works uh and this uh we can say for instance now green as a color and um let's say balance for the Spice uh okay and what I like to do what I'd like to yeah what what is cool here is they have some sort of a shade so here you'd have a text that's green but something Shade that's really more than that like 100 yeah something like this and it's extra bold this thing yeah yeah something like that I I think um it's even like with opacity we could even go like this in like 0 point like 0 point 08 or something like this 09 because if I say one it's just yeah yeah that's that's good that's good I'm going to add a pepper here do they have a pepper ion yes okay good uh I think that works well I think that works well um and we're going to change the color dynamically based on what we have from our database okay but for now let's keep it at that perhaps that's the text a bit too big eight could be okay well let's let's leave it at 10 for now okay so under uh the road that we had um under the row that we have I'm just going to take the padding and up I'm going to add a new padding up and I'm going to paste the same one and access the child parameter and set that to a text widget that's going to be for now um what's the name of the pizza we're just going to take the same one that they have on the UI because I am not ins ired cheesy Marvel which is a cool name for a pizza so um add some size box to it um let's say height of like something like 12 to be consistent from what we had earlier that's a bit too much eight let's see because we're going to add some styling to the text text style um so the font weight on this thing is going to be way bigger like something like 18 in yeah the front weight is going to be as well like something like bold yeah uh and I think we can even make like 20 for the the yeah I like that uh one thing that I want to add except from the con the constant parameter is on our column here I want to say cross AIS alignment cross axis alignments do start okay so we have of our text to the left okay so we have that um and then under uh the cheesy Marvel widget we're gonna have another text widget that's GNA be the description uh so I'm just going to say what they say in the crafting Joy your pizza your rules Best Taste okay so that's definitely not the right um up the right stuff that we want to say so that's going to be something like 10 uh I want to say the font weight it's going to be normal or 300 maybe yeah yeah want a font weight to be to be very light but I want the color to be gray more gray more gray like 700 yeah it's because it's constant up yeah that's better that's cool that's very cool okay perhaps I can make that normal yeah so I can just delete it then okay cool um so we have have that and now the last thing that we need to add is the last row for the price so I'm just going to take that uh and instead of having a text right here for now at least I'm GNA have a row okay with some children uh the first one is going to be a text widget so I'm just going to take that thing okay and this is not going to be that but it's going to be like for example I don't know what the prices were on this design but I think it's crazy expensive so so we're going to go something like this oh yeah with the dollars you need to escape that thing uh let's add uh let's add some pading to that thing but we're going to do differently instead of adding some padding we're just going to pin that to the bottom and I don't think that we can straight up do it right here with an align widget alignment do bottom center bottom bottom center yeah no we can't do it like this uh so I'm going to show you how to do that let's remove this widget but for now let's just focus on the uh on the text itself so it's going to be 18 or yeah 20 to keep it to be consistent uh this is going to be um our theme of context. color scheme. primary okay the font weight is going to be whoa the font weight is going to be like 700 yeah um okay 12.0 z um then they have another text widget next to it going to add a little size box with a width of like five something like this and I'm going to paste the same widget but this time uh it's like I'm going to say like 15 and uh this is going to be like 16 in terms of um of size um and the color is going to be gray yeah going to take the same gray Ah that's a big that's that's too gray actually yeah that's 500 is better and if that could be 500 yeah that could be 500 okay so we have that uh and now we need to uh to add a a last button to it uh which is going to be the button to add this thing to your um to your cart but uh I'm wondering if we're going to have the space because this thing is perhaps too big so perhaps I'm going to make that 16 I'm going to make that like 14 even like 12 yeah like that we have to space because now I want to have an icon button going to have unpress for now that's going to be null all right and an icon that's going to be like add so that's going to be icon cerino icons do add yeah okay good dot add but I don't like this one I want to have can we have a add Square we can't have an add Square well okay going to settle for that one then that's fine okay um so a few things so we want this thing to be at the very end of it but I don't know if you've followed the channel you've seen in the last video that we've done for Tinder this is within a row right so this is I have the sun in my eyes this is within the row so the thing is if I'm here and I say that I want the main axis alignment so main axis alignment to be at the end okay it's going to move everything to the end right and I don't want to move everything to the end that's not the goal here I just want this thing to be sep separated from those two things okay so how I do it is just wrap my row within the row okay and here I say main axis alignment main axis alignment do space between okay and I can remove that thing and I can take away my button that's within the second row okay and paste it after within the the other row itself and see now it's separated so that's pretty cool that's that that's what we want okay so that's exactly that and uh the last thing that we want to do is here um font style uh font style here and say font style dot that's not font style that's decoration text decoration Dot overline not overline line through yes okay good perfect okay so we have our UI ready so that's pretty cool that looks nice no I think it looks cool so we have that and so when we click on that thing we'll add the uh Pizza to our cart and when we click on our cart we'll be able to see the list of the pizza that we've haded uh to the card itself okay now I want to make uh the detail screen so we can add the piz to the cart but we can also click on the cart itself right here and be directed to the um detail of the of the pizza so what we can do is uh within our column within our container here wrap our container with an ink well widget and add the ontap parameter of it save that and you see normally okay so that's if I've wrapped that with a material yeah it's behind it because now I can just do that let me see if that works huh because yeah no that's the problem okay let me check one thing and I'll be back with you in just one second if I can find my mou okay all right so I've uh I found what I was looking for so basically I've wrapped my container with an ink well widget that I've wrapped with a material widget okay and uh I've commended all of the decoration that we've added to our container because we don't need it anymore we can delete actually the container for the decoration and we can delete the container itself um and what I've added at to the material is the elevation of three so we have a little elevation of the material right there we have the color of it that's white and the shape that's putting some borders to it okay uh and the ink well I've added a border radius of 20 so it matches the one that we have on the material okay and once we click on it we actually see some feedback okay and I think that's pretty cool cool and that's something that you would want to have in your app okay so uh so yeah so once the user knows that it can actually navigate to those uh to those cards all right so what we have next is the detail right so the detail page so uh how are we going to craft that thing so once we click on that thing so under home views we're going to create a new file that we're going to called uh pizor detail or just details screen. Dart and we're going to create a stateless widget for now Pizza screen no pizza detail detail screen sorry details screen okay save that so what's the details screen so that's going to be a scaffold okay going to save that and for now what I want to do is uh just uh say that here on the inel property on top so we're going to say navigator I see nothing Navigator do push and so here the push takes a context and a root okay so a context and a root so we're going to modify the root so as you can see in the document ation it's a material route that we have so you can just copy that thing paste that thing here because we don't have a router in our app not necessary for now okay and the page that we're looking for is details screen save that and now when we click on this we are redirected to the detail screen here all right so if I have the nap bar in my scaffold okay I will have the arrow back button that I can just use to navigate back to the home screen okay so um I'm going to take a few things from our home screen the background color I want it to be the same in my detail screen within the scaffold and within the app bar okay so that's seamless all right um we could add some hero animation here uh for it to be cool yeah we could do that uh so um under the app bar I'm gonna have a body let's navigate to it a body and here I'm going to have a column that takes some children so the first one that I have is going to be a container that's going to have the width of media query. off context. size. width so it takes the entire screen and a height of the width so it's a square okay I'm going to add a decoration parameter box decoration for now I'm just going to add a color to it in order to see what I done yep okay and uh I am going to add some border radius to it border radius do circular and we're going to say 30 okay I'm going to add some padding to the to the column okay so for now it's just eight but I want it to be at least double uh but I don't want it to be double everywhere so I'm just going to say symmetric here I'm going to say horizontal is going to be 16 and I don't want any vertical for now okay let's see how that looks yeah more okay horizontal 20 perfect and so my height is going to be minus 40 because we have it two times here and here 20 + 20 is 40 so we have a square so you need to be consistent uh so we have have that so here I want to put the image itself within it right so what I want to do is uh uh I can straight up call Image within the decoration decoration image and uh let's see decoration image so here asset image but now later on we'll do Network image don't worry and for now asset SL one.png for now yeah that works amazing um and so I don't want it to be red obviously I want it to be white uh and uh I am going to add some border some Shadows to it uh so box Shadow exactly how we done previously box Shadow I'm going to say the offset is going to be offset like three and three and the blur radius is going to be like five and the color is definitely not going to be black color is going to be colors do ray yeah okay so that's that's cool I like it can add some constant parameter everywhere uh now uh we have that and under it uh we will um we will add some more information okay um I'm thinking right now so we'll have so we have our container right here I'm just going to take that one I'm going to add a size box of like height 20 or 30 let's see and I'm going to paste that thing again okay so now I'm just not going to add some width and height I'm going to delete I'm going to delete what I'm going to delete I'm going to delete uh the image I don't need that but what I need is the child parameter of this container so the child parameter of this container is going to be a column that takes some children as always it never changes so the first parameter is going to be a row with some children to it and the first children is going to be a text widget uh so for now it's going to be truffle Temptation tempation X trza something like this save that up okay um gonna add some style to the to that thing so Tex style so that's our the title of our pizza so um so the title need to be big so we're going to say font size it's going to be like something like 20 um the color is going to be like the color is good but the font weight font weight is going to be like front weight dot extra bold or I can just say bold that's fine okay um so that would be the text and then we'll have another text widget link to it and here we're going to do something cool so um we're GNA have the price of the pizza so we've said 12 previously oh my God $12. Z okay I need to escape the dollar done um and this uh so what we need here see we have a we have something that's uh over overflowing our app right and we don't want that so what we're going to do is wrap our text widget with another widget which it's called expanded and we're going to do the same for the price wrap it with another expanded widget and basically what I want to do now is say that the text has a flex of like like let's say double the size of what the price can be okay and that's going to put everything is in perspective right now okay that's pretty cool um the thing I want to do is add some padding to that thing to the whole container to the whole column sorry I'm going to add some padding uh yes okay um more sure more uh so I want to have so I want to say yeah let's see let's try 16 okay 16 okay uh so here on our row I'm going to say main AIS alignment main AIS alignment. space between and that is not bringing my my stuff to the end of it uh I don't think it can actually because it's in the middle of it uh uh see here it's here but I would like it to be there but I don't know if I can do that uh if I say align alignment Dot Center right well of course I can well done uh I'm going to add some constant keywords okay okay so here for our price the Sun is setting beautiful the color is going to be theme.of context. color scheme. primary okay just because I put everything constant before so now we have problems okay uh 12 good 12 EUR um and they have put actually they have have put actually the price the the cross price under that so here under my I'm going to wrap my text widget with a column and I'm going to add another text which is just under it and say that this was 15 not 20 but like 16 in terms of space and the column here I'm going to add the cross axis alignment to be at the end the color of the second one is going to going to be colors. gray gray and the decoration of it nope the decoration of it is going to be a text decoration and a text decoration dot overline no I've made the same mistake line through line through okay good okay nice okay good perfect perhaps we want a little bit more padding telling that to myself okay 20 sounds amazing um okay good next up we have under this uh row that we just created another stuff which is going to be um the macros of the pizza because we're also going to going to take the macros of the pizza uh so um I'm thinking to myself uh yeah let's just let's just make it simple so we're going to have a row again of children and here we're going to say expanded and the child is going to be up contained coner so we're just going to create one for now and then we're just going to duplicate it container so container container uh we're going to have some um yeah container some decoration to it box decoration the color is white uh no the color is gray colors do gray but like a light gray do 200 perhaps uh yes uh we're going to have some border radius to it border radius is going to be like border radius circular it's going to be something like 20 something like that um and we're going to have some box Shadows to it box Shadow which is again list box shadows and we're going to have an offset that's going to be offset let's say 22 and the blur radius that's going to be of like five again okay and the child parameter of the container uh is going to be a column I hope you're following along and I'm not going too fast if I am just put the video in slow motion um but it's already two hours and a half of video so yeah it's good so the column and here we're going to have an icon uh so here cerino icons but we're going to use another package that's better that's fire yeah we don't care about the uh the we don't care about the icon yet uh icon like that and under that we're going to have a text widget that's going to say like 4677 calories okay um right so now if I add some I'm going to put the constant keyword a bit everywhere so that looks terrible but don't worry give me one second so I'm going to have a sized box right here of a height of uh 12 yeah okay uh that's that then what I do not like at all is the color of that thing so perhaps gray shade 100 or even just white you know I think white could look good white on white yeah the color though of the Shadow is way too dark gray yeah that's better uh and now I need some padding with my column uh some padding okay good and now this is where the fun is going to take place and here the icon I want it to be I want it to be red red red accent looks better um and uh yes so that uh here I'm going to add some some text some style to the to the text itself because I want the font size to be like something like 10 I really don't want something to be I don't want it to be too big from size 10 yeah perhaps 12 no 10 was fine 10 was fine okay and so now I'm going to take the expanded container that I've that I've got and I'm going to duplicate that thing four times okay good I'm going to add some size box to it size box of width let's say 10 okay and we're going to make it a little bit more understandable guys huh just in a second okay good uh so what I'm going to do now since I like that thing uh is just going to create the component so up I'm going to take I'm going to take the uh expanded okay I'm going to go to components new file I'm going to call that file uh macro Dart and I'm going to say that um macro widget is equal to that up very good okay um but but but but but macro widget is equal to that yes and no because I want to be able to send some parameters to it so what I'm going to do instead of doing that is create actually a stateless widget that I'm going to call my macro widget and I'm going to return the expanded widget that I had okay okay good can delete what I just did and uh I can save that and now within my detail screen instead of calling the expanded I can just call my micro widget import component make it constant and instead of having like 200 lines of code I replace everywhere where is my expanded stuff with my micro widget and we should be good to go so it's more understandable for you all okay and the first one is here okay perfect up I'm going to save that see nothing happened very cool um and so now we want to change a bit of few things so for the macro widget we're going to have a few parameters so we're going to have first uh the title that's going to be a string sorry okay uh required this dot title okay and so um the title is going to be uh the number itself no yeah let's let's think of the dynamic stuff so that is the value that will come from um the database all right and this is the title so we'll have title and we'll have an integer or perhaps a string an integer that's going to be or yeah an integer that's going to be uh the value itself required this. value okay and so here I'm going to say value and here I'm going to say title invalid constant value yes all right delete the constant save that thing now it's not happy because we didn't provide it anything so how how about we do that title so that will be calor calories the first one calories all right and the value is going to be 267 okay I'm just going to copy that everywhere and the second one is going to be protean the third one is going to be fat and the last one is going to be carbs okay so proteins we're going to say 36 36 uh 21 gram of fat and 38 uh gram of carbs okay and so now you see in the app that changed so we have uh 267 calories and all of that thing so I don't like that the circular border is so circular so that's better um and I don't like as well that the shade of this thing is too bright it's too it's too dark okay that's a bit better perhaps 400 would be a good compromise yeah okay we see good now uh I'm going to add a little size box of a height of like four between those elements so it's a little bit more square and now we need some icons to it as well because the plane doesn't mean a thing right so um I think uh there is a cool package uh where is internet there is a cool package that we have uh that's pub. Dev uh icons five icons I think something like this uh it's not that icons let me find that thing super popular uh let me go get back to you when I have it okay I got it it's font awesome flut so let's just take this package copy it inside our prospect that yo file under that font aesome flatter um and uh once we have done that we can access the um the cool icons so uh let me check how that works again so we have here icon and something like this okay so instead of having a cerino icon right here we have something like phone icon something like this right I guess this is not constant this was not the problem what was the problem uh should we use that yeah exactly okay so you use it like this uh and the color of that thing is going to be colors do red accent okay save that game pad so that's still not what we want but we're closer um we can put the constant keyword as well so fire yeah that's good so we want a font aome icon as a parameter as well so okay up just going to call that icon and we're gonna add that to the Constructor of our widget required this dot icon okay save that thing and remove capucino we don't need that anymore and so for here we're going to have icon it's going to be five up do fire where am I I'm here up going import this okay icon data solid so that's not uh that's not a font on some icon it's icon data solid apparently that works no it's icon data apparently is that that yes that was that okay good perfect so I can just copy that thing over the others save that thing okay and here I don't have fire I have a wait I have a dumbbell that didn't work oh yeah I know white didn't work uh because here it's icon uh from some icons and here icons icon yep okay good uh then we have some like meat uh I don't know what kind of Icon I can put here I don't have the um I don't have the um yeah that could work and carbs I like bread bread okay good well that that's okay uh yeah that will work right that's cool um perhaps we need to add some grams to those things uh so that will be here we have our icon where we have our value and we can say um we can say two things because this doesn't need the gram but this would be so we can say here two things so if so we don't need to say if so so title is equal to calories calories then we want that thing otherwise we'll want to have up to have that thing yeah perfect amazing good so uh everything is still recording yes it is so we are almost done with the uh with the UI here we just need to add now in our detail screen a new button under our row going to put up a size box and here we're going to say uh we're going to make um uh we're going to say what size box with media query. of context. size. width and we're going to say height of like 50 we're going to say child that's going to be a text button that takes an unpressed parameter okay as well as a child parameter which here is going to be a text which is going to be by now okay so few things uh and we can get inspiration from our our authentication views signin screen here because we're utilizing text button so I'm going to take the style that I have from here okay I'm going to paste it here inside the um the text button under the unpressed okay good so few things so here the background color of the button I want it to be colors. black okay good I want the elevation to be okay three that's fine the Border radius to be like something like 20 or 10 yeah something like 10 and I want the height of that thing to be way bigger like 40 or something yeah okay good and now I want to add some styling and I will inspirate myself from that thing as well so I just don't have to right uh uh it all again so let's add some style to the button but here let's make that like 24 oh that was too much 22 20 all right let's settle on 20 20 and uh what's that Medium semi Bard yeah that's fine semi Bard okay let's add some constant uh stuff to the file and I think that's pretty good I think uh I think we have something a u that makes a lot of sense uh in a way where we have uh our login stuff so remember we have sign in and and uh create an account so sign up and here I say test at gmail.com to signin test one two 3 4 and I sign myself in I'm redirected to the home screen where I have a list of all of the pizzas available if I click on one pizza I have the detail of the pizza itself with the price and the promotion that was there I can buy it now and I see the different calories that that are there for for the pizza itself so I think that's pretty cool I think that's pretty cool so now the the things that we need to do now let's recap so the thing that we need now are um to make that um to make that um that app dynamic in a way where we store those pizza within our database okay uh and we display them right here uh and create this little cart uh system right so that's what we are going to do right now and I think after that we're going to be pretty much done let's let's do a little break and we'll back at it again all right guys so let's finish this app shall we so now we have everything that's supposed to be where it is um but it's not Dynamic for the pizzas right um we could have a dashboard that's perhaps a flout web app something like this to be able to create that and do tell me in the comments if you want to see that I can make another part where we create the admin dashboard to add piz that and everything but for now we're just going to add uh those stuff by hand okay so before we add them by hand I want to create the pizza repository okay so the pizza repository is going to be the same in a sense where we're going to have the same uh architecture as our user repository all right so let's create that under Pizza repository leap we're going to have a source folder as well as a file that's going to be called uh Pizza repository do Dart okay so under Source remember entities models and uh two other files uh that we have so uh so Pizza repo Dart and fire Base pizza repo Itor Firebase pizzaro D Okay so we've created those files so now we are going to create the entities Dart and the pizza entity do Dart and under models we're going to create models. Dart as well as pizza. Dart so first things first let's create our pizza class class pizza so we have a few parameters for our pizza so we have the uh Pizza ID which is going to be a string Pizza ID we have a string that's going to be the picture okay we have um a bullet is veg we have uh an integer that's going to be spicy we have a string that's going to be the name a string that's going to be the description um an integer that's or a double yeah double that's going to be the price um a double that's going to be the discount and a list of macro macros that we're going to call macros and this macros as you can see here is a custom class that we are going to create uh ourselves so that's for the pizza class okay so I'm going to create the pizza class on my own uh and well I mean you can stay here now that we have a two and almost three hours long video it's not the time to cut Corners right so let's go all the ways and for the people already here I'm most likely talking alone so uh we're going to have this. pizza ID this I can go way faster than that up T paste that here okay so that's for the Constructor of our pizza class okay uh now we need um we need two things we need the two entity and the from entity method remember so I'm going to take so from this I'm going to take the me the methods all right so it's not going to be my user entity it's going to be Pizza entity here so we'll replace my user entity by Pizza entity and it's not my user but Pizza okay um and for the parameters well they're here so we're just going to take those and uh paste them right here okay all right and we're going to do the same exact thing for the from entity method up entity. okay good um so now we need to create the pizza entity shall we we're just going to take that and create here inside Pizza entity class up Class Pizza entity that takes the same parameters and sorry Pizza entity like this and now uh exactly as the same that we did for the user entity we need to create the two document and the from document method for this pizza entity so I'm just going to paste that right here um and so it's not a my user entity that we're returning for the from document but a pizza entity and uh let's copy those parameters and we are going to have some something interesting to do with the macros because it's a list of of of objects right so we need to make it a little bit different in order for Firebase to accept that thing right uh so now let's add the quotes Okay like this perfect so this is not going to work as is but we'll come back to that at the end so now we have the same thing to do for the from from from document okay uh so except it's dock all right uh it's not that did I uh did I miss something what's happening uh yeah of course my user entity my user entity Pizza entity Pizza entity the name Pizza ID isn't defined what did I do again let me check that up yes I am obviously tired it's because I didn't put the curly braak bracet uh here on the Constructor so you can't do what I did uh but I am doing it now so that should be good to go up required and that should be good perfect uh okay good uh so as I said here because we have a list of macros we're going to create the macros class right now uh we cannot just put this list of object right there so what we need to do is say map so here we have an object of type micro okay and here we're going to say e.2 but we're going to create the macro class first and then we're going to come back to this okay so under models here we just create a new file um uh macros do Dart we're going to create class macros and this class macros um it has an integer that is calories an integer that is proteins proteins an integer that is fat and another integer that is carbs okay so let's create the Constructor of that thing okay so required this dot up okay um and that's it for this class I don't think I need anything else really uh no I don't think I need anything else so what I'm going to do now within the models. dart is export macros do Dart as well as exporting uh pizza. Dart I'm going to do the same for entities uh I'm going to do the same for entities export uh Pizza entity. Dart so uh let me think let me think I need um I need here a new yeah of course for macros I need the I need the same stuff I need the two entity and the from entity methods so I'm just going to import that thing sorry here in pizzas I didn't put the curly bracelet neither uh so I'm gonna add that thing right now in the pizza class okay good um and I can import micros as well okay so let me close everything up so you understand what's happening so we have a pizza class okay that takes some parameters and the list of macros which is a custom class that we've created right here so we need to finish that class that class requires a two entity and a from entity method as well all right so we're going to just paste copy what we've done already and just say micros here micros entities instead of pizza entity and here instead of pizza macros and the parameters that we have are calories fat and carbs not all of those things so we are just going to paste what we have hold on yeah paste what we have took that thing in okay perfect um up a great um okay and uh we're going to do the same for the from entity method and we're going to add the entity keyword to it wow I'm starting to get tired entity dot okay so now let's create the macros entity okay so under entities we're going to create a new file macros uncore entity Dart and we're going to paste what we have but instead of micros we're going to say micros ntity okay micros entity paste that here as well okay good amazing so now within the macros do Dart we can import micros entity um and we need those thing otherwise that's not going to work is it perfect effect okay save that up and now the macros entities we need as we had here a two document and the from document Method All right so we're just going to create that and we're going to apply it to our four parameters right so uh okay and we can just delete the rest of this thing okay good and uh here oh my God okay good and four and delete the rest of it okay and it's not pizza entity it's macros entities Micro Entity okay good so now we we have everything still recording still recording amazing So within our pizza entity now we can also import micros good and what I told you earlier is here in our pizza entity we need we have a list of macros right so here we have macros okay and we need to put that within an understandable way for Firebase to to to store so we're going to say he e so e is the macro itself okay perhaps I rename that macro so you understand macro and here I say macro which is of type micros okay do two entity dot to document okay and that's going to take our because we're mapping it it's going to take every item on the list and map it to a document to a two document uh format and it's the same that we have from document right because here we are getting a list of something that is a a map right so we want to get actually a macros from it a list of macros right so we want to say something like Doc macros do map um something like this I think uh macros do from entities macros enti enties Micro Entity from document and here we say e dot yeah just E I think something like that could work uh we need to test that though but we'll test it uh soon enough so we can save all of that things and we have created all of the stuff that we need uh in terms of classes so we have the pizza class and we have the macro class uh there is perhaps one more class that we need it will be the cart uh the cart class yeah that would be a sub collection of a of a user I think that's how we want to play it I think that's why we how we want to play that thing uh let's first import some of the the stuff that we have within Firebase and then um and then we can start wondering about the um about the card so here we're going to create a new collection that will call pizzas going to say Auto ID and here I'm going to take the parameters that uh We've uh We've settled settled on earlier on right and we're going to just create those things right here so the pizza ID is going to be the same as the pizza itself okay and now we're going to add all of the fields that were that are inside our um our class and we are going to do that for each pizza so I think I'm going to add four pizzas okay and then I'll be back with you but I will just spare you the time and I will just get you when I'm done all right so that will look something like this okay so we have the document ID and I've added all of the different fields that we've uh set in our uh object okay except for the picture because I will put them in the storage and then I will get the URL from there um and then I've just added some dummy data to it the discount here I set to 10 10 because we're going to say that it's a percentage okay so we're going to take 10% off the 12 euros as the price and here I've made a little mistake in our uh class creation because macros have said that was a list of macros but it's actually not a list of macros it's really just macros right because it's a map in of itself containing all of the information that we want otherwise I should have put it put a list straight up up instead of creating a new object and so that looks like something like this so I can just go ahead and save that and I have a new collection uh that's called pizza and here I have my first item within it okay and the thing I was talking to you about is um the here our pizza and pizza entity class so here we don't have a list of macros actually but we just have macros okay and that's the same for The Entity right here it's not a list of macros it's just macros and uh that's going to have an impact directly here because then we can just say say macros two entity the two documents uh and here we can just say exactly that macros from entity uh and here access the doc dot uh well macros parameter okay okay so that's the only changes that you need to make to the classes but yeah in the database we have that so I want to just go ahead and show you as well on the storage sites how we're going to do that we can do folders subfolders but we're just going to be uh be quick about it and take the pictures that we added to our um that we added to our um how do you say that yeah to our um app to our asset folder earlier on here I have six and I'm just going to well you can't drag and drop them here can you so I'm going to have to upload file here and I'm going to go design and then I mean that's the stuff I have and take the and take all of them and 1 2 3 four five six and they're here uploaded so now I can just copy the link of the address okay and within my database under the picture here I'm going to paste the URL which will we will access within the app okay so I'm going to create I think two more uh pizzas right here uh off camera right now and then we are going to put them within our app okay let's do that all right so we have three Pizza created I'm not going to create more that's just taking too much time of me but yeah you see all of the there we have three documents so you can create create those by hand as well and uh or create a little uh website or a little app where you can enter those the information as well but for now that's what we're going to base ourself on uh in order to display those things within within uh our app so let's get back uh within the app itself and here now we need to uh create some methods in order to uh to access those things so so they are going to be within the pizza repository so we need to say first in the let's close everything uh within the uh Pizza repository. Dart we're going to say library and this is going to be uh Pizza uncore repository all right and here we're going to export Source SL entities entities. Dart export Source slod models. Dart export Source firebat Pizza repo and Export Source SL pizz repo okay same as the user repository now under Source uh we're going to create the pizza repo so it's going to be abstract Pizza repo as abstract class sorry Pizza repo okay and with in here we're going to create all of our different methods and here we're going to say class Firebase Pizza repo extend or Implement uh Pizza repo okay just like that and we can save that thing okay so here on the same stuff that we had here our user collection in our far Base pizza repo we're going to create uh not a user collection but a pizza collection okay and we're going to need to import uh fire store uh but first it's going to called be called pizza so now we need to import Cloud fire store within it so inside our perspect that yo file inside the pizza repository we can just uncommon Cloud fire Cloud fire store save that go back to Pizza repository and import that package save it so for now we need we need a few methods so we only need a getting methods okay so we're just first going to create it here and we're going to add it to the pizza repo later on but it's going to be a future okay a future that's going to give us a list of pizza okay uh we're going to call it get get pizza get pizza and that's going to be a synchronous okay uh going to do a try catch on it and if there is a problem I'm going to log the problem so I can see it in the console and uh okay import developer and rethrow the exception so the block can catch it uh what do we want to do here we want to say return await Pizza collection my God okay Pizza collection do docs doc or pizz collection doget uh Den okay so now we have a list here we have a query snapshot okay so we are requesting the entire Pizza collection okay so now what we want to do with the value we want to say well value do docs uh Pizza collection yeah pizza collections. getet then value. dos. map okay and here what do we want to map well we want to map um Pizza no sorry pizza. from entity pizza entity. from document and that's going to be e. data okay and we want to say uh that we want a list in the end so we want to say two list and that's just that's just the method right there to get all of the pizzas that are within our um our pizzas collection in our fire store okay so now we are going to create try to get that thing here okay so we have a list that's actually Dynamic so we should have three items right there right so before we do that we need to actually get the method that we just created and add it to the abstract class okay need to import models okay and save that so now we need to create a block so we need to collapse everything navigate to the lib folder now screens home blocks here we're going to create a new block that we're going to call get pizza okay we have our pizza I I'm going to call it get pizza block okay so event States and block so the event is going to be a class okay and we're going to call that class get pizza and that's going to extend our sealed class which is get pizza event okay and we don't need any parameters for it now that's fine the state uh that we have is going to be uh get pizza so first is going to be sorry get pizza fail failure loading and success and if the state is success I need to have a final list of pizza okay that will call pizzas okay and uh we will add that to get pizza success say this. pizzas okay and we can actually also Implement those things inside those right there and here you see it doesn't recognize this pizza because inside our main PPC that yo file we need to import exactly as the same as we imported our user repository we need to import our pizza repository so it's going to do that right now and if I go back here I can normally now import the uh Pizza class and it's going to recognize it that's exactly how it works now okay perfect so now inside our block here we want to implement our get piz okay but first we need to have um a a pizza yeah a pizza um repository pizz repo pizz repo make it private okay this do Pizzo and uh what I want to do here is put the asset sync keyword okay and do a try catch as we've done already a million times emit if there is a problem within the catch um imit what uh get pizza failure before the try I'm going to emit get pizza loading all right and within the try I'm going to emit if everything goes right get pizza success but here you see it requires the list of pizzas we're going to get them so here list of pizza pizzas is equal to a weit pizz repo do get pizza and that's it for our uh like that thing final that's it for our uh get pizza Block it's done okay so now we are going to pass it to our UI in order for our UI to respond to it okay so um within our here our app view we previously provided a block provider with the signin block but we actually need a multiblock provider okay so we are going to change that multiblock provider okay and the second block provider is get piz block okay so the get piz block needs a Firebase Pizza repo okay we don't have any objects for that yet so we can create one but what we want to do straight up here is pass um um yeah add uh an event to the blog provider okay and you need to make it double dotted and they say get pizza okay so we can have the response and use a block Builder within our home screen straight after okay because it's the parent and you you do you trigger the event always in the parent all right so now I what I can do is go inside the home screen right here and inside our body here I can wrap my grid view okay I I would I would say yeah I can grab my let's make it simple I can wrap my grid view with the block Builder okay get pizza block okay and of type get pizza block get pizza State and here I can say within the Builder if the state is get pizza success okay I can return my grid view okay so I'm going to scroll down to the bottom of of my grid view up and say that right okay good but if the state is different I can say else if state is get pizza loading I'm going to return center child circular progress indicator meaning that uh the data is loading right and I can say else if it's failure or something and return center child a text that will say an error has occurred just something like this and you could add a button to say uh retry or something like that but we're just not going to do that so for now an error has occurred okay so that's because something somewhere is not going right okay but that's fine here we can say we need to say that that our inside our grid our grid view the item count is equal to state. pizzas. lengths okay so now let's see what's going on we have a problem somewhere the int is not a subsite of double okay so now we know that uh inside our packages Pizza repository Leb Source models and entities we have some problems because I've put some doubles so here now I'm going to put some integers instead of our doubles so that's for the pizza the macros is fine and the pizza entity here I'm going to replace the double with an integer and the double with an integer and I'm going to reload everything and that's pretty cool we see that we have three um that we have three uh three card and so now we are going to make our grid view Dynamic all right so the the picture first first things first the picture so here we are utilizing an image. asset okay now we're going to make image. Network okay and we're going to call states. pizzas access the the integer so the the index of the one that we are in and access the picture parameter and if I save that you see that we have three different pictures now so that's pretty cool so I'm going to copy that and save it for later on so here under that we are nonv G or V okay so here inside the text widget we can say we can access the is V parameter which is a Boolean and if that is true then we can say V and if that is not true we can say non V just like this okay and here I'm just going to say the all right and I don't need that to be constant because it's not anymore and if I save that see V non V non V but what I can do as well is take that thing and apply it to the color all right because we have our box decoration right here right and what I want to do for example for the color here is say if the state. pizza is V then I want it to be green otherwise I want it to be red okay okay just like that if I save that V non V non V all right cool that's starting to look like something um let's continue so the the U the spicy stuff so now we have the spicy stuff so the text is only the thing that's changing so uh it's either going to be for the text uh let me take the design out so it's either either going to be um blend spicy or balance okay so now we're going to do the same thing if uh state do pizza e so the index dot spicy is equal to one so that's how I build it it's either one two or three so if it's equal to one then we are going to say something else if state. pizza. spicy is equal to two then we're going to say something else else it's it's going to be three anyway so we're going to say something different as well so we say if it's one it's blend if it's two it's Balan if it's three it's spicy okay good uh what's happening yes constant goes away up save that spicy blend and balance perfect right and we can do the same as well for the colors uh we can say uh that this thing is going to be up we can retake our statement right there for the colors and say that uh uh if it's equal to one then we have colors. green okay if it's equal to two we we have perhaps an orange and if it's equal to three we have a red accent or something like this yeah see spicy blend and balance all right that's pretty cool and we can have the same thing for the uh the green opacity right there but you get the point I think how it works um so now the next thing we have is the name so same stuff state. Pizza we access the index and here we get the name we need to make that not constant anymore the Beast cheesy Marvel and the classic perfect uh next up is the description so instead of having this we can remove that and say description right there save that and you see that the description changed perhaps you want that a little bit bigger so you can see more I would understand uh so the description now the last thing that we we have is the price all right so uh here um I've escaped dollars I don't know why it went away but basically what we have right there would be the price right so here we would say uh something like state. pizza. price all right so we have the price of the pizzas right there but here under that we'll have the discount okay so actually the price since I've made it a discount so a percentage so we have a pizza that is like 10 okay but minus 10% which would be the actual displate price in blue okay so the price is here actually so here we have our price okay I can just take that and put it right there because that's the real price of the thing okay so that would be $112 $14 and $10 but we are saving 10% we are saving our discount from it we we don't put it anywhere here but we actually could like add an icon minus 10% something like this but here so we have € 10 minus minus 10% uh and so we're just going to implement that as well so here um so we're just going to say that is our discount divided by 100 so I think that should work right so we have our price times state do discount divided by 100 whoa whoa whoa whoa uh let me check that up let me check that up all right sorry so exactly that so we have our state. pizza. price minus state. price times the discount divided by 100 so that will give us $9 for the classic 12.6 for the Beast and 10.8 for the Marvel right so now we are fully Dynamic on this screen so well done that's pretty cool and that was the end of it for that uh so now the next step is to make the um the detail Dynamic so the detail screen so we can close that that app view as well this as well this as well and we can open the detail screens. Dart here and what we're going to do simply here is just say because we already gathered the information we're just going to add here a final parameter that's called Pizza okay we need to import the repository in question and add this to the Constructor and here inside our home screen we are going to need to when we click on the material app wherever that thing is here uh to add the uh state. pizza and the index itself and remove the constant to give the pizza to our detailed screen and here we can as well then uh utilize the network. image right there so instead of asset image Network image okay and here we're going to say widget dot we don't need to say widget it's it's a stateless widget so we can just say pizza. picture remove the constant that's going to be the right picture um we can just say for the name which is somewhere here up pizza. name remove the constant add some more constant for the price it's the same stuff so here we'll have the pizza. price two string it's another way to do it I prefer I prefer the uh the way that the way that we did here actually so we're just going to take that up right there up to the price Che remove the state just say pizza price invalid constant value you got it okay and for the actual price we're going to take exactly what we just done on the home screen and put it there but removing uh state. piz okay removing state. pizzas and the I right save that up all right 10.8 makes some sense okay good uh and the last thing that we can do here is access those values so here we can say pizza macros right do calories remove the constant value right there uh and uh do the same thing for the protein right here proteins for the fat and for the carbs all right add some constant value and you let's see that the values changes if I've done my stuff right taking a picture that's not what I wanted to do uh all right so we have that the Beast yes 312 calories 260 yeah everything is working dynamically now and that's amazing okay so everything works fine so the last thing that we could eventually do is the card system but we are 3 hours and 30 minutes deep inside this video this tutorial already and that's not really important so if you want to see uh perhaps a part two of this video where we create the card system as well as perhaps a flut web app to add new pizza dynamically on a website cre created with flut linked to Firebase we can do that but for now I think it's pretty straightforward if we uh if we look a bit at all the work that we did we've created an authentication and uh system so with sign in and sign up so we can authenticate ourselves straight up within the app we are redirected to the homepage of the app where we have displayed dynamically several items from uh Firebase which are here okay and we can click on those item have a details and even more information from those things and uh and log out if we want so that's pretty cool I hope guys that you um that you've enjoyed the video it's been quite uh the longest video I've done on my channel really so it's a it's a big deal for me I think I will slice that video up in several parties in order in several parts in order for for it to be more understandable but I will drop uh a full three hours and 30 minute long video there so you can go back see it I will link the code within the first comment of the um of the video and uh as well don't don't forget as I mentioned at the beginning of the video looks like feels like a decade ago uh to join the school Community I will put the link as well first link in the description is free and um and yeah I'll see you there and uh I'll see you next time thank you for watching and uh yeah bye-bye bye-bye guys