📱 Food Delivery App w/ Backend • Flutter Tutorial

[Applause] yo what up welcome back to another flutter tutorial in this one I'm going to show you how to code up a food delivery app with backend so I'll show you how to implement the authentication to register and log in your users and then they can browse through a menu and maybe select some food add-ons and then the user can add it to the cart and then from this cart the user can change the quantity amounts and things like that and then finally go to the checkout page where they can put their card payment details once the payment is complete then the user will be sent to this waiting page with the receipt and then this order will then be sent to the backend database with live updates this is a really good one so like And subscribe as I'll be making more apps like this also if you want to download the full code is linked below now just to show you a bit of an overview of what we're about to create this is pretty much all of the pages and how they're connected to each other so firstly we're just going to check the login status and if you're not logged in then we're going to go to the login page which you can also go to the register page to sign up but this authentication will then bring us to our homepage which is where we can see the menu of the restaurant and from there we can go to the food option and add it to the cart can also go to some settings Pages where we can log out as well and we can also go to the card page and then finally we can pay and go to the checkout and things like that so this is going to be the overview for what we're about to code up sweet so if you're ready let's get started so I've opened up a brand new flut project and just to keep everyone on the same page in my main function I'm running my app and currently we're just returning a login page and if you go to our library I've got it organized in a Pages folder so this is just going to return a blank scaffold which should just be a blank white app so we'll just begin our code from here now the first thing I'm going to do is to just create a new folder themes and we're going to set up the colors for this app so just starting with the light mode I've already selected the Shades of Gray that I like to use so you can change these colors to your own liking I'm going to create doc mode as well and then I need a new file for the theme provider so this will help switch between light mode and dark mode and it'll also be useful to have another get off for if it's dark mode or not and then let's create our setter and the main method here is the toggle theme so if we are currently in light mode then let's change to dark mode and vice versa cool and by the way just for some simple State Management I'm just going to use provider so let's open up our terminal I'm going to say flut Pub add provider so if you come back to our main function we're going to just wrap our app in a change Notifier provider and we're going to give it our theme provider cool and then if you come down to our material app in the theme section let's just access that provider and just return whatever the current theme is sweet so if you come to our login page for the background color so instead of just specifying a fix color like gray we can say go to the theme and we're going to go to our color scheme and this is where we can access all of those different colors so I'm just going to use background for this so coding like this makes it really easy later on because if you need to change any of these colors you can just come back to the light mode and dark mode file and change it here so in the scaffold of our login page let's create a big column and let's have a bit of a plan at the top I want to have a logo and then maybe let's have like a welcome back message we need a email text field a password text field now when it comes to the text field we're going to need to use this text field multiple times so for that I'm going to create a new folder called components and in here I like to just store my custom widgets so for example like my text field I'm just going to create my own version so between the text fields we need to know the controller and also the hint text as well as the Obscure text so I'll show you what each of these are doing so let's give it the controller and the Obscure text and for the decoration I want to have a border and we're going to have two borders so enabled border and focused border so just to show you here if I come back to my login page we can now start typing my text field and you can see we can import that and so we need to give it a controller so let's come up to the top and create these text editing controllers so one for email one for password and whoops looks like we have a bit of a problem let's just get rid of this and sweet so you can see there's our text field with the nice border and if you click on it it'll be focused so that's where we have the two different borders so let's add some padding on the horizontal and you can see the hint text is what's written in the background to let the user know what should be typed in this box so I'm just going to change up the style and we can do the same thing for the password and for the password let's set the Obscure text to be true so that we'll hide the characters cool and then we're going to need a signin button so similar to the text field I'm going to create a custom button so that we can reuse this and so between buttons I just need to know the ontap function as well as the text cool so let's come back to our login page and we can use my button I'm just going to say sign in and for now let's just execute nothing and there it is so let's just decorate this up I'm going to put some padding and some margin and the decoration let's make the Border radius curved as well cool and then lastly at the bottom I'm just going to have a row of text widgets so this will give the user the option to go to the register page so I only want the register Now text to be taable so I'm just going to wrap that in a Gest a detector and let's actually require this on to at the top cool so now what we need is a register page so this will be very similar to our login page so I'm just going to grab most of this and in this one we just need another text fot for the confirm password and let's just change up some of this to be the register page and sign up instead of sign in and at the very bottom we can say I already have an account then log in here and so we can click on this to go back to the login page so we want to either show the login page or the register page right so we need to find a way to sort this out so I'm going to create a new folder called or for the authentication and create a file called login or register do Dot and so what this page is going to do is we're just going to initially show the login page and we're going to just create a toggle to toggle between the two pages so in the build we can say if share login page is true then share the login page and you can see on this on toap we can trigger the toggo pages method else same thing for the register page and then if you come to the main do do file instead of displaying one or the other we can just say login or register and so if I just restart this and I save it you can see initially we're going to be in the login page but then if I click on register now we can go to the register page and vice versa cool so now that we can go back between the login page and the register page now let's try to click on the signin button and go to the homepage so if you have a look at our signin button you can see in the ontap it's currently just doing nothing so in here now what I'm going to do is let's create a method called login and so what we're going to do is we're going to fill the authentication and all the backend stuff in the second half of the video so for this I just want to focus on the UI so we'll fill it out in just a second now what I want to do is if we do log in and we're authenticated then let's navigate to the homepage now we haven't created the homepage so let's do that right now and just to know what this page looks like in the scaffold I'm just going to have a app bar so let's try this out so I'm just going to refresh this and if I click sign in then yes we get to this home page now the next thing we need is a drawer so in this menu drawer I'm going to have a separate file called my drawer in our components and so let's give it our background color and I'm going to have a big column so let's put the logo on the top and we're going to have three list ties so home settings and also logging out so just to see what this looks like as we decorate this along in our homepage let's give it my drawer so import that and you can see that the logo is at the very top so what I'm going to do is I'm going to wrap this in some padding there it is and also maybe we could make it bigger and just change up the color cool and then we're going to use a divider here just to have a nice line and below that we're going to need a few list tiles so because I'm going to have three of these I'm also going to create another component just to make your code nice and organized so my drawer tile now in each drawer tile I just want to know the text the icon and also the function so if I tap on it what's going to happen e okay so let's come back to our drawer and import our drawer tile and let's fill this out so we want home for the first one and there it is and we're going to create a few more so the next one is for settings and then by the way I think we could use a bit of padding on the left yeah and then the last tile is the log out which I actually want it on the very bottom so what you can do is in between these two guys you can put a spacer and that will just fill up all the space in between and maybe we could just add some space on the bottom too cool that's looking pretty good so if I click on the hom less tile let's just pop the current page so it'll just so it'll just get rid of the drawer and for the settings I want to go to the settings page so firstly we want to pop the drawer first and then let's navigate to our settings page which we haven't created so let's just create that right now and make sure to import it and so I can go home and now I can go to the settings page so when it comes to the settings page I'm just going to have a column for the switch so I'm going to have a dark mode light mode switch and I'm just going to use the catino switch cuz I like the iOS look and so I'm just going to decorate this up to my liking maybe put some decoration in this container and make the corners bit more curved and this app bar I'm just going to make sure the background is consistent and sweet let's space this out between cool so you can see on this switch right if it's false it's what it looks like right now and then I can change it to true and then it's going to be an on switch so this should be depending on if we're dark mode or not right so for the value we can go to our provider and we can go to our theme and remember how we created that method for if it's dark mode or not so it's just going to return a nice Bull in just true or false and then for the unchanged we can then go to the toggle theme method so let's try this out if I refresh this and I go to my settings page and I click on this do mode you can see it's going to change everything to dark mode so let's come to the homepage and start decorating this up now I want to have a fancy app bar for this app so it's actually called a sliver app bar now to make our code nice and organized I'm going to create a separate component and let's create our sliver app bar in here so for this app bar all I need to know is I want to know the child and also the title so let me show you how to code this up so if you start typing slver appar let's just start by giving it a background color and give it the title and then the most important thing here is the flexible space and I'm going to give it the child so if I just show you here if I come back to my homepage in the body let's use a nested scroll View and in the header sliver Builder we can return our my sliver appar and let's just fill out the child and the title and it's still got a red squiggle and if I hover over this it's because it's requiring a body so let's give it a body and just to see what's going on I'm just going to put a blue container and if I save this you can see this is currently what we have now we should actually get rid of the normal appar and then this is our sliver app bar here so you can see if I scroll it kind of does some effect now if I come back to my sliver appar you can actually control this expanded height and so we can control how much the app bar can expand to another thing you can control is the collapse tide and a couple more properties I like to make the floating false and what that means is you're just it's going to have to scroll to the very top to get the app bar down and I also like pinned is true so if I make this true no matter how far you scroll up the app bar will always be pinned at the top so you can play around with this and now for the actions I'm just going to put in a cart button and so let's give it the title and then I want to send to this and let's add some padding now one thing I'm going to do is in the child let's create a column and so what I'm going to do is add some padding on the bottom of this child and we're going to have a couple things here so my current location and also a description box so let's just start with the divider here and for the current location I'm going to again separate this out into a new component and so this is just for the address so let's just put in a fixed address right now and then we're going to have a drop down menu cool there it is and I'm just going to change this cross access alignment to be at the start and let's just decorate this up a bit cool now the address I'm going to wrap this row in a gesture detector because I want to allow the user to enter their own address right so open location search box let's create this method right now so I'm just going to show a quick dialogue and this will open up a small box and we're going to say your location and then in the middle we're going to have a text field so that the user can type it in so let's try this out if I click this then you can see that it's going to open up this box we can type an address in and we need some actions so we need a couple buttons here so cancel and then save so cancel I just want to pop the box and then saving I want to pop it now for the description box so this one I just want to have a basically a container just kind of describing the delivery time and stuff like that so in the child I'm just going to have a ver for the delivery fee and the delivery time cool there it is and let's just find chain it a bit that's looking really good okay now for the main part of this app we need a tab bar now I've created a separate tutorial on Tab bars but I can show you real quick how to do it now so in the components let's create our new tab bar and so what I need is I need a tab controller and let's start building our tab bar so with the tabs we need to have a list of widgets here and you can see it's typically a list of two or more tab widgets okay so just to show you how this works we can say first tab second Tab and so in the title for this sliver app bar instead of just saying title I'm going to actually put in my tab bar we're going to need to create a tab bar controller at the top and so in the initial State we're going to create our tap controller and we actually need to change this to say with single ticker provider State mixing so this will allow to use the tab controller and then we can give it to our tab bar so if I just save this you can see we got our two tabs so the home and then the settings cool and then I can add a third Tab and change the length three and nice so this is how we use tab bars so now we can put something in the body right so for this we need a tab bar view okay give it the controller and for the children we're just going to say let's say hello for now and you can see each of these three widgets goes into each of the tab bars so what I'm going to do is for the first one let's just create a blank list and you can see in this way we can create three separate tab bar items okay so now that we got that working for us what we need is we want to populate this with some food items right like our menu so I'm going to create a new model called food and just think about what a food is so we're going to create a class here a food is something that has a name we need a description I also want to have the image and also the price of the food and the other thing is I want to have some categories so there's going to be five categories that we're going to have and we're going to use enum to create these categories so Burger salad side dessert and drinks and the last thing is I want to have some add-on on for each food item so we can create a add-on class here just saying the name of the add-on and then the price of the which means if I come back to my food class let's have the category so is this a burger is this a salad and then let's also have some add-ons that this food could potentially have so just to show you as an example one example of a food is we could have a cheeseburger and the description so a burger full of cheese and then the image path so it's going to be something like Library SL images SL wherever we put the image and then the price could be like $4.99 and then the category could be begar and then some available add-ons for this could be extra cheese you know sauce extra Patty things like that so this is just an example I mentioned about those images before so I've got this folder of images that I've already prepared so you obviously don't have to use these exact images you can bring in your own ones but hopefully you get the idea of this also by the way if you do want to use my images you can download my entire code you can get the full code base with all the assets and images involved so download that from my website but like I said just grab any images and organize them into folders like this so I've got Burgers dessert drinks salad and Sid so now what we're going to do is if you open up your project go to your library and I'm just going to drag my images folder in so if you go to your pops. Yama we have to tell it that we are bringing Assets in so go to the bottom and let's comment this out and we have pretty much five folders that we want to bring in so Library SL images burgers and then the other ones as well and so you can see here is our images awesome now it's time for the main part of this video which is we're going to create a new file of the models and we're going to call it restaurant dot dot so this restaurant class is going to pretty much organize all of the functionality and the logic for this restaurant so just starting with the list of food menu we're going to have Burgers salads sides Desserts and Drinks and so as an example we can create a food and we have to fill out all of this right so I'm just going to start off with my first one the classic cheeseburger and just give it a description and then the image path was Library SL images beggers and then cheeseburger. PNG make sure the naming is exactly the same as your file let's give it a price 9 and then the category is the burgers and let's have some available add-ons cool so this is an example of one food item in our menu so what I'm going to do is I'm going to go through all of them I'm going to create basically five for each category okay so I want you to go through and just create as many food items as you want so I've got some burgers and then I've got some salads and then I got some sides and then I got some desserts and finally some drinks so create your menu like this and then once you've done that we need to do some functionality so we need some Getters we need some operations and we need some maybe helper methods at the bottom so I'll guide you through how to do this now the first gar we're going to create is a way to just get the menu and when it comes to the operations let's just write out all the operations that we need to do so first thing is to add to the cart and then we need a method to remove from the cart and get the total price of the cart and also let's get the total number of items in the cart and lastly let's also have a method to just clear the cart cool and then just a couple of helper methods that will help us out I'm going to need a method to generate the receipt so some of this stuff I'll explain more when we get to it cool so if I come back to my tab bar you can see here we've got the three tabs so what I'm going to do now is I want to make each of these tabs to represent the category of foods so like Burger salad all of those categories so let's just create here a list of tabs I'm just going to call it build category tabs and we're going to return all of those food categories and then we can convert this to a list and just give it to our list of tabs awesome so oops looks like we have an error because we should come back over here to our homepage and change up the number like the length to be five or more specifically let's just say the food categor is length so however many categories we have and also in our tab bar view we have five items so let's make sure to just copy a couple in to make sure we have five lists here okay so if I just save this then you can see in our tabs we now have it organized into the categories of foods awesome now let's try to put in the actual food items in this list so similar to how we built the category T TS I'm going to need to sort out a list of food items that belong to this specific category so I'm just going to create a method here called filter menu by category just as a couple of parameters I just want to know the category and then the full menu as well and so what I'm doing here is I'm just checking I'm going to go through the full menu and for each food I'm just going to check the category and make sure it matches to the category of the tab okay so in the burgers we just want to show the burgers and the salads we just want to show the salads cool so once we filtered that out let's have a method to return the list of foods in a given category and so all we need to do with this is just accept the full menu as a parameter and we're just going to map each of the food categories and return the correct menu items e awesome so if I come back to my tab bar view you can see in the children I'm going to just say get food in this category and we're going to need to give it the full menu I'm just going to wrap my body here in a consumer widget to consume the restaurant data so I'm just going to return that same tab bar View and now we can have access to our restaurant's full menu so let's just save this and run it again now I just realized we didn't include the provider State Management so if you come to our class restaurant we just need to extend the change Notifier and in our main function you can see we've got the change Notifier provider for the theme but I want to have it for the restaurant as well so to do this we're going to need a multi-provider and so one for the theme and one for the restaurant awesome and then so if I save this and I go back into my app you can see in each of our tabs we got the correct categories and currently we're just displaying the name of the food that's good that's the hard part so now we can just sort of decorate this up with some images and the price and things like that by the way there's a little bit of space at the top of these lists so I'm just going to put the padding and make it zero at the top there you go and now in our list tile I want to decorate this up further now before our code gets to long and complicated I'm going to separate this out into a component and make it called my food tile and so as long as we know what the food is which is what we're going to require we can then start to decorate this up and so let's actually also have an ontap method and I'm going to create a big column here and just use a row and I'm just going to lay out the name of the food the price and then this description and then also on the side we want to have the food image so let's come back to our homepage and instead of this let's just return our food tile and give it the food and so if I just comment this out just to make it a bit more clear we can get the individual food by going through the categories menu and just going through each index and then we can return the food tile cool and then for the ontap let's just execute nothing for now so we can see that it's currently the image is too big so let's see what we can do to fix this up let's maybe give it a height of 120 and that's looking pretty good so far now I can see the column of information I want to make this cross AIS alignment to the start much better and I think we could use some padding and I'm just going to decorate this up a bit so when it comes to the food price we just want to add a dollar sign and I'm just going to style up the colors for each of these text widgets cool it's looking pretty good now when it just comes to the image it's a very sharp Square so my favorite widget is to wrap this in a clip AR wct and that will just Corner the borders a bit and beautiful now I think it might be a good idea to just add a divider at the bottom I really like dividers so this line in here but just make it a bit more subtle make it a bit more light so so now that we have a good menu here we want to make the user allowed to touch on each of these tiles and then navigate to the food page so let's create a new page in our Pages folder called food page and this one is just going to have the details of the food and we can have some add-ons and stuff like that so again we just need to know what the food is so let's just require that and then let's return a big column and at the top I just want to have the image and I just want to see what this looks like as we decorate this up so if I come back to my food tile you can see in the ontap is currently executing nothing so if I tap on this let's go to the food page okay so let's save this and if I click on a food then we can go to the food page and there it is so I actually forgot to even put this in a scaffold so let's just do that so we got the image at the top and then we got the name the description the add-ons and then we want to have a final button just to add to the card so let's just fill this out now for the list view we're going to need the add-ons here and let's just use a checkbox Tile Co if I save it looks like there it is just coming along nicely we have three checkbox tiles so let's just comment this out to make it a bit more clear so I'm going to go through my add-ons and let's get each individual add-on first by going through the index and then we're going to return the checkbox tile UI cool there it is let's add the price on as well and the cross AIS alignment I always like to make this to the start now I feel like everything below the image we can wrap it in a column and so whoops I should put the cross a AIS alignment on the other one and let's just put in a padding on the overall column e just for the add-ons I just want to put another container with a border around it just just to make it look a little nice in its own section and that's looking pretty good and we should add the dollar signs to the prices and at the very button we are going to use my button for the add to cut cool now it looks like we are running out of space which is why we have this overflow problem and so what you can do is just wrap your column in a single trial scroll View and so that will just make it scrollable well and just to finish off I'm just going to add some sized box some space at the very end and this is our food page and it's looking pretty good so obviously we need to check off these boxes which is what we need to do now and so on each food page I'm going to create a map for the selected add-ons right so we have the available add-ons and then we got the selected add-ons that the user actually wants so what we're going to do here is we're going to initialize the selected add-ons to be false so obviously nothing has been chosen at the very beginning and then if I come back to my checkbox list tile you can see for the value it's going to be a Boolean so false or true and so this value is going to depend on our selected add-ons list cool so let's save this and refresh it and let's make sure that we can tick these off so that's going to be on this onchanged method we're going to accept the Boolean value so if it's on or off and then we can set the state to just update the value and there it is we can start checking these off now from this food page if you slide back you can actually go to the previous page but I actually want to have a visible back button so what I'm going to do is you can just have an app bar here and you can see that create that back button automatically but I want to make this look a little nicer and more fancy so kind of cool trick I can show you is I'm going to wrap this entire scaffold in a stack and what a stack does is it just allows you to stack multiple widgets on top of each other so let me just show you here so I've got the scaffold and then on top of that I'm just going to have a back button let's just put a container and then I'm going to use a icon button and so this one for the functionality is just going to be Navigator dop so it's just going to go to the previous page and you can see there is the button on the top left firstly you can wrap this widget in a safe area to make it kind of avoid the notch po I'm going to add some margin and I'm going to curve the borders actually I'm just going to make this a circle and what I'm going to do another cool trick is you can wrap this in an opacity widget which makes it kind of transparent and so that's looking pretty good so far so from this page we want to click this add to car buttton which means we're going to need a new model so let's create a new file here called cart item and we're going to create this class so for each card item we just need to know the food the selected add-ons and the quantity so for the quantity let's just initialize it to be one and then the user can adjust this in the checkout so for the gets I just want to be able to get the total price because you got the food but then also the selected add-ons let's just add all this up and then in the restaurant class if I come down to the operations let's fill out this at to cut method so I just need to know the food and also the list of add-ons so firstly let's see if there is a cut item already with the same food and selected items because then we can just increase the quantity so firstly we'll do that check and by the way I just realized we didn't even create a card so let's just create a user card real quick so there's going to be a list of cut items and it's going to be blank at the beginning and so we're just going to go checking through this cart to see if a to see if the same food item exists already and I want to use this method from another package that's really helpful so if you just go open up your terminal you can say flutter Pub ad collection and you can see we can import there cool so let's check if the food items are the same and then check if the list of selected add-ons are the same and if this is the case if the item already exists we're just going to increase the quantity and then otherwise we're going to add a new cut item and then we want to notify the listeners to update the UI cool and then while we're here let's also have the remove from cart so for this one we're just going to decrease the quantity so as long as it exists we're going to decrease the quantity and we're going to check as long as it's greater than one so as long as it's as long as it's greater than one we just want to decrease the value otherwise if it's at one then we just want to remove it from the cut entirely awesome and then let's do the calculation for the total price and also the getting the total item count so how many is in the cut and then finally we can clear the card awesome and then also just make sure to put the notify listeners when we need to update the UI cool so these are the main operations that we're going to need for the functionality so if I come back to my button we can finally add to cut so let's just create this method up here real quick so when we're adding to the cart we we need to know the food and also the selected add-ons and you can see here it's a map right so it's going to say a certain add-on is going to be true or false so what I want to do is I'm going to just create another list here for just being a list of add-ons and we're going to go through all of the available add-ons and then just check which ones a are true sweet then we can access our restaurant and add it to the cart cool so let's just test this out so I'm going to go to this bacon burger and let's check off a couple of add-ons and add to C which should trigger this method and the next thing we should do is let's close the current food page to go back to the menu so let's say navigator poop so if I select it then we're going to go back to the homepage and then now I want to click on this button at the top to go to our card page so let's create that now so for the car page let's just start with a consumer so I want to access all the restaurant information so I want to access the cart which I don't actually think I created the GTO so let's come back over here to the restaurant class and create the ghetto for the cart and so in the cart page let's get the user cart and then we can return the scaffold UI so just to see if this is working I'm just going to save this and scroll down here so in our sliver app bar we we have the cart button somewhere so in the actions we should be able to find the cart button there it is and then you can see here on the Press we are currently executing nothing so if the user clicks on this card button I want to go to the card page awesome so let's save this and test this out yay so we are at the car page now and so in the body I'm going to use a big column and use an expanded widget to fill up most of this page with a list and we're going to print everything in the user card sorry if I test this out I'm going to add something on and then go to the car and you can see there it is the bacon burger so let's just add some comments here to be clear of what we're doing so we have the individual card item by going through the index of the user card and then we're going to return the C tile UI now let's create a new component called my car tile and all you need to know for this is just a card item and then we're just going to decorate around it so let's start with a consumer widget to get the restaurant cool so we're going to start with a big column and then a row that has the food image name and price and also we're going to have a counter for the increment and decrementing the the quantity okay and then below all this we're going to have the add-ons so let's just start with the image and just to see what this looks like as we decorate this in our card page let's let's return my cart tile there it is and if I just save this you can see it's so the image is huge so let's actually set this height to be 50 maybe let's put this as 100 and we're going to put this in a clip erect to curve the corners and then let's just put the name and price in a column now let's go to our components and create a new file so my quantity selector and so for the parameters for this one we just want to know the quantity and the food we're looking at and also a couple of callbacks so increment as well as decrement so in the build let's just have a container and to start with a decoration and we're just going to color this up with some border radius as well add some padding and in the child let's use a row and so we want to have a gesture detector for the decrease and then in the middle we'll have the quantity count and then we'll have the increase button aome so if you come back to my cart tile we can say Quantity selector and there it is is and we can fill this out so for the quantity we can say cut item. quantity and then give it the food and then for the methods for the decrease and the increase let's just say remove from cart for the decrease and then add to cart for the increment and you can see if you save it there is our little quantity selector and you can see the plus and minus Works cool and then if you actually look carefully when the number increases to like 10 the number like changes you can see it's kind of changing the size so what you can do is wrap this in a sized box and just give it a fixed width and then everything should be working properly cool so I'm just going to decorate this up and that's looking pretty good so now it's time for the add-ons if we have add-ons then let's have a list View and I want to make the scroll Direction horizontal and we're just going to go through the selected add-ons in our cut item and I'm going to return it as a chip so this filter chip for the label let's just have the name and the price and if I just save this you can see if I add a extra ad there it is so that's what it looks like so let's just decorate this up I'm going to change the background [Music] color and the Border cool and then let's just add some padding and let's just check this if I add multiple add-ons yeah you can see it's stuck together so for the filter chip I'm just going to add a padding and only to the right side and sweet it's looking pretty good now on this card page in the app bar in the actions let's have a button to clear all card and just before we clear the the cart let's actually have a dialogue to confirm that the user actually wants to you know clear the entire cart before we do so are you sure you want to clear the cart and then we can have a couple buttons so cancel button and yes cool so let's test this out now if I add some stuff to my cart we can click on this bin button at the top and then it says are you sure you want to clear the C and we can say yes sweet by the way you see when the Cod is empty instead of just displaying an empty page I want to actually say some message so in the build let's just check if the user card is empty then I'm just going to return a text widget just saying that it's empty let's make sure to send to this and so you can see it'll be more clear for the user what's happening on this page instead of just being blank sweet now the next thing to do is on this card page we need to have a button to go to the checkout so let's wrap this column in another column and so the first part here is just the list of cut and then at the bottom we want to have a button to pay and it looks like we have some height era and that's because we should wrap this column inside with an expanded widget sweet there it is and I think it could use some space at the very bottom here so when we tap on this button we want to go to the payment page which we haven't created so let's create that now so let's just give it the basics scaffold and app bar and we can navigate to this page and in the body we're going to have a big column and at the top we're going to have a credit card so for this I'm going to bring in a package that I like which is a credit card widget so you can say flutter Pub add flutter credit card like this and so you can look up this package in more detail but I can show you how it works here so we can fill out this little bit of information and so I'm going to have all of these values at the top in a string cool so if I just saved this you can see there's our credit card now underneath this we're going to have a credit card form for the user to fill out so for this we need a couple more bits of variables so the first thing is a global key and on the credit card model change we're is going to update all of the information of course if you try this you can see there's out form and if you fill out this information it's going to be reflected on the card cool so this is how you can get the payment information from the user now below this we're going to have a bit of space and then my button again to pay now cool and when we pay now we want to make sure let's just fill out this method at the Top If the form key is current state is validated so we only want to show the dialogue if it's valid and we're going to have another confirmation message for this as well so we're going to show a dialogue to confirm the payment so let's have a cancel button and a yes button so cancel will just pop the dialogue for the yes button we're going to pop the dialogue but then also go to the next page and that's going to be the delivery progress page okay so let's see if this works so you're going to go to the menu add some stuff go to the cart and and then we can now go to the checkout and we can fill out this card and then once the user fills this out we can click pay now and it will say confirm payment then you can say yes and then it will go to the next page and by the way looks like there's a little bug here we should always pop the dialogue as well and then we'll navigate to the new page sweet so now in the delivery progress page we want to just display some sort of like receipt so I'm going to create a new component called my receipt let's set some padding and we're just going to have a big column and say thank you for your order and we're going to put the receipt here so just to see what this looks like in our delivery progress page let's import my receipt and there it is so in the receipt I'm going to put some decoration so like some borders and then some padding and we'll curve the corners and let's Center this and so I'm just going to make this look a little nicer now I think it's ready for the actual receipt so if you go to your restaurant model if you scroll down to the helpers we want to generate create a receipt for the order so just to do this we're going to create two little formatting methods here as well so format double value into money so all this is is just given a price I'm just going to stick a dollar sign on this and make sure they're corrected to two decimal places so that's what this format price is doing and then we also have a format list of add-ons into to a string summary so for each food we can have a lot of add-ons and so we're just going to put this all together in a nice string and so I'll show you in just a second a little bit more clearly what this looks like so we can create a cart receipt method so let's call this display cart receip and what I'm going to do is it's just going to be a long string and so we're going to say here's your receipt and then we're also going to include the date and by the way a nice package here to use is the inl so I'm just going to import that one and what that does is it allows us to format these Day times very nicely so let's print the formatted date and then we're going to do a quick for Loop and go through all of the card items in the cart and just print them out so like how many like the and the name as well as the price and all the important information like the add-ons and stuff like that so let me just fill this out and then just have a summary at the end total items and then total price and we're going to return this as a string so if I come back to my receipt you can see we said receipt here and so instead of this what we're going to do is we're going to wrap this in a consumer widget to get access to the restaurant and so now we can display the card rece here and there it is so that's what it looks like so you can obviously change the way this looks but this is what we can do for the receipt so let me just clean this up a little bit we can also have like an estimated delivery time and so if I come back to my delivery progress page I want to have a bottom navigation bar for the rider details so I'm going to have a custom bottom nav bar for the delivery dri so I'm going to create a container with a height of 100 and we're going to give some nice curved borders and let's give the delivery driver like a a profile picture so this is going to be a circle there it is so this is like a profile picture of the driver and then let's have the driver details the message button and then the call button e and for the message button and the call button I'm just going to put them together as a row so that I can just group them together and this is looking pretty good so far so just to check I just want to save this and see what it looks like in dark mode and everything's looking pretty Sleek in dark mode as well so now we finished all the UI and the front end so now let's focus on implementing the back end so I'm going to use Firebase for this project so if you go to your console I'm going to create a new project and I'm just going to call it food delivery Cho you can call it whatever you want and let's create this project cool so once you've created it let's go to the authentication and click get started and I just want to enable the email and password so let's start by connecting our flut app to Firebase so if you haven't already done this then you have to type in this command for the the Firebase tools so in your terminal npm install Firebase tools so make sure to type this in if you haven't already now I've already done this so I'm not going to do this step so once you've done that then you should be able to type in Firebase login and make sure you're logged into the same email as your Firebase console then we can say flutter Pub Global activate FL fire CLI looks like on Mac I get this little error so I can fix this by adding this in so I'm just going to do that and finally what we want to do is flutter fire configure and so here you will get the list of your Firebase projects so I'm going to find my one which is the food delivery chit and let's do this for Android and iOS for now cool and and everything should be successfully added so you should be able to see this new generated file here and so what we need to do next is to say flutter Pub add Firebase core and hopefully all of your errors should go away and now finally we can say flutter pop add Firebase or cool so if that's all good at the very beginning in your main function we're going to say widgets flutter binding andure initialized and let's change this to an async function so that we can await Firebase do initialize app and if you go to your default Firebase options you should be able to see the current platform so we're just going to do this little bit of setting up now when you add a bunch of packages in like this it's a good idea to just kill your app and restart it just to make sure there's no errors so now I'm going to create a new folder called services and I'm going to drag my or folder into the services folder and so in the services folder we're going to deal with the authentication and later we're going to do the fire store so for now in our or folder let's create a new file or service dot dot and this is where we're going to create our class so firstly we're going to get the instance of the Firebase or and then we're going to get the current user and then the three main methods here is going to be sign in sign up and sign out so let's just fill this out starting with getting the instance and then we can get the current user and then let's create our method to sign in with email and password so we're just going to try the sign in first and just catch any errors if there are and we're going to do the similar thing for signing up so I'm just going to copy this is very similar so I just Chang this to sign up and then finally sign out cool so this is all the code necessary for the authentication now I just want to make one more file called or gate and the purpose of this file is to just check whether the current user is logged in or not and we're going to have a stream Builder here and the stream that we're going to listen for is the or state changes so like I said this stream is listening for if you're logged in or not so in the Builder depending on if you're logged in so if your user is logged in then we're going to return the homepage and if the user is not logged in then we're going to return the login or register page so remember at the very beginning in the main. file we're currently just straight away displaying the login or register page but now I want to return the or gate so what this is going to do is it's firstly just going to check if the current user is logged in or not but let's try this out so I'm just going to go to the register page and I'm going to fill this information out and if I click sign up looks like we have this dialogue box right now so let's go to our register page and remember here in our register method we had this little section here to fill out the authentication so let's do that now we can get rid of this dialogue box and so all we need to do here is to get the or service and then we just want to check first of all if the passwords match so we're just going to check the password and the confirm password controller and if they match then let's create the user and then if the passwords don't match then let's show a dialogue and just let the user know that the passwords don't match awesome and also in the login page if I go to my login method yeah we we need to fill out the authentication here so I'm going to get the instance of the or service first try the sign in and then display any errors okay let's check this out so if I just save this and go to my register page I'm going to give it an email and then let's give it a password first of all let's make sure that if the passwords don't match let's see what happens it tells us the passwords don't match and then make sure it matches and then now we can sign up and we are in here which naturally means we should actually implement the log out button as well so let's go to our drawer and go to our login our logout button and this is our log out method so for this one same thing we're just going to get the auth service and just log out sweet and so yeah now we can log out and log in as well beautiful authentic is done and then if we come to our Firebase console and you go to the users tab you can see there's our new user that we just created so everything is working fine so now it's time for the fire store database so if you go to the build here go to your file store database and click create database for the location you can choose whatever location you want want I'm just going to leave it at us and let's create and so this is our datab base now first thing to do is if you go to the rules in the right you can see it says false so just change this to be true so that any of our users can write information into this database and then let's come back to our flut app and what we need to do is I'm going to go to our services folder and create a new folder called database and let's create a new file here called fir store. do and so similar to the or we need to open up our terminal and add this package in so flutter Pub add Cloud fire store and then once you've done that we can start building our class so I'm just going to call this fir store service and let's get our collection of orders and then we need to have a method to save the order into the database and so what I want to save is that receipt that we generated so let's just try this out if I add something to the cart oh by the way looks like we have an over overflow problem with the UI let's just fix this real quick this is in our cart tile and so it's because of the name of the cheeseburg is too long so what we can do is I'm just going to grab the quantity selector and let's bring it down below all of these text yep that's much better cool so if we go to the payment page and then we go to the delivery progress page once we get to this page that's when we want to submit it to the order right to the datab base after the user has paid so if you go to your delivery progress page when this user first fires up we can go to our initial state which looks like we currently made this a state list widget so I'm I want to change this to a state full widget and one way you can do that is you can click on this stat less widget here and on Mac you can press command Dot and you get this option to change to a state full widget so I think on Windows if you're on Windows you can be able to press like control dot or something and so you can easily change this to a stateful widget and now we can say init state so when this app first fires up we can get access to the database and then if we get to this page then we can submit the order to the database okay so let's try this out so if I click on this cheese bagar and I add this to the cart and I go check out and go to the payment screen and click yes then once I get to this page if you go back to your console and you refresh the page then you can see there should be a collection here called orders and there's our order with all the information and the date then the restaurant can just look at the database on this Firebase console and the live orders will be coming through which I think is amazing so if we come back to our flutter app one other thing is let's also have the address so currently it's just a fixed string right now so what I want to do is if we go to our component go to your current location widget and you can see like I said before it's currently just a fixed string so let's finish off by allowing the user to manually input an address let's come back to our restaurant and we've got the menu we got the user card and let's also have the delivery address which the user can manually edit so I'm going to create a method down here to update the delivery address so given a new address we can just update it and notify the listeners and then come back to our current location widget so this is where we've got it so inad inad of fixing the string like this we can wrap this in a consumer widget to access our restaurant and just give it the delivery address awesome which means we can enter a new address and it'll update there sweet which means let's also add this on to the receipt order so delivering to the delivery address there it is which means this should be updated as well on your Firebase console sweet so I'll leave it at that for now if you want the full code with assets you can download it from the link below I added many more features and refined this app a lot so you may be interested in downloading the final code I hope this was helpful for you if you have any questions comment below thanks for watching and I'll catch you in the next one [Music]

Channel: Mitch Koko

Views: 87,627

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication, firebase

Id: rHIFJo4IbOE

Length: 108min 59sec (6539 seconds)

Published: Fri Mar 15 2024