Build A Delivery App From Scratch (Step by Step Tutorial)

in today's Mega comprehensive tutorial we're going to be building a delivery app from scratch step by step with no code so you can think of something like Uber Eats Postmates door Dash GrubHub etc etc we're gonna cover the entire process from beginning to end and at the end of the video you will have a very good understanding of what it takes to build a similar app yourself now this comprehensive no code app a building tutorial is brought to you by mastering flutter flow which is my complete training on building no code apps when you join mastering Florida flow not only do you get access to step-by-step modules that walk you through the process of building any kind of app from simple to more complex such as this one but you also get access to our private Discord community where we will always be happy to help you out with any questions issues or problems so if you're serious about building no code apps definitely check out mastering flutter flow via a link in the description just below the video alright so I went ahead and downloaded the screenshots of ubereats that we're going to be modeling our app on okay so here we have a bunch of screenshots and we're gonna get back to it but first of all let's talk about what we're going to be building so we have the app architecture and I look at this app primarily into uh two parts I broke it down in two parts we have the user browsing and the ordering flow okay so this is just one flow this is when the user is browsing they ordered and from the time they ordered uh their meal we have real-time order tracking and the reason I broke this down in two parts is because uh you will need to build them differently as you're gonna see a little bit later in the video and that's very very important to break things down uh into various sub components okay next we also need to build out the data model we're going to be using firestore in this specific project and then later we're gonna test this app on the real device or on a simulator which is pretty much the same thing and we are gonna be launching this app as well okay so now let's take a look at the flows that we have so I went ahead and created some screenshots from um you know ubereats and this is important for many many reasons so you want to spend uh you know good amount of time on this okay so first of all let's talk about the different flows and then we're gonna dig deeper and talk about some of the the things that we need to keep in mind and so when they visit the home page they are you know they have the search bar here they have their location they have various categories they can pick from and they have the list of restaurants with various uh metadata about the restaurant so the name of the restaurant the delivery fee may be how long it's going to take for the food to uh to be delivered and things like that and this right here this is the home page list view right so this is the list view that we're going to be focusing on apart from this right this is kind of the header it's fixed this is going to be the list to you next we also also have the browse right so this is the different tab here so this is the home home page Tab and this is the browse Tab and so on the browse tab they're essentially looking at different categories okay so there's top categories Kebab breakfast and brunch coffee and tea and we also want to implement this and then there's the card tab okay so there's the card tab right here and obviously this is going to look different uh you know if they if they actually add you know various items uh menu items to this card and there's also an account which is just generic account screen that I don't have a diagram for but we're going to be building as well next let's talk about some of the other screens so if they click on on the list right here and they pick a restaurant let's say I want Brooklyn Bagel Boys and I click on this or in this case Highway Bagels right so let's say Highway bagels and I'm going to be seeing various information so there's the image there's some ratings um you know the category right maybe the price uh bracket a bunch of other information now there's a there's a sub kind of a sub page right so if they click on this right here they click anywhere here they're gonna get another screen that's going to give them a little bit more detail so it's going to show them on the map and it's going to have the the address a couple of more information okay now if they scroll down this list right here they're gonna see a screen that looks something like this this is this detail screen right here and so you're gonna have the list of menu items right you're gonna have the um you know the the actual menu item the you know the the actual item that you you may want to order so like energy juice you have the price the description you have the image and then if you click on the particular menu item you're gonna have a screen that looks something like this you're gonna have uh the image in kind of bigger resolution you're gonna have the name the price the description and you may also have options of sizes so maybe you want small large special instructions things like that now from here you can you know you're gonna have this button and it's gonna say add one to cart and it's going to show the price now when you click on this uh when you click on this by itself you know it's just gonna add it and you know it's just gonna reflect it but if you want to go to your cart directly you can do that and you're gonna see a screen that looks something like this right so there's your card uh you're gonna have your list of items that you have um you know have added to this card and inside this list you can also add more items right you can modify them you can delete them and you have some special instructions and you're also going to see the sum right here next if you click here you're gonna be on the checkout uh image here on the checkout screen and here you can pick uh there's some more options that weren't actually there before this this is new as far as I'm concerned so you have standard delivery you can schedule a time and you know you you have your items here and you also have some special things that you can do it make it a gift a promotion applied and then you can click next and the idea here is once you click next you're gonna you know enter your credit card details and then you're gonna um you know send this order for um provision for completion and so these right here are kind of the main screens that we're gonna be building our app on um now this is very very important okay when you're looking at the screen obviously this is going to happen as you get more experience as you get more experience with flutter flow as you get more experience with your no code building skills what you want to do is when you are looking at these pages right you want to start thinking in your head how you're gonna be imp implementing right you want to be start you want to start think start to think ahead right you want to be start uh you want you want to start thinking ahead about this and so as an example right so I have this list View and this is very easy right this is your basic uh list component and inside you're gonna have cards and you're gonna you know you're gonna get this data from a collection right if you're using firestore you're gonna get this data from a collection but there's also other things that are not as straightforward right so for instance there's a search screen and so this search screen you have to understand how it works right well obviously if I type something I only want the things that matched whatever I type now flutter flow has the functionality to do that uh it's called like on device searching or something like that but it comes with its own gotchas and so if you use it before you're gonna you know you're gonna know exactly what to do if you haven't um this is something you're going to be spending time on right another thing you want to be thinking about is this thing right here right so what they're doing is they're listing lots of things obviously we're not going to be listing like groceries and all of this but what we are going to be listing is we may list the category of foot right so for instance if you go to this category here there's Kebab Breakfast Brunch so we may list it as items here and so how would you do that well you you need to know that right so these are all sub components this is something that I do every time I build an app and it really saves me so much time and saves me a lot of Hassle and aggravation because I'm internalizing how to do it so you have the search bar you have this and then you have your categories which is uh just like a grid just a basic grid that pulls categories and displays an image about the specific category and that is something that we can easily do as well next you have to think about how you're going to implement the card functionality okay so if you've never built a map where a person buys something adds it to cart you know the card needs to be displayed you need to keep state that is something you have to think about as well if you've built an app that uses cart functionality then you know you're gonna save a ton of time with this right so all of this is very very important and essentially you know the next one is you know if you have this thing right you click on this you want to display a new one you know this is not going to be a new page maybe you want to display it as like a pop-up or maybe you want to display it as a drawer right that that you know goes from the bottom to the top kind of slides up in other words right you want to be thinking about it because once you internalize all of this it's just gonna save you a ton of time it's going to be a huge huge Time Saver okay and one thing I haven't really covered at this stage yet is how are we going to be doing the actual um ordering right and that is because the watering is going to be separate and we are going to be doing that in a little bit later in the video okay we're gonna you know do an architecture and all of that for the ordering piece the next thing you want to do is you want to talk about the data model right very very important to get it right and I like to do it after I have my flows after I have my screens and all that so this data model is fairly simple right we have our restaurants Collections and we have a sub collection of menu items next we have a user's collection and we have a sub collection of orders and this is a sub collection that falls under users but each document um you know in this collection the order the specific order is going to be obviously linked to the restaurant because we need that information to display it somewhere but orders is not going to be on the restaurants it's going to be under users because you know a user orders something you know a restaurant creates you know a menu item is created by a restaurant so you want to make sure you get this right and I like to start out in a fairly simple because obviously this is work in progress right you're going to be building the app and you may rearrange something or you may add different fields and things like that okay so we have the basic um you know we have the basic uh structure of the app we talked about the water flow right this is still you know lots of things that we need to do but this gives us a good understanding of what we need to do a good outline right and if you scroll down we have the the the basic data model okay so what we're gonna do now is we're gonna create a data model first and then we're gonna start building the app now in order to build the data model you want to go to your Firebase console okay it's available at console.firebase.google.com and once you come in here uh depending on you know if you have other projects that you've been working on before or not you may have a screen that looks something like this so as you can see I have lots of projects here I have like four projects but for the purpose of this tutorial we're going to create a brand new project from scratch and that way you guys can follow along okay so I'm going to click here I'm going to add a project and I'm going to call it um delivery app I'm going to hit continue here it doesn't really matter I'm just going to hit continue I'm going to select my default account I'm going to say create project I'm going to wait a few moments all right the project is ready we're going to click continue and now you should be in the dashboard of your new newly created project now a project is basically an umbrella that hosts other services right so we have things like extensions functions if you expand this you can see that we also have things like authentications app check fire source so lots and lots of services and when you're building your app chances are you're going to be using just a handful of these Services you're not going to be using all of them so in this tutorial on this app built into tutorial we're going to be using authentication and we're going to be using firestore database so I'm going to click on authentication so that it's here and I'm also going to click on firestore database and that way it's here okay and I can also hide it if I want now the first thing I want to do is I want to click on firestore databases here and I want to say create a database you're going to see this dialog box and you need to pick the kind of mode you want to be creating it in and so you can start in production mode or test mode now I'm just going to start in test mode and the only difference is that uh it's going to stop working after 30 days right so you can change that and all that that's kind of the purpose of desk mode is that you know if you forget about it it's going to just deny all requests right you won't be able to access this data but you can obviously change the rules and all that but this is a good way to kind of start building your app so we're going to say next We're Gonna Leave This at default we're going to say enable we're going to wait a few moments all right and now you should be greeted with a screen that looks something like this and now you can start to create your schema so I'm going to start a collection and I'm gonna call it restaurants and now I need to create a document uh for that collection right the collection is basically you know a list of documents and a document is a specific entity in this case it's a restaurant so let's go ahead and create like maybe five restaurants so I'm gonna say what do I do and I'm gonna call this I'm gonna say name is uh Little Italy I would say it's an Italian restaurant and let's add a couple of fields okay so we haven't talked about fields that much but let's start with name maybe a category and category is Italian another thing that we can add is an address okay because maybe we won't display the Azure for that restaurant so I'm going to say address and let's say I put I don't know 50 Broadway right assuming this is in New York Broadway New York New York okay and that's it it right now I can hit save and now I have one document created which means I have one restaurant here now let me go ahead and quickly create four more documents and that way we have five restaurants okay I'm just gonna do that real quick all right so I went ahead and created five documents which means we now have five restaurants so we have a little India little Spain a little China little France and Little Italy okay so we got five restaurants now let me go ahead and create a couple of dishes for each of these restaurants so that we can display them correctly and for that you can click on the document and you can start a collection so here we're gonna call this menu items okay I'm gonna hit next order ID and let's say I say name I don't know this is for which restaurant so let's just call it bread just to keep things simple and here I'm gonna have a price price I'm just gonna put it in a number and try is let's say five dollars save and now what we have here is we have a sub collection called menu items and that subcollection has one document called bread and so I'm gonna do that for the other restaurants because it's a good idea to have the same structure with all the documents right so I'm going to go back to restaurants here I have it I'm gonna do for the other four real quick all right so I went ahead and created this menu item subcollection for every document in restaurants collection so every restaurant has a menu item and if you open it up there's one document here okay so there's bread there's uh let's see what else we have there's rice so it has a one menu item every restaurant has one menu item that's a specific uh food item and it has the name and it has the price okay so now we've created this part here we still need to do the users and orders but fortunately the this user's collection is created automatically by flutter flow for us so once we start building the app it's going to be created automatically so you don't have to worry about that all right so now that we've created the bare minimal that we need because users is going to be created for us later on we are ready to start building our app okay so I'm going to log in into my flutter flow which is my favorite no code Builder right now so here I am in Florida flow we're going to create a new app let's say we're going to give it the project name and we're gonna say delivery app and we're just gonna start with the blank app you have lots of options here I'm just going to start with a blank app and now what we want to do is we want to set we want to make sure that set of Firebase is checked we're going to hit next and we are going to enter our project ID so what is our project idea well if we go back to Firebase make sure you're inside your project dashboard if you click here you're going gonna go into project settings you're going to see your project ID you can just copy that go back to your app paste it in here you're going to click press connect and you're gonna get an error because we haven't given flutter flow access to this project it needs access in order you know you know for us to build an app that changes some of the data around so we're gonna add this email as an editor for our project so if you in your project here you're going to go into users and permissions you're going to add a member paste the email and make it the editor add member here and now if you go back and you say connect it should connect okay so now it has connected you want to click on auto generate config files generate files all right next you want to make sure you enable authentication here and you want to make sure you create user collection here now we need to configure our initial pages and so we have this entry page and we have a logged in page okay so we don't have any pages in this app yet so we need to create these pages from scratch so this entry page if you click on this you can create it you know from a blank page and that's fine but there's a lot of you know pages that were um that come with waterfall that you can use as templates so if you go into oauth you're going to see some authentication pages and you can kind of decide what you want I typically go for this one but any of them is fine so I'm gonna say use my theme and I'm gonna say I'm gonna call this login page I'm going to say create page and I need to do the same thing for this logged in page here we're going to come in here and what is the logged in page well the logged in page is actually the first page that the user sees once they're logged in and this is this page here right this is this page here so we're going to come here and we need to either create it from scratch or we need to find a page that kind of looks like that so if we go into lists you can see that this is going to be a list right so if you scroll down you can kind of pick you know the page that resembles to kind of what you want and if you look at this page here you see it's got this it's a list but it's got some stuff on top that we're going to add manually later but this is a list with these big images so that's kind of what I'm searching for so I see this page right here you know that kind of looks similar to what we want so I'm just gonna say use my theme and I'm gonna say home page create page start building okay so now if you click here we have two pages that you know we created so far right we also have a couple of Errors so if you click here we have project issues now I like to solve my errors early on because uh you know I just I just want to fix things and um you know while I can because later on I'm gonna get errors anyway so I don't want those errors to kind of pile up if you click here right if you click here you can see that we have an error when we're trying to create an account and what does it say it says author action has improperly set confirmed password this confirmed password field there's nothing there and that is because we don't have a confirmed password field when we create an account so what we need to do is we need to pick this password we need to duplicate it right click duplicate now we have another one and then you want to come in here and you want to make it password two and now if we come here to this oauth action that was giving us an error confirm password field you can just pick password two and the error should go away okay next we have another error and this is an error for this home page we just have this back button we don't really need that so if we delete that the error goes away okay next you want to kind of change this page around so I'm just going to say home page just to keep things simple and now what we need to do is we need to kind of well we need to fix this page up so it kind of looks the way we want but before we do that I want to connect this this page I want to turn this into a list view so that we pull up a list of restaurants that we have okay and before we do that before we access the data that we've already set up in Firebase uh we need to come in here into Firestorm we need to create a schema so as you can see we already have the user schema but we need more right so we're gonna come here we're going to add a new users collection we're going to call it restaurants and this should match exactly to what you have here right so if you go back to fire a firestore database you have restaurants it needs to match exactly it needs to match case it's case sensitive so whether it's lowercase uppercase it needs to match exactly so we have restaurants but we also have a sub collection called menu items and in restaurants we have three Fields so far we're probably gonna add more Fields later on we have address category and name and so if we go back to our app we're gonna create this and we're gonna start from scratch and we're gonna say name we're gonna pick string say okay okay category we're gonna pick strings say okay and then address and same thing string okay all right now we have three Fields now let's go ahead and create a sub collection and the sub collection is going to be called menu items this is a subcollection of a restaurants create and now we need to do the same thing and I believe I have like two Fields there right I think it's name and price name price okay we of course we may add more Fields later on we're just you know trying to get going right name String price uh price is going to be we could make it a double but I'm just gonna make it an integer uh just to keep things simple so we have name String prices integer and by the way the difference between integer and the double is that integer is a whole number so like 5 10 20 100 a thousand whereas a double is you know it has a decimal point so like 10 point 5 10.2 10.7 etc etc all right so we have this set up another thing that we need to do is for the users remember we have a what do we have we have the orders right so we're gonna go back here and we're gonna create a sub collection inside users and we're going to save orders this is sub collection for users create start from scratch and what do we want in the orders well the water is basically the menu item right it's basically the menu item um the information from the menu item so the name you know price Etc but it also needs to have to have to be a link to the restaurant right at that specific restaurant you know we're ordering from and it also needs some specific time so like the time it was ordered the status things like that so what I'm going to do is I'm going to say restaurant ID or reference and this is going to be a reference to the restaurant I'm gonna say document reference to the rest front and then some specific information to the water so something like um time stamp which is going to say time stamp and timestamp is going to be the um date time right here that's that was when the water was placed and now we also need the status okay so the status is going to be the string right so or maybe the status is going to be uh I don't know like pending or paid or a placed or delivered lots of different statuses that you're gonna see but right now that is kind of what we have right the the reference of the restaurant the timestamp when it was ordered and the status of the order all right so now we have some minimal information and that is good because at least we can build an app that displays this minimal information this is a good start we're going to go back to the UI Builder and we're going to start building okay so this thing I want my list to be a a list of these items here right so what I'm going to do is I'm going to go to the top level you see this list view already exist here I'm going to go to this Con to this list view actually and I'm going to say this list view needs to add a backend query right so I'm going to do a query collection and I'm going to say restaurants right because we're displaying restaurant information okay I'm gonna say confirm confirm and now as you can see it it replicated these items for me and they're kind of grayed out because uh the this is how it's gonna appear right you can't edit this but on the screen you're gonna you know it's gonna be replicated now we wanted to delete all of this we don't need you know this month we don't need that we want to delete all the stuff so I'm going to scroll down I'm gonna find these things so there's another list we're going to delete that there's another list right here list view I'm going to delete that and I'm gonna delete this last month okay so now we just have a simple list view that maybe you know we can say restaurant okay something like this no if we run this app we should hopefully display some of the information okay but before we run this app as you can see we're having project issues this is not an error this is a warning so if you click here it's telling us that the rules have not been deployed and rules are permissions basically you are telling you're giving the system information as to how and who can access the data in your firestore okay so right now you know we have this thing here that specifies this is sensitive data and it's not you know restaurants is not sensitive menu items is not sensitive and anyway when I'm testing my app I want to you know open my permissions as much as possible okay so what I'm going to do is I'm just gonna deselect this to keep things simple and this yeah this is fine and for the right and delete I'm just gonna make it everyone it's not gonna happen but this is good for testing and that way you don't have any issues for the user I'm just gonna leave users collection and then I'm going to click deploy all right I get the screen that tells me no before and after I'm just going to say deploy now and now it's deployed and now we don't have any issues at all okay so once we have this and we have like a little mini app that we built we want to test it out so I'm going to click here we're going to test it out we're going to build the test environment here all right and now our app has loaded and we're seeing the login screen because that is the screen that you see if you have not logged in before remember we enabled authentication on our app so we can you know continue with Google and apple but what I'm going to do is I'm going to create a basic account so now as I'm typing it you see you can't really see what's happening and that is because this template it looks like there's a small bug right so I want to fix this because I can't really see what I'm typing all that well so if I go back and I click on email and I scroll down as you can see the text color is y white and it shouldn't be white it should be dark so dark and I'm gonna fix this right here this here come in here make this darker and then I could go back here and instead of rebuilding the app I can just do something called an instant reload which is gonna reload that rebuild the app but just to fix that change that I just made fixing that bug all right so now if I type you see it's much better so I'm gonna type I'm just gonna create a sample account okay and I'm gonna say get started but I'm getting an error and the reason I got an error because if I go back I have an enabled authentication so inside of my dashboard for my project I need to go to authentication I need to click on it and I need to say get started and now that I've enabled it I also need to enable the provider okay so I have lots of different providers and this is a way that you know users can authenticate so I have you know Google provider Facebook they can authenticate with their no Google account or Facebook account Apple account GitHub cetera but I'm just going to keep it simple I'm just going to do email and password right we're gonna do that we're gonna enable and we're gonna hit save okay so now we have this one provider enabled now we can go back to our app here we can fill this out we can say get started so it creates our account and then it redirects us to the main page and so now if we go back to our um the Firebase project and we're going to users you can see that we have a new account that was created right we have this account and now you know every time I go to the app it's automatically going to log me in as that account but if I log out I can log back as that account and I need to create a new account so now we're looking at the home page and what we're looking at is a list of all the whatever we've added to Fed into it and right now we we have a list of restaurants and so we have a we have five items but it's not displaying the information and that is because we're displaying the items but we haven't really set the names and the the information from the the actual document and so for that you can click on a specific field come here and then you have this restaurants documents which were getting from the database and I can call this name and this one I can call it category right so I can come here category and then we have price but we don't need price and now I can go back I can do an instant reload and hopefully it should display some of the information that you know we want the user to see okay so now we have the name of the restaurant and we have the category we can delete this because this is going to be for menu items we don't really need that right now so let's go ahead and fix this up so we can just press delete and it's gone and if we look at uh the the main page there we have you know we have other information we have the name of the restaurant we have the delivery fee we have the time uh yeah and then we have the rating as well and so so we can do ratings as well we're going to be doing that as well we can display it but right now I want to display this thing up on top okay so I want to display a search bar I want users to search Okay so let's go ahead and do the search bar because that's um kind of involved but that is a good feature to have and so let's go ahead so we have this column and we want to have a we have this text but above that we want to have a search bar so if we click here and we click here we can search for template so in fact type search you have a template so I'm going to select this and it added it to the bottom so we're going to drag and drop it up on top and now it should be up on top right here okay so looks good the only thing is the colors uh let's go ahead click on the container scroll down we have this fill color and we're gonna make it light okay we're gonna make it light and the text color uh let's make it a little bit darker now that looks good and so now if you reload the app let's go ahead and reload the app and once we reload the app we have an error so it says here no font family by name Clash display was found and the reason that happens is that one of the you know one of the things here one of the text elements is trying to use a font that we don't really have so remember this worked fine but we added this and so if you click on here and if you scroll down it's using Clash display okay so if you click on Clash display and we just go to theme fonts and we just pick our theme font it should be fine now right so if we come in here and we reload it it should hopefully work that is another small bug because you know this template is using a font that is not installed by default so now as you can see everything is working we have the restaurants with the sneakers and then we have the search now the thing about the search is that nothing happens if we press enter nothing happens right and that is because in order to implement search uh you have to do a couple of things okay first of all if you click on search field right if you click on this and you come in here you can open an action so you can do on submit or unchange but what exactly do you want to do well that is the thing okay if we click here and we add an action the action that we want to add is something called Simple search you can type simple search and you want to click here and now you can specify what exactly do you want to be searching right do you want to be searching a firestore collection documents or strings well in our case we can do a firestore collection here right so we can do a firestore collection we can select restaurants and we can say name that we want to search and the valuable the value is this widget State field right and in fact I want to change it I want this widget State I don't want to say text field I wanted to say input search okay and so now if you click here we have this input search and now let's go ahead and reload the app and see what happened all right so now we have the search bar let's go ahead and type something and nothing is happening you see nothing is happening and the reason nothing is happening is because this thing is searching but we're not displaying this information so it's getting these fields it's doing the filtering but remember this list listview here is just it's just getting data straight from a database so we need to change how it works right we want to display just the search stuff right we want to display the search the the stuff that's being filtered and so for that we need to click on list View and we can get stuff from a database right because the database is you know it's directly from a database so we need to remove this back-end query and we need to click here and now if we click here you know to get stuff from another array we have this simple search results so if we click here and we say confirm and then we call it a restaurant and we say come firm now what's happening is that we are searching which filters the stuff from a database and only displays it here right so let's say we click here and we display the name restaurant item name this thing is going to be restaurant item category and now we don't have any errors we're all good let's go ahead and reload this and now when we load the app we're not seeing anything okay and the reason we're not seeing anything is because we haven't searched for anything okay it's uh it's how the search functionality works we haven't searched for anything so if I type little it displays all the restaurants because they all have the word little in them right and now if I delete this it still displays all of them because now I've searched for something well I've searched for nothing but at least I executed the search and that is why it's showing the restaurant so if you reload it from the start if the user sees the app they're not going to see anything when they load it and that is because we haven't searched for anything that search functionality is not there but if I type in a little it's going to display all them if I even delete it it's still going to display old if I type something random it's not going to display anything okay so this is a weird Behavior then you need to take that into account so you need to change the way your app looks and so what's happening here is that you have two situations you have one situation where the user loads the app and we're displaying the search results but there's nothing in the search results because the user hasn't searched for anything but then we have another situation where the user search for something and we now need to display what they searched for and then we have a third situation where they search for but they search for nothing and we need to display all of them because you know they they didn't enter a valid search field so in that case we need to display all of them so you need to refactor how your app works and the way you want to do it is you you want to have two lists okay so one way of doing it is we're gonna go to the home page and on the home page level we're gonna go back and we're directly from a database so I'm going to do a query collection and I'm going to say restaurants okay so I'm gonna say uh get a list of documents and I'm gonna do that so now when the app loads we get a list of documents we get a list of restaurants regardless and here when they search for something uh we're gonna split their search results but we're gonna display it conditionally okay so initially because they haven't searched for anything the search results is empty so we want to display the um the the list directly from the database if the search results has at least one element we want to display the search results okay so how do we do that well what we need to do is we need to create a custom function we come in here that checks if there are search results display search results if not display the the regular list directly from the database so we're going to come here we're going to create a custom function and I'm just going to call it get list and this function is going to return a basic list a list of something okay so in this case it's going to be a list of restaurants so I'm going to say a list of documents I'm going to say restaurants that's that's what it's going to return and the arguments that we're going to be defining is going to have two arguments and this is going to be the list and the search results so if the list if the search results is empty just display the list otherwise display the search results that is the correct logic but we need to implement so I'm going to call this get restaurant list something like this and the first argument is going to be the the main list from the database right so I'm just going to say list we're going to say list and I'm going to say documents and I'm going to say restaurants and then the second arguments are the search results right so this is going to be the search results list and I'm gonna say we are gonna do document and we are gonna say also restaurants okay so we have two arrays two lists that are gonna have different values but they're of the same type okay so we have this get restaurant list and now we need to make sure that we conditionally return the right list and so the way we do it is we can just say return and now we're gonna say search results length is greater than zero return search results otherwise return lists and that is kind of how you do it that is the expression the way you do it you can just click here just to check say function and now we need to check this function for errors and it should be fine you always need to do that there's no errors and now you need to be using this list uh in many places right so if you come back over here this list view we're not going to be doing Simple search results because you know when the app loads we need to display the data straight from the database so I'm going to come in here edit this and I'm going to say get get restaurant list and I'm gonna pass the arguments so we need to pass the restaurant documents which we have at the homepage level confirm and then we're gonna pass the simple search results which we have because we have that search action confirmed and now we say confirm and now when we reload it initially we should be displaying data from the database and then as the user started to search we should be displaying data uh that the user is searching for this as you can see this is this initial data and now if the user types like little uh you know they're gonna see everything but even if they remove it they're still going to see everything because that's how search works now there's a couple of things that we can do if we go back and we click on this input search we can also have a search on category it could be useful name category address probably not so much but name category could be useful we're going to reload this all right and now we can search on categories so I can type Indian and I'm seeing Indian I can can type Spanish and I can see Spanish I can type Spain and I should be able to see Spain I can delete all that and I can see everything now which is good good behavior actually I can type friends and I'm seeing French okay and I can delete it and I see everything so this is good behavior it works as expected it's just a little bit tricky this search functionality all right so let's go back to the diagram here and the next thing I want to work on is this browse functional okay so in this page here on this screen they're displaying different categories okay so that is exactly what we're going to be doing and I also want to display him in this kind of format so let's go back to the app take a look at our pages and let's add a new page and we're gonna say browse in fact we are well actually we can see if we can find the page so if we type there's nothing there and if we go into list which is you know kind of a list I don't see any grids I don't see anything looking like a grid so what I'm going to do is I'm gonna pick this page I'm going to say browse create page and now we have this page and this is a list view I don't want the list view I want the grid view so what I'm going to do is um I'm gonna delete all this I'm gonna delete all that and what I'm gonna do is I'm going to delete the column as well and I'm going to create a grid view okay so now we have a nice grid View and this order now let's rename it to categories and we're gonna delete that and now let's set up our grid view so what does the grid view need to have well in this case it's an image and a text wrapped in a container so that's what we're gonna do we're gonna come here we're gonna add a container inside a container we are gonna have an image actually we're gonna have a column and then we're gonna have an image and then we're gonna have text okay so something like this uh now let's take a look at the grid View and you can configure how you wanted so if you take a look here it's true right there's just two horizontally and as many as you can vertically right so that is what we need to do in this cross access count we're going to set it to two and this looks good yeah it looks fine and now if we go in here you see we don't see the text the text is not showing up and that is because there's some overflow if you click here you're gonna see an overflow and that is because the image is expanding Beyond where it needs to so if you go to the image and if you click here you see now it's better this is better this expansion is better we want it to expand and now we can see the text and there's no overflowing okay so if you come in here this was the default this default expansion there's overflow but if you come in here there's no overflow so that's kind of what we want and let's give it a little bit of padding up on top at about right maybe five yeah that's fine and let's take a look at this grid you here and we have some spacing right so you can delete the spacing well it's going to be visible once we load it up with data and how are we going to do that well if you click on grid view you can do a backend query now the problem is we're going to have categories and we don't want to load it up with all the categories because you know we have a list of restaurants you know each one is going to have a category there's going to be some repeating categories we don't want to do that we want just a unique list of categories so how do we do that well we need a custom function and so what we're going to do is we're going to come here we're going to create a custom function function and we're going to say get unique categories and this function is going to return uh return a list of strings and it's going to take in also a list of strings and these are going to be just all list of all categories and it's going to return a list of unique categories okay so we have a list of categories here we're going to be passing I'm going to show you how and then what we need to do is we're gonna we need to do return categories to set to okay and the reason we need to do set because this is a list so we're saying you know take that list convert it into set and then convert it back into the list is because a set removes duplicates okay it's little uh tip there okay we're gonna say save okay we're gonna check for errors see if there are any errors no errors and then we're going to go back here and now we can click here this generate Dynamic children generate children from a variable come here search for our function get unique categories and then we're going to pass it the um the list of categories click here and we need to load up our restaurants which we haven't done yet so we're gonna go over here top level get our list of restaurants because we need to get the categories from the restaurants query restaurants list of documents confirm and now we can go back here back to this grid view here and now we can do our function get any categories categories uh we're gonna do we need to pass restaurants but we're not going to be passing list of documents we just need those categories as fields from each of those restaurant documents so we're going to come here map list items and we're going to do category okay uh we don't want to filter no if it changes confirm confirm this is a really really powerful feature very very useful we're going to say categories click confirm confirm and now you can click on the name click here uh categories item confirm and now we have this um this is going to list the categories let's give this page a um let's give it an navigation bar control navbar navbar is off in the uh in the settings we're gonna enable it and then we're going to set our two pages homepage is going to have a nav bar so navbar and whatever we want as the navbar something with hole right something like this and then browse uh maybe a magnifying glass do we have something that I browse and it doesn't really make much sense magnifying I don't know I'm just gonna pick a map okay you guys can can do better than me all right so we have this the other thing I want to do is I want to give this padding maybe give it a maybe a 10 padding okay that looks black that looks cleaner and let's give the container maybe a little bit of okay that looks a little bit cleaner that looks better alright so we have categories let's go ahead and run this page start a new test environment let's see how that works all right so this is our home page let's minimize it and if we click here we have our category so as you can see we don't have the images because we haven't configured them but we do have the categories and as you can see these are unique categories we only have five restaurants but even if we had a hundred restaurants we would only have unique categories assuming we don't have any variations of this name so if you have like 10 Indian restaurants we're only going to have one Indian category which is exactly what we want now the next thing that I want to do is I want to make sure that the image is correct here right so that we display the restaurant's image and for that we need to add images okay so I'm gonna go ahead and add another field in our firestore database so if I come in here and I have restaurants what I need to do is I'm going to add another field so I can just do this and I can say image this is going to be a string and then I can just uh have the image of the restaurant so I'm going to go ahead and find some random images to add here and I'm going to add this real quick I'm going to add the URL here and I'm gonna add another image here and now let's go back into the app and let's fix the home page here so but before we do that we need to make sure they're part of the schema so we're going to come by here restaurants add an image field I'm going to say image path set it okay we're gonna check our custom functions a little bit later come here and now make sure it's a network restaurants documents restaurant items image so now let's go ahead and check functions okay we did that and now if you reload it we should do it we should see the newly updated app all right look at that so these images are random obviously okay so they're not really connected to the restaurant but you guys get the picture now we can go into browse and we have these things but nothing is really happening okay so ideally you want to click on something and that should drill down into that category and we're gonna do that in just a second but we also want to display the image as well now the way that we want to do it here is that if they click on a category we want to drill down on these restaurants we only want to display play the category that they selected and maybe give them an option to clear it as well so there are a couple of ways of doing it correctly let me show you how you can do it okay the first thing that you want to do is you want to set a filter on this home page list here you want to make sure there's actually a filter that you filter these um the list by okay and the way that we can do it is we can go over here we can go to the home page and we can create a local page State variable and I can just call it filter or you know restaurant filter and this is going to be a string and the initial value you know nothing is going to be initial value we're just going to say confirm and then what we can do is we can go to this main query here that gets displayed initially and we can say well we want we don't want to display everything we want to filter if there's a filter so we're going to edit this backend query we're going to have this filter and we want to filter by category and we're going to say a equal to and we want to say we want to use our page State variable and very important you want to ignore empty filter values so there's no filter we don't want to filter by some you know empty value I want to hit confirm now if we reload this initially there is no filter set right because we're displaying everything and we want to make sure that that's the behavior there are no other bugs so we're going to reload this app okay so as you can see there's no filter so it's displaying everything but when I click something here I wanted to redirect with the filter already and for that what we're going to do is we're going to go back to browse and we're going to go on the container level and we are gonna do a redirection but we're gonna pass a parameter with this category okay so we're gonna do navigate navigate to home page and we're gonna Define a parameter and we're going to say this is going to be um in category category okay and then it's going to be a string link we're going to say confirm we're going to say pass and what is the the category that we're passing well it's this categories item so now you know when the person clicks on it it's going to redirect to the home page but this time we're going to pass a parameter and so now what we want to do is we want to come here and we want to set the filter to the parameter that we might have passed so this home page here when it loads we want to set the page level right so we're going to open it up this page so we're going to say page update page State restaurant filter and we want to set it to the parameter if any right so we're going to do a page parameter category so that's what we want to do and now if we pass it from the of the other page it's gonna have a parameter okay so we're gonna come here and we're gonna reload this page okay so now when we reload the app if we go into browse and let's say we only want Spanish we click here and we're only seeing Spanish here okay obviously if we search for anything it's going to display everything again because once you search you you know that's it you're displaying something else so I can type India Kieran is going to find India I can remove it and it can find anything but at least the filter functionality now works properly I hope you are enjoying this comprehensive tutorial so far just a quick reminder that you will be able to view and or clone this app as a member of our amazing patreon community and you can learn more about it via a link in the description below the video alright so coming back to this diagram we have some more screens that we need to build out so we need to build out this screen and this is kind of this restaurant info card right so if you are looking at a restaurant right at the menu you can click on maybe somewhere here or this thing or just about any here any place here and you'll be able to get kind of some information so a map uh the name you know what they serve address when is it open until and some more information so we want to do this page there then we want to do a uh the menu right this is the menu page here when they click on the restaurant and then we have the menu detail and then we have the card and the checkout so let's go ahead and create this detail page here let's create these two pages now and then we're gonna continue so the first page I want to do is this detail page here which is kind of like uh the list of items and the restaurant detail all rolled up in one all right so let's go back to our app let's create a restaurant detail page here and this is going to be a Content page and let's see what we can use so maybe something like this with the image up on top yeah I guess any one of these should work let's see there's lots of detail pages so yeah let's get something simple how about this let's just do this one and I'm gonna say restaurant detail okay create page and now we have this restaurant detail we're gonna keep this this is going to be what what do we have well nothing there's nothing up on top so it's a different layout but what we want to do is maybe have the name of the restaurant but before that right we need to get the actual restaurant that we're clicking on and that's going to be a reference we want to go to the top level you want to create an incoming parameter this is going to be restaurant ref which is a document reference not a document a document reference and it is required of course the restaurant confirm okay and then what we want to do is we want to unpack it we want to do a document from reference restaurants and this is Page parameter here so now we have all the information that we can start using so we can click here we can go through this restaurant document say name this could be the image restaurant documents image in fact maybe this should be actually let's change it let's remove it let's say restaurant details and then here should be the restaurant name okay and what do they have on that page well they have a lot of things right open until um so we have the name we have the rating we have the type of restaurant so let's do let's go ahead and start with that yeah the name is up on top and this thing here so as you can see this is a column right here what we want to do is we want to convert this into a row wrap this widget in a row and that way we can have thing arranged horizontally so I'm gonna get add another actually I can just duplicate this duplicate I'm going to duplicate a couple and I have this duplicate I'm going to give it a little bit of padding maybe five five perfect and let's start filling in the data so we first have the ratings and I want to do that but we don't have any ratings set up yet so let's let's uh let's put some random dummy data there let's put 4.8 100 ratings we'll fix it up in in just a second this thing is going to be the type of restaurant we have that information I think it's category so we have category what's that last one um so there's the dollar amount we don't have information for that yet so let's just leave it but we're gonna say open until so what I'm gonna do is I'm gonna duplicate this and then here I'm gonna say we're gonna do a combine combined text I'm gonna say open until and then we need at the other time that it closes okay so we don't have that let's go ahead and add that information this is going to be good information so let's go ahead and add that to the restaurants um let's say open and we're gonna do let's do a timestamp and let's do uh Let's do let's do 10 am so it needs a date I'm just gonna put a random date because we only need the time right we only need the time um open and so I'm gonna do this real quick put the random date and let's say they all open at 10 am so real quick open time stamp 10 AM and that way we can get any date that we want doesn't really matter we're gonna do that right here open and we also need the close let's set the close to a random time stamp and let's say they close at 10 and beer and we also yes we also need to add it on our schema we can do that right here restaurants we're going to say open date time date time okay and now we can do is we can do a um we can do something like this this is a combined text open until and we can add text and we can say well restaurant we can say close and here we can format it okay we can say well we only want the time that okay something like this then we have this description here so I'm just going to put some random text in there maybe we'll add a field layer description and then we can delete all this we don't need that um yeah we should probably leave the button no we don't need the button do we need the button no the button is going to be over here so remove the button it's a nice button there well we'll we'll try to uh have this kind of button later but we do need a list of menu items okay so let's take a look at this we have this one column here let's add a list list View and this list view is going to have these menu items from this restaurant here at a backend query query collection menu items value Source from variable this is going to be restaurant rough list of items yep no filtering nothing and now we created a query and now we can add a and we can add inside the card we can have uh sex but it's a it's a certain format is it right this is kind of how it looks so we wanted to list like this so which means is that there are two columns this is one row with two columns and then a bunch of other things so let's go ahead and try to replicate that so we're gonna have a row and then we're gonna have two columns and then another column okay it looks good let's Center it looks pretty good but we can even expand it later on we can do something like this and now they're fully expanded and we can arrange them the way we want so let's take a look at what we want we have this we have the name of the product the price description and then we have the image so let's start with the image first and of course we don't have the image and the menu item but I'm gonna I'm gonna do it I'm gonna add it we're gonna say image here and now we have a random image all right let's give this uh let's uh we need to list the name the price and description so back here let's add a name price something like this okay looks good give it a name menu items document name menu items document price Priceless formatted number format and we can do custom and we can display as a currency and then this thing is description we don't have the description field but we can add that later let's give it a little bit of padding something like this yeah that looks pretty clean all right that looks pretty nice let's see if we can change the image something like this okay that looks pretty clean all right so these are going to be the menu items and maybe we can have we have this list view we can also add another no this list you here just yeah description text we can duplicate that and put it below this divider I want the lows and then we can say this is I don't know what does it say there nothing right picked for you or menu items we can just say menu items menu or menu whatever you guys get it menu items you want to center it we can uh we can wrap it in a row but I don't think centering it is a good idea something like that you can Center it if you want but nothing is really centered and so that's our menu item so let's go ahead and start a new session see how that looks all right so here's the app except we forgot to create the link so if we go back to home page we can do it on the container level we can add an action navigate to restaurant detail we're gonna pass a parameter of um restaurant reference confirm and Yep looks good let's see if that works all right now it's clickable if you click it there we have it okay so as you can see Brad description we don't have an image for each of the menu items that's why it's not displaying an image we're going to fix that later this is hard-coded Indian and 10 AM open until 10 pm okay this 10 a.m what is that ah it's probably open probably when it opens some to our restaurant detail oh no it's a hardcoded so yeah I don't think we really need that it's it's not it's not really necessary I think what do we have it on the main page oh that the price price so maybe we'll do that later I don't think it's that important right there but at least we have open until 10 pm because we're just grabbing the date to display it uh one good idea would be obviously to change this to have a whole you know weekly schedule right so for instance we have a restaurant and you might have to you might want to store when it opens uh each day of the week and the way you want to do it is if you add a field over here you can do it um you know working what is it open days something like this and you can have an array and then you can have an array of dates right and that way you can cycle through the day figure out what date you are now a day of the week right and compare it and show that if you want but this is nice and quick nice and easy now this thing this ratings let me show you how you can do it we don't have a page that rates um you do that later after you know after you get the water after everything is delivered you have a page that displays it we're not going to build that UI but I want to show you how to do it right so if you go to this restaurant let's say uh let me do it for one restaurant let's let's say Little India right so we have this Indian what you can do is you can create a collection called reviews or ratings actually let's just do reading and then what you want to do is you can have two Fields so you can have one called the rating this is a number and let's say we create um let's say it's a one to five and then you can have a review this is a string great restaurant okay so now this has one or one review let's add another review and we're gonna say rating number let's say four somebody didn't like it uh review awesome but slow service okay so something like that and now you have two uh two reviews and now we can go back to our our schema and create a new subcollection right for um for restaurants called reviews it says restaurants create start from scratch rating which is an integer and review which is string okay so we have rating and review and now you can display this data so it's very very easy to do so you're gonna have two things happening here right you have the average and then you have the number of ratings right so two different things and so what you want to do is you want to go to text combine text and here you're gonna have the average right so you need a custom function to do it okay you need a custom function to do it and you can come in here you can create a let's say create a new function we're going to say get average get average rating okay and what are we gonna do we're gonna get a list of ratings a list of integers and we're gonna return and a double poor integer doesn't really matter in fact um why don't we return a double and we get a list of integers we're going to say list we're gonna say integers this is our ratings and we're going to return a double so now we have a list of ratings okay so we have a list we have an array of ratings right and these are going to be integers and so what we want to do is we want to sum them up we want to sum all of them up and we want to divide by the number of um you know the number of we have and you can use this little shortcut here to sum the mod so we can say this is our sum and we can say ratings something like this this is the sum and then we can just return sum divided by ratings okay and now you're going to get a double back so save it save it and now we need to pass the list of ratings but it wants a list of integers so we're going to come here and we're gonna go to restaurants and what we need to do is we need to pass the ratings but we don't have any ratings right so we need to do another query on this level so if you come in here we can do it on this on this uh text level that's going to be even better right so we're going to go in here we're gonna do query collection and we're gonna do reviews from variable and what we want to do is restaurant ref and we want to get a list of documents okay so now we have that list of documents in this and this text field level so now what we can do is we can do this combine business that we wanted to do before and say and so this is going to be the average and here we are going to do get average rating and now we have access to this reviews okay so we can pass it but we want a map we want to only pass the ratings we don't want we can't pass the whole thing so we're gonna map them coming here pick rating confirm no further changes okay that's it and now you know we can do formatting and number format let's see do we want to format we can do a custom format now we don't really need to do a format here no format all right and so now what's going to happen is this thing is going to give us the the rating it's going to give us the rating confirm but we have this text combination right the next thing we want to do is we want to have the number of reviews and for that we don't need a custom function right all we need to do is we can come in here pick reviews and we have number of items okay and that's going to give us number of reviews and there are two reviews and the rating is like what a 4.5 I believe let's go ahead and compile our functions okay compiled Let's uh let's reload if that works all right so we have this little little Indian let's click on that look at that 4.52 Indian okay that's what we got so if we come in here now it says Indian here I think ah because it's 2 4.5 and 2 okay so we need another we need to do another thing we need to have a blank we need to have a space another thing that we can do is this um get average rating what we can do is let me show you what we can do we can do something like this put that up on top and then be like this this is gonna be like this add another one this is going to be a space so this parenthesis open parenthesis uh the average close parenthesis space and the number of ratings and then we can okay confirm see what that looks like now oh that okay there it is so this is the average and this has two reviews and then this is the category kind of looks like you know oh it says ratings what did I say reviews okay it doesn't really matter so looks good to to me and there's the star and we can also add a star if you want text combination add another so this should be ratings let's put that all the way up on top and put a star in here okay so we can have a star like this maybe okay looks good to me looks pretty good except the formatting is the other way around right so let's let's fix that let's let's keep it consistent and that's very very easy put that right here right here so now this is star number space open parenthesis number close parentheses try that just to keep it nice and consistent all right okay perfect looks pretty good now you can have a DOT here Indian uh you can kind of have a little bit of a space that's fine open until 10 pm restaurant description then you have the item here so the next thing that we need to do there's a couple of things that we need to do we come in here you want to do this screen and we also need to do on this screen so we did this thing we need to do this screen and this screen okay so let's go ahead and create this screen first and then we're gonna do this screen after that so this is a a simple screen kind of a restaurant information site screen and we can have it pop up maybe from the bottom have a different effect so let's do that real quick come back here let's add a new screen this is restaurant info info and do we want to create a blank page here we probably do one and let's see if there's a map somewhere no no probably want to just create a blank most of the time we're just gonna do a blank blank page restaurant info create page and this is going to be nothing well yeah something restaurant info we have the column here and now let's put some stuff in there we can put a map what kind of map do we want to put we have the Google Map we have this static map let's try the static map so we need an API key I have the API key so we're gonna do that let's remove the width we can even do expansion on the row okay it looks really good so now it's centered we can do that like this perfect now it's 100 300 okay looks good let's uh let's continue with the uh the other things that we need to do so name type couple of other address open until and the rating so a lot of the same information but let's do that anyway so we have this column we have the robots duplicate this row let's remove the map and let's duplicate let's create a site and let's duplicate this okay let's give it a little bit of a padding on the bottom all right so now what is this gonna say this is gonna be well we're doing this we're gonna yeah well we have a lot of this so let's do name and then category right we're gonna have so yeah we need uh we need the parameter right we won't know which restaurant there is let's do a parameter so this is restaurant uh this is document reference uh restaurant it's written firm and now we can unpack it where uh document from reference restaurant restaurant ref confirm confirm here's gonna be the map with the location of the restaurant where we can uh specify it and here might be the name of the restaurant right so something like name and we can do a we can do a little bit bigger and we can put the address Restaurant address we can put a open and sale combined text open until restaurant document close and then we want to format it right date time format something like this and then here best overall we're not really doing that there's some yeah and then we have this thing here so we can just copy it copy variable restaurant info come in here the real paste variable get average rating we don't have any reviews so we need the reviews let's get let's do a back-end query query collection reviews value Source from restaurant ref list of documents and now we paste it get average rating reviews map list items ratings confirm no further changes confirmed looks good to me now most items the same thing reviews long list items okay so now we have this in here and that's about it right so yeah looks good the only thing we need is a map right so we're gonna go to mapbox.com get an API key here we are on mapbox.com all right right we're assigned in and we have this token here you can create a new token for yourself we're gonna paste it in here and now we have the token and now we need to specify the location of the restaurant in a lot long right so if you come in here restaurant document we don't have a lat long right we don't have these fields right we don't have uh these specific um fields on the document okay so we need to do that and I'm gonna do that right now so here's a sample all that long in Manhattan paste that in there all right so there's a sample a lot long and obviously you can zoom out you can kind of see it you can see New York in there okay so that's actually a long island but you guys get the picture so that's long that long right there and we can store these right we can store them in our uh database right so if we go to this restaurant I think Little India right here you can add a lot long in here right there's a Geo Point here and you can store it location right and you can do that long latitude and we can also add it to our schema restaurants let's do location here not long so now we have location there and now we can do that we can just pick location okay and now it's it has the location that's in the system so let's go ahead and refresh this instant reload all right so click on Little India we have this uh we don't have a link we don't have a link to kind of get it get more information but the idea is if you click on this you're going to open up that page so let's do that real quick come back here restaurant detail and let's say you click on name and we're gonna do an action navigation to restaurant uh info info and let's do a transition slide up let pass reference confirm see how that works all right okay and there it is and that opens up and we have some information about it we can also have something like close because it's kind of like a pop-up dialog box and that's going to close and go back so let's do that have a little bit of a button duplicate this I'm in here and let's set up a text I'm gonna do a button we're gonna do a little bit of padding and I'm gonna say make it a little bit bigger make the button a little bit a little bit wider do that with uh let's see if it has something like I don't know I'm really bad at design you guys have probably noticed that by now okay so something like this that's gonna do a navigation navigate back okay perfect functions since we haven't changed them since last time there should be no issues no errors go back all right Little India click on Little India and we have this thing we go back it it's really nice it it's nice how it does it like we need a little bit of padding here but you guys get the picture let's go back to our detail we will take our info View and let's take a look you can have a marker from a URL as well color for the marker there we have it now we're gonna have a marker that's going to be displayed let's see how that looks alright so here's the app let's click on our restaurant click here and we have a nice nice marker here okay very very cool effect and it kind of shows where the restaurant is we can adjust the zoom level and all that we can go back and now we're back here we're back here and we're back on the main screen all right so we have this page now we need to have this menu item detail page and then we can talk about the card and the checkout so let's quickly do this menu item detail and then there's going to be some interesting logic with the add to card so let's do that real quick come in here here so this is a restaurant detail it's kind of similar we can probably reuse it I think we can reuse it in fact so what I'm going to do is I'm going to duplicate it and I'm going to rename it to menu item okay so this is gonna be item details or detail um and then we're gonna have the same thing so all of this information is going to be about this menu item right so here we need to change this document reference is going to be now menu item this is going to be menu item ref and firm and then we do that our unpacking here from this menu item not Restaurants menu item there we go and now we have all of that information so I don't think we have an image unfortunately uh for the menu item we don't have an image so we just have name and price so what I'm gonna do is I'm gonna remove it for now and I'm just gonna set the variables that we have so name and um price so we don't have ratings obviously that would be a good feature I think I'm gonna remove this and we're gonna replace it with price price and we don't need this we don't need this and that's about it like they have some extra stuff I'm just gonna skip that for now name price and then description I don't think we have a description do we no we don't have a description let's do yeah let's do special instructions that's going to go into the order and then the button just to show you how we can use this functionality okay so let's go ahead and do special instructions uh yeah description this is going to be item description for later maybe and let's delete this list and let's do a special instruction this is going to be text text field uh let's do Max lines three main lines three let's have it something like this and we can put okay and then um we don't need this we don't need this yeah let's give it a special instructions and then a button so I'm going to add a row column and I'm going to add a and button is gonna say well it's gonna display a bunch of things right we can display a lot of things we're going to Center this row let's Center this row right here let's make this button a little bit bigger the width let's make it 200 and let's make the text so we have special instructions we can also wrap special instructions in a container and then we can magic on the container like a border radius we can also do a little bit of nice padding and then we can also maybe do a and let's looks good to me fill color you can even do a little bit of a fill color maybe something like this and then there's this underline it looks good to me something clean and obviously we can have rounded Corners this container okay so something like this all right so this button what it's gonna do is it's gonna say add one to card and it's going to list the price because there's just one item right we're looking at one item and so what we're gonna do is we're gonna say text combine combine text one two what is it add one to car dashboard price and then the price here and this price is going to be formatted as a price displays currency okay so something like this add one to car there's the price now when it adds it to cart nothing happens it doesn't redirect the car that's the flow the card is accessed using this link here okay let's take a look at this we have this ah we have this redirection we don't need we need to remove this redirection remove that because it's not navigating what else we have something is set incorrectly as this right okay is the reviews oh we don't need we don't need any background query okay so now we're good to go we have the price name item description special instructions and now this thing here it's going to have a very very important responsibility it needs to add this whole thing and it needs to store this car uh this thing as as part of the card now how are we gonna do that well it depends how we're going to be displaying it this is the card and as you can see we we need to store the whole menu item we need to store the quantity by default it's one and also we need to store the special instructions okay now flutter flow recently introduced a really nice feature called data types right so we can come here we can create a new data type for our cart right so we can come in here and we can say card item type this is going to be our data type for items in the cart and what exactly is the data type data type is basically a combination of different simple types so I'm going to add a field and we need a menu item this is going to be our item menu item ref and this is going to be a document reference to our menu item okay and another thing we need to store the special instructions so which is a string for each item right this is on on the not on an order basis this is for each item right maybe you don't want something spicy maybe you do so we have the menu we have the special instructions what else do we need we need the quantity right we need the quantity okay so some uh the user decides to change it so by default it's one we're gonna have so we have the menu we have the quantity and we have special instructions okay custom functions will fix that later and now this thing creates uh a new item in our cart and how we're gonna store the card well card is going to be stored as an app variable right this app State App State variable so we're gonna come in here and we're gonna say cart and for the type this is going to be a data type and we're going to pick this card item type and this is a list of these data types okay create and now you can actually add an item right so if you click here you have these three things that we're going to be storing for each item right so that's kind of what we have now if we go back here go back to the app we can add an action and this action is going to be updating up state so it's going to update this thing and what are we we gonna do well we're gonna add to list right we're gonna be adding to list and what are we going to be adding to list well we're going to be creating a new data type card item type that's going to be added to list because it's an array of these uh complex types right so let's set the value so menu item ref is the menu item that we're on right now reference next is we have the quantity quantity is going to be one by default next we have the special instructions and that's going to be uh this widget State and now we've just created the special data type and we're going to be adding it here so every time you you click this you add one to cart you're going to have this special um special uh you know create we're going to create the special data type and we're going to add it to cart and once we create this card page you're gonna see um you're gonna see if we are saving it correctly because we'll need to display it and so I recommend I propose that we also create this card right here so that that we see if the items are being saved correctly or not and so what I'm going to do is I'm going to create a new page I'm going to come in here create a new page and we have this card yeah actually we might let's go to e-commerce we might find something so maybe something like this something like this it doesn't need to be exactly that Let's do let's do let's see yeah I think this is fine and we're gonna say cart okay so now we have a card below the items in your cart um it looks good looks good and now here we can display that the uh we're gonna load this list view up with the data from our um card from our app State we're going to click here App State card confirm and variable name uh we're gonna give it card item and now we can specify okay what is this card item this card item we're gonna go data structure field and while we need to unpack we need to First unpack things right because remember it's a reference on the container level we're going to do is we're going to unpack our menu items damage from reference menu items we're going to go to card item or data structure field menu item ref confirm confirm and now we have access to all those items click here this is menu item document name price here menu item document price quantity let's do text combine quantity and text and menu item document it's not it's a separate item right it's a card item in fact data structure field and the image we don't have any images just going to leave it at that you can edit you can delete so let's first see if it works let's first see if it's adding it correctly and then we are going to add some of more interesting functions all right here's our app let's pick this restaurant here let's go to item so we need to click on an item to go to the details yet okay so let's link it first of all let's go to restaurant a detail let's say they click on list view up and they pick on they click on this card we need to do a navigation to menu item detail and we need to pass the menu item ref go ahead and reload that if we click on this we're here okay and you can say like I don't like spice and now we can do that and hopefully that added and let's go ahead and connect our cart right we're gonna connect it we're gonna show navbar and this thing is going to have a card okay now we have this card over here so now reload this all right we're here and this card is empty we need to display that it's empty obviously nothing is showing up here we're gonna do that but let's see if it works let's see if it adds it coming here come in here add we added it we should display something up and we need to format this correctly go back and now we're seeing it here so so it's adding it correctly and all the data is here and even special instructions are there we can display it at the bottom if we want although I don't think yeah maybe it's being displayed here maybe it's being displayed on cart could be being uh because I don't really select the I don't I didn't enter anything here and so maybe it is being displayed let's display it in a small font so let's go ahead and duplicate this and we're overflowing but that's fine problem same there a little bit bigger okay perfect so this thing here I should not be a text combination it should be just make it we'll just make a special instrument here data structure field special so now we'll make it small now let's reload this okay if we go in here there's nothing here come here click here add to cart and there it is right special instructions to make it a little bit bigger okay that's fine oh I didn't I didn't enter anything in the special instructions let's try that again and entering something this time okay come here pick this uh please don't make my bread spicy enter it we need to display something go back go back here and there it is right you see that over there so it's being saved uh here there's no editing right you can't delete it but there's really no purpose to edit it right quantity one let's go ahead and fix that card let's remove this and let's skip that so this thing is very easy uh this is going to do App State and we are going to Upstate work with that and what we want to do is remove re remove from list at Index right and the index it knows the index right it knows the index because um basically it's it's working through it right so if we come in here index in the list right we have we always have the indexes and if you do that it's going to rebuild the current page automatically so let's try that out real quick all right come here no spicy add it okay it's there and it's gone okay so everything works now there's still a couple of things that we need to do we need to make sure the sum is correct uh we won't worry about taxes for now that's very simple but we need to make sure sum is correct so I'm going to remove taxes and I'm just gonna remove this I meant to remove this and this thing is I'm going to remove that just gonna keep it simple now how do you compute this sum well you can't compute it while the app is running meaning you can't compute it on the Fly you need to do it when people are adding to the card and when people are removing from the card right so for that we need to create a new state variable called card sum and this is going to be a double and this variable is going to keep track as you were adding and removing so for instance if you come here and you have this menu item detail and you click on this actually let's make this bigger I really want to make this bigger let's make this bigger not that big maybe something like this make the text bigger yeah something like this okay so if you click here when we are adding this we also need to update the variable okay so we're going to go back to App State update App State part sum and in fact I think we can do it in one fly and one flies we can add the item and update the variable so we're going to increment this variable by whatever we added right so if we come in here this menu item document we added the price we're going to increment this variable okay and so this is going to automatically keep track of the sum and that way when we go to the cart we can display it we're going to say Upstate card sum and we want to format it by using custom formatting we want to do displays current and we want to do the same thing when they remove it so I'm going to do card sum and I want to increment decrement and I want to increment but I need to take the negative okay so I need to do a code expression and I need to pass a parameter my parameter is an integer and the value of this parameter is this card item not the this is a data structure no cannot be a menu item document price and what we need to do is we need to multiply this var1 that we're passing by negative one the first should be no errors and that way it's negative that way we can decrement it confirm and now it's not so let's see if that works no errors we load this okay let's click on this add come back out come here and it's here right it's five the total is five we do this it's gone it removes it automatically directly so that works perfect um we can also display empty cart later that's very very simple and we need to make sure this checkout is set correctly let's have this thing do a combined text let's do checkout space open parentheses App State card sum what format it as quiz currency that looks pretty good now it's a little it's a little tall that looks pretty good now that text has a lot of padding we don't need that much padding we can make it bigger okay so something like this and now this is connected this is going to be all the same okay so this card works the next thing we need to do and this is the last thing we need to do in this section and that is a do a checkout okay so this is where they can specify their credit card and do a check also let's do that right now let's do a I think e-commerce their credit card form somewhere continue to check out there's no checkout settings there is a checker oh it's continued to check okay so we can do it ourselves we can do it ourselves something simple and you know we can have a you know code here and we can just display a credit card some kind of a credit card form or Apple pay or whatever you take right so and then we can have another button Pro it's a little bit bigger 70 to one size bigger okay so something like this let's also pad this okay so something like this a little wide okay A little uh it's it's too high okay I the height was bigger it was not proportionally looking so check out and that's it so this thing here is going to create a new order right so if we go back to our delivery we have users and each user has they're gonna have an order right so if you go back to our schema in fact orders and order has a restaurant reference time amp and Status okay a restaurant timestampment status we can also store the menu items if we wanted to um you know if we decide to do that but let's just store it uh restaurant reference time stamp and status just to keep it simple and this thing is going to create a new document a new first or document collection and we need a user reference this is authenticated user which is me and let's add the fields restaurant reference well we need the restaurant reference we don't have the restaurant reference so we need to get it somewhere we can store the menu the menu item reference and from that we can get the restaurant reference so that's one way of doing it let's do timestamp we can do current time and one more status so status is New New Order okay and let's do a restaurant reference in fact I don't want to do maybe I want to do menu item there's going to be many menu items and so in fact yeah let's just do restaurant reference just to keep it very very simple but for us to do that we need to pass the menu item and then from the menu item get the the restaurant this card this card has all of these things right this card has it so in fact we can just get it from the cart in fact this is really easy we can just go in here check out check out restaurant reference we can get it from the cart App State uh item at index doesn't really matter it's all from the same restaurant first and now we have the menu menu item reference and we cannot get the restaurant reference from that we have the menu item reference but what we need to get is the we need to get the restaurant reference from there so I thought about this and I decided wouldn't it be just better to store the the whole order right so in fact we can come in here we can just store the whole order right so this order here we can just say instead of restaurant reference we can just store the whole order right so this could be order items or items something like this this could be a data type and a data type here and then we can specify this is card item type a list and this is going to be the list of those items that we're uh that were in the cart right so now you can go to items and then you can say set value from the cart Bingo and now you have all of those items uh for next time like that they're stored that you ordered and you know you can get any data that you want from that so let's do that all right so we have checkout and once you check out we're gonna redirect to the front page we're gonna save everything and we're gonna do navigation yep that's fine okay and now we're gonna redirect so one thing I wanted to do is menu item detail when they add to cart I want to add a back bar and I want to say item added and I don't want this background color I want it to be blue right something maybe like this and then text color is primary text that's fine okay and maybe two seconds okay so now let's go ahead and reload this all right there's the app coming here we want this thing add item added to cart maybe make it a little bit darker go by here card and there it is right we have the bread not a shoe checkout and we need to link check link check out add an action uh this is going to be a channel we can just and that's it now on the checkout you were just using the card stuff right uh we're just using the card information when they check out so we're not passing any parameters we can say you know order about order place like this okay and so this thing redirects to checkout they can Place their order and then let's see let's see if the water is actually placed in the database uh please don't make it to add it there's the item displayed we're done we go to our cart there's the thing check out place order okay and redirect it to our front page our home page and now let's reload our data and see if we have these items okay and there's the order there's the water and there's the items look at this we have the item with the menu item everything is their status is new time stamp this is the timestamp beautiful and now there's you know status we know all the items we can send the user I received because we have the um we have an array of all the items this is much better than storing just a restaurant and from this we have this restaurant ID we can get that as well so it's all really really nice later on we can also you know we can send the user information things like that and now the order is new you and now you know the system is gonna set it to provisioning processing accepted Etc it's set to run all right so looking back at the pages that we have to do we pretty much did everything but there's one page that we haven't done yet and that is the profile page okay and that is that page where you go to you look up you know your details maybe you can modify your email change your phone number and also I want to create that page and on that page I want to create another page with a list of orders so this is going to be your past orders these are going to be your current orders uh things like that so it's going to be very very easy to look at your personal details and also take a look at the orders that you've placed before and especially the order that's happening right now because we want to do real-time order tracking there so let's go ahead and create a page like this right now right so here we are back in the app and what I want to do is I want to create a new page and fortunately there's already a page that gives us information that is this settings page if we go into settings there's some good templates that we can use and so let's take a look which one of these looks catches our eye here catches our attention all right so let's do something simple I'm just gonna start yeah maybe with this one right here so I'm going to say use my template and I'm going to call it profile okay I'm gonna create a simple profile page and the first thing we want to do is well I want this page to be on the um on the nav bar on the bottom so what I'm going to do is I'm going to show navbar on this page and this is good this person is good so we're gonna have that here let's change the data that's being displayed change the name to authenticated user display name change the email to authenticated user email and now we have change password we have a bunch of other things and what I want to do is I want to create I want to duplicate one of these things here this container in fact and I want to do a link to the orders page that you can see from this profile page I think that's how it is in the main app we're going to duplicate that and then we're going to say or I don't know view orders or something like this so we have this link here now let's go ahead and create a quick order page and what's nice about it remember we are saving that order information on the user themselves right so we have you know all the water we have the complete array of the waters right so if we go back to Firebase and we go let's say to um here we have users and we have these orders and in each order right money on the on each of the documents and orders collection we have items and this is an array of the dishes the menu items that we ordered for that order so we can list the waters and we can also list the actual like list of menu items for each order that's that is really cool and obviously we have the status we have the timestamp that the water was placed and things like that so it makes it really easy to get that data and display it all right so let's go ahead and create another page this is going to be our orders page and this is going to be a list let's take a look at some good lists that we can kind of use I guess any of these are fine what about this one right here uh this one yeah maybe yeah let's use this one I don't think it really matters and we can just say orders okay so now we have the list of orders I'm just going to say orders here and your your orders okay something like this uh we don't need this and this right here is going to pull up our orders the person's orders right so we have this listed here and what we want to do is we want to do a backend query we want to just list the waters and then inside the water we can also get some information about the specific dishes from the um the order array okay so we're going to do a query collection we are going to do a Waters here right so it's orders under users okay and then we're gonna say from variable and this is our authenticated user user reference right because I want to see my orders we're going to come here okay so now we have the orders collection and then we can display the top level elements for that order and these are going to be right we can't display this because we need to get in there first this is an array this items items is an array right these items but we can display the status on the timestamp okay so let's display um let's go ahead and display in fact we could probably display let's say the first item in fact right that's gonna be fine and we can also also displayed the status right here is going to be the status order document status and the timestamp um we can I guess display maybe below it let's let's display it here first and see if it shows up properly let's format this time and we're gonna do to a full format in fact we don't need the time yeah I guess we can just do date uh day of the week month and the day we can do that and then the title will change that around all right so we have the orders let's go ahead and test it out let's see if everything works because you know we just created two pages and we want to make sure everything works I like to keep testing uh fairly frequently just to make sure that things work the way that we expect them to work all right so let's wait for this to load all right so here's our app if you scroll down we have the profile page if we click on that uh we don't have the picture we haven't modified the picture but we have the email but I also don't have the display name so if I come back like here we go into users I go into my user and I add display name I think it's my underscore name if I'm not mistaken let's go into the schema display underscore name okay and I can say James now it should automatically display it right here and I'm going to change the email of the image as well and so now we have the data it's everything is fine logout should work as well but we don't want to log out the view orders does not work so let's go ahead and Link view orders real quick we're going to go to the profile page and we're gonna link uh we can we can link this whole container right makes it easier to click navigate to and orders uh default is fine yeah all right we have our beautiful app view orders all right so this is what we have so as you can see it says New Order and this is the date because this is the time I place the order so if we go in here I go into orders as you can see this order was placed on June 1st and that is why you know that is why this is what is being displayed so everything is fine and we have one order the only thing that we might want to do is we might want to show some maybe the number of items or you know some kind of information about the order I don't know if you want to display everything because you can have many many items you can if you want and we also want to delete this thing we don't really need that because that is the detail so we're gonna go back to orders come by here let's delete this and and in fact yeah so for the title maybe we want to display a number of items we can just come in here border is a document and we have items right so for items we can't display items because it's an array but we can we can do number of items right we can just do number of items like this and it's gonna display you know how many items right so we're gonna do a combine and also do combine and add text and then we can come in here orders items is an array so we have number of items number of items and and so it's going to be the other way around five so something like this if we refresh that yeah it should say five items or I think it's it's gonna say one item because we just have one item in there and let's see that let's Okay one item so maybe we need to take into account plural or singular number of items so items that's kind of what we have so how does it look new let's do status let's do a um text combine let's do status add text and then orders status okay so status is going to display status and this is the date okay and you can kind of change that around now you can take this further you can also display uh the image right so you can click here and you can scroll down and you can do an image right how are you gonna do that well you have items right so you can click on items you can get items at index you can get the first item and then you can get the menu ref and assuming that you know you can unpack that variable you can display the image but we're not storing images here but you have all of this information right you can unpack it right so essentially what you can do is you can go on this level on this menu item level and you can come in here and you can unpack it's and do a document from reference and then you can do menu items and then you can come in here orders items um item at index X you can just say let's say first item you can select menu ref okay and now you've unpacked that first item you know you have to decide which item you want to unpack and that's fine you can just display the first item and now you have the image right so now you can come back here and you have that item right and for that you can get the image so we have menu item and if you had image here you can just pick image and you would just be able to display the image but the data that we have is coming here uh let's go to Restaurants menu items we have we have name and price so you know we can display any of them if you want right we can display that here but I think image of like the first item would be the best the best case scenario in fact and so you can in fact let's let's do that right now just for this example right so let's add a field image all right so I'm gonna paste an image URL and I'm gonna add that image to our schema menu items image we're gonna do an image path and then if I go back to the app the UI and I come in here I can now okay so now if you reload it we should have a beautiful picture of the bread and I think that's the right approach because you don't want to list all the items you just want to maybe you want to list them in one line you know not like one after the other but I think displaying the the image from one of the orders is perfect view okay now we have the image which is the image of um the first and only item in this case so that looks good one item status is new this is the water maybe put the water at the bottom it's really really up to you these are cosmetic things but now you're seeing the waters you are seeing what's happening and the user can follow the status here because the status is going to be changed on the other side right so you have the the people ordering right the customers and then you have the restaurants so the status is going to be changed from by the restaurant and it's also going to be changed by the Courier who is delivering it right so once the restaurant starts preparing it they're essentially going to have their own app and what they're gonna and what the app is gonna do is the app is gonna go uh to your order right so let's go back the users let's go to your order and the app essentially is going to change the status right so it's gonna say uh preparing okay we're gonna have it we update it the moment you update it you're gonna see this preparing the customers app is going to see preparing and then from the moment it's handed off to The Courier uh the delivery person right I'm gonna say you know you know being delivered right so the app the other app right you're gonna have two apps this thing is gonna say delivering right and so the person is gonna come back here and they're gonna see delivery okay and so now we are done with the customer facing part we're done with everything that the customer needs to do because from this point on the customer just needs to wait for their order to be delivered from the moment that they order it's all in the hands of the other party the restaurant The Courier the delivery person etc etc and they're going to be their app is going to be modifying these variables okay whatever app they're using maybe it's not the system and so the only thing that we need to do right now and I really wanted to do this is for Real Time order tracking where the order is being moved from the restaurant to the customer and they can see this on the map and so that is what we're going to be doing right now all right so the app is starting to come together but there is one last thing that I wanted to do and that is to show a real-time order tracking okay right now the app is good but I think that is going to be really kind of the icing on the cake okay so we have this orders page right here and what I'm thinking of is they can click on this and it's going to go to another page and on that page they're gonna see a map They're Gonna See You Know The Courier moving from the restaurant to their destination uh they're gonna see maybe how much time is left how much distance is left you know things like that so let's go ahead and do that real quick so we're gonna create a new page and we're gonna say we're just gonna start with a blank page okay we're just gonna call it order tracking create page and this is the page right here just rename it to order tracking and the first thing about this page is that we want this page to know the order ID okay so that's the first thing we're gonna come here create a page parameter and we're gonna say order ref order reference maybe a document reference it's required and it is orders confirm and then the first thing we want to do is we want to unpack that reference and get a document from right so we're going to do orders and we're gonna unpack this page parameter okay and so now we have the information about the order and so this allows us to get you know things like order status the time of the order as well as the items that the person ordered and so that is all great and useful right we can display this on this page the main issue here is how do we show the the person you know The Courier moving on the map so flutter flow has you know some map objects we can search for map and there's Google Maps static map and the way these work is that you can provide your key and they all work the same way is that they show you static points right you can't really have Dynamic things on this map right these built-in widgets don't give you the ability to um you know create your own you know directions or your own navigation or anything like that they don't allow you to do that so while this will worked in situations where you know we needed to display the restaurant where it's on the map put a marker there and things like that and you can put multiple markers if you want unfortunately these widgets are not good enough uh if you want to show some kind of navigation information so something moving you know stuff like that and so we need to look further and so one place that you can go uh in order to find these custom widgets right remember everything in flutter flow is a widget and you can build your own widgets and there are other people that have built widgets and shared uh with the rest of the world so if you go to pop.dev you can search for lots of interesting widgets so you can search for like maps you can also type Google Maps so you can type Google Maps and see if there's anything interesting and when I was searching I actually found a very very useful widget that's going to be perfect for what we're trying to do this is called Google Maps widget and if you open it up you can kind of read more about it but you don't even need to read anything you can just look at the screenshots and you can see this is exactly what you want right there's even like a picture of a restaurant there's a picture of this final point this is the source name and there's even like a little a little thing moving around right so this is exactly what you want they give you some instructions now let's say you're browsing this package here and you want to try out you want to see how it works before you start putting in some of the extra Logics such as connecting it to an order etc etc you just want to make sure that it works right that it displays the map well if you scroll down they have a bunch of examples here so here's an example sample usage and all you really need is this part here everything Beyond it is like these optional parameters that you need but you don't need just to test it out so the way you set it up is you go back to your app you go to custom code and we're gonna add a widget here okay and the next thing that you want to do is you want to click here and you're going to see this boilerplate widget code you're going to copy this to editor and you're gonna see this thing right here now this is the part that actually draws this widget on the screen and provides the logic etc etc now fortunately I already have the code that we need so I'm going to copy this copy it here the only thing that we need to do is change the name I'm using gmap so we need to make sure that it's correct here it's gmap here and another thing that you need to make sure is that you need to specify an API key this is my valid active API key this is Google Maps API key and if you go back to this page here and you scroll up a little bit you're going to see getting started so they give you like really nice instructions how you can get your API key it's very very simple just a bunch of clicks and it's not going to cost you anything unless your app becomes super so super popular like everybody's using it but until then it's not going to cost you anything okay so you need to follow instructions you're going to get your API key you're going to paste it in here the next thing that you need to do is you need to go back to this page and you need to click here and that's going to give you the link to a dependency and why do we need to do that well this code here is just a code that uses third-party code which is this code right here that you know you need in order for this to work this is just the gateway to it this is just the interface and when you add up dependency here we're gonna paste whatever we copied here when you clicked you're essentially selling flutter flow and flutter that listen I have this code but it relies on this widget here to make sure you compile it as well make sure you check it out because if you don't have this it's not going to work right next you're going to click save you might get this message but I wouldn't worry about it too much you're going to say yes and now you need to compile your code you're going to click compile and you're going to wait for it to compile it's the same story with custom functions you need to make sure that you compile these first so that it validates that everything is fine fortunately this is relatively you know short piece of code this is relatively a relatively short custom widget so it's not going to take a long time all right so it's done there are no errors everything is good to go and that means we can go back to our app we can go to this order tracking screen and we can go to our um the top level here add a widget and instead of adding these built-in widgets we can now add a custom widget which is the widget that we've just created we're going to click here and this thing appears right you can also give it a width let's give it 350 and you can give it a height now there's one problem there's one big problem as you can see there's a message Target platform that Mac OS is not yet supported by the maps plugin and what this message means is that remember flutter and well flutter Flow by extension it builds apps for all platforms so for desktop for web for iOS for Android and some widgets they run on all platforms right some widgets do not as it happens to be this widget here that we are using to display the maps it's all it only works on mobile so if you go back to um this package here as you can see it says platform Android iOS and that is because the person who wrote it decided to support these two platforms and what this means is that you can't run the sub you can't you know you can't view this widget on you know on on my laptop here this is a Mac laptop but also if you run it you won't be able to interact with it because when you run it it's like just like you know it's like a desktop or a web it's not mobile right you can't you know you can't test apps and to see how they're going to behave on the mobile because when when Florida flow runs it when it launches the app it's basically either desktop or web so it's it's not going to work in any case and so in this case what you need to do and this is something that you need to do anyway right you know if you're serious about building apps you want to build the real IOS app or a mobile app or any kind of app you need to download the code so what we're going to do is we're going to click here we're gonna download the code because you know under the hood this is all flutter code it's just we didn't have to write it from scratch we are just you know we're using a UI but it generates flutter code so we've just downloaded the app here and once you downloaded the app you can just unzip it and that's going to create a directory and now you have just your Good Old flutter app and what you guys need to do now is you need to you know check out the code and you need to run it in a in a simulator right you can run it on your own device if you want but it's a lot easier to run it in a simulator now I personally use Visual Studio code it's absolutely free it is what you know most people use I guess is the most popular one and this is what I recommend it's absolutely free and so you can just click on it once you install you're gonna go to file open folder and you're gonna find your flutter app this is this app right here we're going to open it up and now it's going to tell us uh do you want to do something you know it's going to give you a message you want to say yes and it's going to create your app for you and so now what you have is an app you have as an app and what's nice about this app is that you can now run it in different environments so I can run it on Chrome I can enable Mac OS so I can run it as a desktop app I can also run it in an iOS simulator I also have a pixel emulator so what we're going to do is we're going to start our pixel 6 Pro emulator here which I have running right here this is a real emulator these emulators whether it's iOS or Android they're real right if your app runs on one of them it's gonna run on a real device right so we're gonna go find main which is this uh entry file here main.dart once we have this selected here you're gonna go to run run without debugging or start debugging doesn't really matter I do run without debugging I want to make sure this is selected here we're gonna click here and we're gonna wait for it to run and it's gonna run it on this device this is going to be like a real app how your end users are gonna see to make sure that everything works fine we're gonna wait until it finishes uh setting it up and launching the app all right so here's our app as you can see it's displaying perfectly and we can search for you know different restaurants we can search for India and we see Indian we can type something else you know Spain and we see span little Spain over there or we can clear it and we can um just see how all of them so we can click here and then we can go to view orders and then we can click on any one of these orders so let's say we click on this one and guess what we see we see a map we see a map with two points and this I believe is in Spain somewhere I think this is Madrid as it happens to be just sample points and we see a uh we see directions from those two points and that is because we created this custom widget with this Source a lot long and destination that long so this is you know one point this is you know one of these points is the source and one is the destination so as you can see this works perfectly of course we need to center it we need a back button we need and all that but at least we are seeing the map at least you know this is actually working fine and so now we need to fix it up a little bit maybe add a back button but the most important thing that we need to do is we need to connect our order information you know the stuff that we have the location of the restaurant the destination all that we need to connect it to the map so that everything kind of connects together and that is what we're going to be doing right now and so with the help of Chad GPT as well as some of my own research I came up with a code for custom widget that takes into account some of the information that we're going to be passing into into this custom widget so that we have all the right points in the order right because if you think about it what we really want to do is we want to specify let's say a restaurant here and the user here and we wanted to you know we want this thing to move uh when we're feeding it data so if the Courier is moving about and they're getting you know they're getting points sent to them they're getting you know that their phone is is sending coordinates we want you know these things to show up on the map because that's exactly how you know navigation how these options work this real-time water tracking order navigation and so what I did was I have a Source Point that's located around here somewhere in lower Manhattan and I also have a destination that's somewhere in the upper west side somewhere around here and I also gave it three intermediate points that simulate a courier sending those points that are going to be sent using that so let's go and set this up we're going to go back to our app we're going to add a new custom widget this this other one and we're gonna paste this custom widget that I have here that I created and the only thing we need to do is we need to make sure the the names match up it's called gmap widget 2 right here and that's about it now this widget takes various parameters unlike the previous widget right so we're going to be passing uh we're going to be passing the document reference which is the orders.ref because we need it in order to access the document and we're going to say this is a document document reference orders it's not nullable and then we're gonna have another parameter this is going to be orders dock which is the actual document from the orders collection and say this is document and orders right here so as you can see these need to match up orders.craft order stock these match up and we also need to make sure we have our we copied this to clipboard here okay so we're gonna come here and we may we need to make sure that we also have this dependency here okay now we're gonna hit save we want to make sure that everything adds up everything connects and the thing about this custom widget is that it takes into account that our order order record has various extra Fields so if we come in here to our orders I added this field so we have things like source which is a lot long we have destination which is that long and we have driver positions which is the list of lat long now when you specify the data in your order right when you specify where the restaurant is and where you know the user is etc etc it's going to work fine so let's go ahead and compile this correctly all right let's wait for this to compile it's going to take a little bit longer because there's more code here and as you can see we're still using that Source slot and this nation line except this time we're taking it from this orders dock that we're going to be passing into this custom widget from the outside all right and it compiled with no errors so everything seems good let's go ahead and include it and pass the right stuff so we're going to go back to order tracking we're going to delete this custom widget and we're going to add this new one this gmap 2 we're going to give it a we're going to make it a little bit bigger something like this and now we need to pass the order.ref and the order is Doc so the first is going to be the reference you can come here reference and then we're going to pass the orders document and we have that we have that information because we're we're passing it to this page via a parameter right and then we're looking it up so we have this data here and that's about it now we just need to download the code and test it out on our simulator because this is not going to run on the web or the desktop all right so we got the app open that up right here there it is open the folder open the directory of our app this is right here open it up and now we have the app it tells us that it wants to do something all right and there's our app let's go ahead and run it we need to make sure we select this emulator here and now we can go to run without debugging and hopefully it's gonna work let's see now while that is running let's make sure we have the right data that we're passing and so if we go into users our user we're going to go into orders and we have two orders we need to make sure that we have the right order information there okay so if we go into our app over here we go into to schema for the orders we need to make sure we have Source destination and driver position which is uh you know that long and then a list of lat long so we're going to go back here and over here we have two orders right we have one order with new and then we have an order that's delivering and this order that's delivering we actually have some information right so close this we have location and that is not exactly correct I believe it needs to be driver position Source destination driver position so we need to make sure that it matches up correctly so let's go ahead and add let's go ahead and add a field Source this is going to be lat long geopoint we're going to add it to us in a second let's add another field destination geopoint and so we have Source we need to we have destination and we have driver driver positions so we're gonna go back here and add driver position Survivor positions that's going to be an array of lat Longs right geopoints now I have this nice file here we have the source and then we have the driver position so we're going to copy that right here paste that in there and we can delete this location and so we have driver positions let's get the source correctly there's the source and we have the distance we're going to add more driver positions in just a second I just want to make sure that it works so we have Source we have destination desk t o That's misspelled I'm good I called that because that's a pain you don't want to misspell things what is that that's still Nation we need to delete that there's no mix up so we have Source destinations and we only have one point for driver positions okay and so now if you run the app you pick your emulator here we have pixel 6 I come in here run without debugging it should hopefully look pretty good all right the app is loading or right there's our app let's come over here to view orders we have our order here we're going to click on that we see the map but we're also gonna see the movement as well see it's moving here now that's the point that I specified and then it's going to make another Point here and there is another point right here and I believe that is the last point and I also gave it a name I just put a random name and you can put that in your custom widget here so you scroll down and so here we have info window title I gave it Alex that is all part of this custom widget so you can configure it and another thing that you can configure is you can configure the images that are shown uh in terms of the restaurants image the destinations image as well as the user's image all you need to do is go into your assets images and all I did was dragged and dropped the images that were provided to me by this plugin so all you need to do is click on repository again GitHub you're gonna be on this page right here and then you can go into assets and you have these three icons here here is the first icon this is the driver this is the restaurant and obviously you can supply your own icons even you can even Supply icons from your own app but in this case I just did right click and I just saved it and then I just dragged and dropped it uh into this folder into this assets images folder and so as a result we have an app that basically has the driver moving those points so remember I specified those points in my database so in my database I have three positions this is the first position Source then we have this position this position this position and then production you're gonna have some kind of an external process that's supplying these coordinates as The Courier is moving so as The Courier is moving around it's going to be supplying this coordinates another really nice thing about how we did it here is if scroll down you also have the time callback so every time the driver moves from one point to another it automatically recalculates the time that you know the driver needs in order to get to the destination it uses Google's Maps navigation functionality in order to calculate the time and it also calculates distance so if you want you can also you know have these modify a field in your database so in other words if we go to our delivery app we have this order here so we have like status delivering you can also have a couple of more Fields such as time left distance left you can modify that and then inside of your app here right so you have your order status right here right you have your order tracking you can specify these fields here so all you need to do is add another you can just simply add another text field like this and you can wrap it in a column and below it or above it you can just specify uh this field to be you know grabs from the database so we have this order document and once you have these extra Fields you can just specify them there and they're automatically gonna going to be modified by the app by you know as The Courier is moving to its destination so it's a very very flexible system but the best part is we have this real time order tracking as the process is sending coordinates and adding those coordinates to that field and so if you add more Fields here they're going to be displayed here as well now one thing I really want to add is a back button here and you can add a back button right here by clicking this and now you're gonna have a back button that way the user can come back and look at their other orders or maybe come back to this order if it has been updated with some new information about The Courier or you know something else is happening now obviously you can customize this app any way that you want you can change how the map is displayed you can add some more features add some more screens add some more functionality it's really up to you how far you want to take it but at least this should give you an idea of what you have to do and what it takes to build a fully functional feature Rich app and remember as always this app as well as all my apps is going to be available from my patreon where you can view and or clone the app so you can take all of this app you can clone it you can you know build your own app you can launch it into the wild you can create your own you know delivery service food delivery you name it or you can modify it you know build some kind of business on top of it and so if viewing and or cloning this app is something you might be interested in then definitely check out our amazing patreon Community using the link in the description below the video and consider becoming a member

Channel: James NoCode

Views: 47,679

Keywords: build uber eats, build delivery app nocode, build doordash, build grubhub, flutterflow delivery app, build glovo no code

Id: HPLqOtyr1qs

Length: 141min 19sec (8479 seconds)

Published: Sat Jun 03 2023