How to Build Uber Eats Mobile App without coding using FlutterFlow and Firebase - Part 1

hello guys welcome to another tutorial by no code Africa and in this tutorial I'm going to teach you how to build an Uber Eats application from start to finish right so um we have a design here that's the UI ux design from the figma community right this was gotten from the figma community you can check the description under this video for the link to assess it right so all credits full credit goes to the person who worked on the UI ux design I'm purely using this for educational purposes okay okay so uh now that we have access to these what are we again to do straight up is we're going to just go ahead and recreate it all right so uh let's jump right into it before we create it I would like to just you know take you through the uh application and just show you what's possible Right on the UI right so these are the designs uh that we have here right so we might change some things a little bit uh if necessary towards the end right yeah we could maybe change this to a verification link sent to email possibly or we could also still try to implement it right anyone that works okay so we have that and then we have uh the home screen all right so home screen uh delivery right this is it so delivery pickup dining and all of these features so we will try to see how we can Implement all of this and um we have the different categories here and um okay this is for home screen but dining this is for categories right category screen right so but we have pickup as well okay this is for pickup part right so we will try to implement this to the letter right so we have the convenience the story screen change address screen filter screen we have a couple of things that we will need to like Implement here then we also have a restaurant details we have a couple of things here to do it's a lot of design a lot of design and then we have the card screen card screen the older screen uh the basket part right recommendation screen delivery details screen all that canceled screen uh we have such category screen search screen reward screen office screen uh we have grocery store screen uh pass all the screen item details screen load screen all that detail screen lots of things here later on we will try to organize this a bit and then track all the screen right so we also have a track order screen here and then uh track all the screen this is like the alternate design and then delivered screen all right so these are all the screens that we have and then the account settings as well so we will try to implement all of this first of all we're going to do it as our front end fast we're going to handle all the UI design like convert all these UI designs in photo flow and sorry convert all the UI design inside figma into Florida flow and then after that we will start the back end as well so this tutorial is broken it's going to be broken down into different parts and you will always see it is part one part two part three like that till the end okay so let's jump right into it and let's get these rolling okay so just the way we always do it we're going to be building with Florida flow and if you don't have an account check this description under this video for a link to click and get a new account for free or if you already have an account just click on sign in and then we will go straight into it I already did I clicked on that and then it to just quickly bring me to my Florida flow dashboard it's already opened here so I can just jump right into it so I'll go ahead and click on create new and then I'll call my application Uber Eats yeah Uber Eats and uh I will go ahead and click on create blank and wait for a couple of seconds and this comes up I can go ahead and click on next step if I want to set up and connect it to Firebase but I don't want to start by connecting my application to Firebase so I will just skip this process yet when it's time we will connect it so this is it we have our uh project photo flow projects dashboard and we can begin building all right okay without wasting so much of Time how do we start let me go ahead and close all of this and we just have this now so let's start first of all let's click on these to check out the dimension of the screen so it's 375.812 the base screen so we will have to go ahead and confirm that we're using the same thing so just click on here and select this particular on iPhone 13 mini beautiful click on the app bar and delete it just click on delete on your keyboard and that's gone now we need to go ahead and then start replicating all of this you don't need to put all of this particular part in your design no uh it's not necessary like I mean this part that has to do with time time you don't need to put all of that so we just need the base designs here so leave these ones alone okay great let's go ahead and then uh this is just pure text uh let me see um let's click on I want to see the font type that has been used here it's not been stated here I can see the properties of the font completely okay it says here it's a vector image okay so this vector it's not a text per se right it's not really a text so this is a text okay so this is just more like a vector image okay great no problems so what we would do is just click on this and get the this is more like a black or not really black but let's just click on this to copy the color and go back to Florida flow and then you know identify our widget tree this one is called the splash screen so let's go ahead and click on the home page click on the scaffold here and call it splash screen okay or just say Splash okay then we can just go ahead and check this box here now this is our scaffold we just need to go ahead and then wrap this is the main column so we will just right click on it and wrap the widget with the container right the container we're going to go ahead and give it an infinite width by clicking this and an infinite height by clicking this and then we will go ahead and then paste the color code for the project right so now we have it it's like green it's like black I'm not so very good with colors right so I think it's more like a very deep green yeah I think it's a very deep green it's not black okay you guys might be way better with colors than myself which is a good thing so let's go ahead and click on this now and go to export and click on this and make it 3x and then just uh maybe preview it to just be sure that it's there export Vector so now we have this Hoover and the image to see the dimension you see it says one one seven by 41 pixel so we will go ahead and come to our design go to the column itself click on add a chart to widget and then go ahead and add these as a role I like to do it like that and then now we're going to add an image inside that row so this is the image it's a 117 by 41 right so 117 by 41 and then remove the Border radius just delete it click on network change it to assets so that you can actually upload an image from your system so I will go ahead and go to where my files are and this is it I'll click on this and click on open and there you go all right so now we have these particular information we can just go ahead and uh we can go ahead and then do some setups here right so let's see uh here if you click on this particular point you can go ahead and then Center align it right and then we can go ahead and then click here to duplicate it right so just click on this and say Ctrl D to duplicate the item right so just duplicate the item here and then what we need to do is quickly we go back here and click on these particular logo uh I think it's spreading across all like this uh I don't know why that's like that okay so it's not giving me the it's not giving me the vibe that I need let's turn it off let's turn off the developer mode and I think oh it's not working like that even if I do it like this it's just gonna distort the shape so this is uh this is the vector okay this is a real Vector the whole of this was like holding everything so this is a real vector and this is what we want to export so uh we can use this just click on export click on 3x export vector great so now we will go ahead and click on this uh click and upload image we want to change it so this is the the logo now so we just click on that and then we have the it's nice so let's see it might have some space right up in between it that's 7.59 but I'll just make it eight so I'll click on the row that has the the image of the logo and give it eight okay so that's it now I need this thing to be at the center of this column so what I will do quickly is I'll click on here so Center align it right so that's it we have our design just the same thing like this we don't need to bother ourselves with this particular stuff okay so now that we're done with that let's go ahead and work on the next screen bear in mind we're just focusing on the UI for now right in the subsequent part of the tutorial we will start the back ends good really good all right so now we will go ahead and then add another page so we will click here to add another page then click on create blank to add another page to it so this is it this is the landing screen so we will call this Landing screen maybe Landing yeah just call it Landing screen Landing screen and we will say create page okay so we'll click on this and delete the app bar and then now we need to just go ahead and set this up so click on this particular image find the dimension which says 375 by 524 right so we will come here to the column and then click on this and put a an image inside there make the image in finite width that's okay and then say 374 as the height okay so we will come back here it was oh 5524 actually so the height here is 5 24 right did I get that right why is it skipping okay 524 good I'll click on export change this to 3x just to get the highest resolution of this image not the highest one of the highest so I'll click on this to export the image itself and I can come back to here uh go ahead and remove these border radius we don't want our image to have a border review radius change from Network to asset click on here to upload the image right so we will click here to upload the image and then now we have the image inside flutter flow okay now we have this particular information what do we do next good good question we will just go ahead and then work on this stack so I will double click on it uh it says I don't have the font right in my system so this is going to be a bit problematic for me so there's a there's a font called Uber move right I don't have it installed in my system so I will just uh use something else right I will use um solosense Pro right I would just use that okay so uh but now how do I copy the text when I want to use it so I will go ahead and then go back to developer mode click on it and then I will see the text here so I can just click here to copy it all right so the text is the 500 by 24 so I will go ahead and click here the column click on added child to that column and click to add a row in the row I will add a text inside the text where I'm supposed to like put my text which is here I'll just paste what I had copied good and then it was 500 by 24. good and uh it's just a regular black color so let's go ahead and say click on here and say 500 by 24. all right we're doing a great job let's go and then this noun has our text you know going from left to right and we don't have we don't get to see some things that I hear how do we go ahead and make sure that this thing falls down like this so first of all we have a padding of 15 on the left let's go ahead and give our text a padding of 15 on the left here so I just put 15 here it pushes it a bit here now how do we make the remaining stuff to flow down we have to go ahead and just change on the padding and Alignment here the expansion side of it so just click on here it makes it flow down beautiful now we need to go ahead and give it some space like what we have there it says 11 pixel from the top so we will give it to the row not the text widget so I click on the row and I say 11 pixel beautiful and then the next thing I'll do is I'll go ahead and create this part this is just a container that has a color this is the color of the container so here we have 345 by 51 pixels I'll click on the column itself and then click on add a chart to the widget and add container right nice now there's something I'm gonna do here which I need you to pay attention to so I'm not going to give this container a fixed width right I will just give it a fixed height of 51 right so I will say here the height is 51 but the width will be in finite but I will give you the padding on the left 15 right and I will give it under the the right 15 right so that's it then I will paste the The Fill color right I paste the fill color here and now we have that now the reason why I did this is because of the fact that when your screen size changes to something bigger we will still have it expanding but had it been I fixed the width we will have a lot of large space in between here the same thing I did for the image I gave the image an infinite width that's why it's spreading across even if the screen sizes change good all right so let's go back to what we were doing before now inside this container I will go ahead and then put the different elements that I found inside first of all we have an image here then we have a drop down here then we have a text field here good so let's go ahead and then click on here and add a row inside this container because things are moving from left to right so we are gonna have to put it inside a container why we did put this inside a column is because things are being wrapped from top to bottom so it has to be in a column okay great so inside this container noun I will click on row to add a row inside it I'm going to add an image now and then I will go ahead and check the size of the image the image here is 44 by 29 pixels so I will go ahead and come here and save four to four okay by 29 pixel good stuff and then what I will go ahead and do is I'll just delete the Border here Boulder radius click on network to assets but before then let's go back to figma and click on the image itself and scroll down click on export and then make this 3x and then export it right so we've exported it well this one exported as a zip file not to worry we will get it right so uh what we will need to do now is just just go ahead and click on this to open the folder and I open it where we have the the file so this is it I like to just cut this out of here and put it somewhere I call uh maybe I can put it here okay maybe I just paste it here and say Ctrl V then I will right click on this and say extract files here okay so now we have this in this particular thing so I'll just go ahead and maybe copy the link to this particular folder and then I'll come back here come to my Florida flow click on the icon to upload the image paste the link that I copied don't try to make this confuse you at all I'm just doing something so that I can do it faster you can always go find where you have the image in your system so here the the padding on the left for this image is 24 pixel so I have to go ahead and do the same thing here so I'm putting 24 pixels as a padding and then in the row I click on the ruler and I'm going to add something another widget called drop down okay so this is a widget now called drop down and this drop down I will go ahead and then do some things so this is the text it says plus 44 well basically numbers uh country codes and all of that so I can just put it here maybe Plus 44. then I put it here as an initial uh selection so it says here I can just say plus 44 as well and then let's look at the dimension so that says 400 by 16. so I will go ahead and come here and say change this to 16 400 by 16 okay so let's say 400 by 16 and it's so big here like the width is so B and it's even wide background we don't want it like that so we need to change the width here just try to change this to maybe 50 right might work didn't work let's say 80 uh okay so I think I did click something faulty there and then the entire photo flow kind of snapped snapped at me so let's see uh this looks like the width here is 29 well this one looks like it's uh 25 so 29 25 54. okay yeah well maybe that's why I didn't work okay so let's go ahead and then let's just wait for photo flow to pop right so um it's trying to load up here a bit okay so I think it's ready to give us back our project nice and easy okay so good now let's use uh I was trying to use 60 so I'm going back to a landing screen and then here uh first of all let's go ahead and clear this field color so I just take up the field color I clear it good then maybe bottle color take it off as well then uh then um the width be careful actually just put Maybe 70. okay good uh it still didn't work uh let's say 80 then 80. didn't still work I'm trying to just get them the small as well okay so 44 worked all right I like 44 then so 44 worked and the next thing we need to do quickly is we need to have this text field all right for this one so I will go ahead and then maybe just copy the color code and then I will come over here click on the row click on this and then add a text field okay so let's see text uh text field all right so I'll just click on this add the text field here so nice so this is our text field and then I can paste the label text yeah something like this but I would prefer not to put it as a label text I would prefer to put it as as a hint text right something like this so not that okay this was colors that I picked so let's just paste it here text color and let's go ahead and copy what we have here as the content this is going to now be our insects okay so like these we're good for real we're good so we have had something reasonable now so I'll click on this click on the container just tap to close it then here there let me click on this container now to see the height the padding so here says 19 from the top so I will give it 19 here okay good all right so we have 19 there and we're doing great sincerely we're doing great all right so we're done with the landing screen let's just go ahead and then work in this so the thing is this going forward we might just have to copy some things here and there and use uh but I think this is slightly different so I think we'll just continue building from where we have this so I would just go ahead and then uh come back here click here to add a new page and click on create blank this page is called phone input screen okay so let's just copy let's just say phone impute screen all right so phone input for an input screen quite a long name for a page but let's just use it we can always change it later click on this to delete the app bar and then go ahead and then copy this text okay good stuff click on the column click and add a chart to that column click on row which is now in that child add something else inside the row which is the text and go to where you're supposed to pick the content for the text paste it here and that's it so we can now go ahead and then say 500 by 20 pixels there you go so we will say uh the dimension here is 500 by 20 pixels so we're doing a great job guys really good job so I'll click on this and then say Center align like I just click on this for the main axis alignment and then I will go ahead and say it's 58 from the top so I will give it 58 from the top right so that's it and then I will go ahead and uh you know set this all up so we already have something like that here but [Music] um but let's just recreate it right so let's let's recreate it so here this is a container this container is roughly 98 by 50 pixels so I will just call it 99 all right I I just want to use the maximum uh space possible right why did I stammer there so uh let's say 99 and uh we will go ahead and say 50 pixels so great so let's say 50 pixels so 50 pixels and uh let's copy the color code all right then we will just go ahead and paste it here nice nice and easy all right so I will wrap this in a row actually so I need to wrap this container in a row which is a good thing I will click on this to uh I can I can just give it a padding of 16 right here it just saves me some trouble a padding of 16. I can do it like that or I can always Center align it right yeah you can always Centerline it so um yeah but I think just giving it a padding on that side is good then we can go ahead and then for this particular thing we need the the image so I think it's almost the same size so this is 44 let's say 45 by 28 pixels so let's add a row there first and um okay so here all right so uh here what we're gonna be doing is uh we needed to show some form of image right so we needed to show some from we can just add an image here this is supposed to be a drop down right so let's see drop down okay let's say drop down first so drop down now this drop down is supposed to be Let's uh uh yeah okay let's leave it like that drop down and then here Let's uh Delete what we have here is this okay and then we need to go ahead and uh let's see let's see let's see so here we have a drop down was supposed to have these are the options that we have right so these are the options so um let's see hmm okay we have uh different options here we don't have the options for an image like a drop down per se for image right so uh we don't have like this is supposed to be a drop down showing like uh a list of images right so a list of images so what we could do here is um okay I think we will have to fix this when we're trying to walk on the back end right so yeah we will try to fix this while working on the back end because these images are supposed to come from uh the back end itself so when the user clicks on it it's just gonna come from some sort of list of flags that we had already put in the back end all right so we can do it like that and it will just uh pretty much make sense okay I will handle that when we're doing the back end so here I will just go ahead and then put these right and then I will go ahead and then get our image there all right so when we're doing the back end we might just alter that a little bit so let me right click and wrap this in a row and then uh click on this row and add an image the image is going to be uh 44 by 28 maybe 45 by 28 okay so so we have the image here then let's uh check this out so uh this is my role but my image is all over here this is my main container itself uh okay so what I'm just gonna do is I'm gonna cut this out click on this and just delete this first and then I'll click on this and paste my image uh okay so I have my image here and then I will go ahead and then just download this let's download this first okay so click on export and then changes to 3x uh just exports the file it's another zip file okay but uh let's see let's see I think I could still use what we had used before so let's go ahead and say asset and then click on this go to where we have this and then just use it so uh it might not be the perfect size okay so we have these like this right so it's it's filling everywhere because we're supposed to wrap this in a row okay so I wrap it in a row so it takes its perfect size and then uh um 13 14 pixels on the from the from the left so 14 like this and then we can go ahead and add uh the drop down so drop down we will work on this from the back end like back-end scenario when we're done so uh let's take off all of this right and then let's reduce these width to maybe 30. okay so uh like this now I can see the let me go ahead and clear these few colors so clear it off and clad is off all right so um I have these beats this is my container right so let me push it around a bit okay I'm gonna adjust that back again I want to see where we are at in the the details of let's just put something there maybe nine okay that didn't work out let's come over here and say uh width is 40. okay so now we see something so 35 well I have closed it again all right so um that was pretty fast uh let me see which one opens faster so uh okay so this opened faster all right so let's go to uh these let's click on this and uh okay so here let me just go ahead and scroll down and make these I wanted to actually make it 35 okay so 35 and then now this is it it's okay so I can go ahead and click on the container back what was this dimension of our container it was uh 99 let's see whether that's going to work out so let's say 99. okay so it's fine let's click back on the row and click on this and get a container right so there's a container here and this container is just going to give us um this is we're going to use an infinite weight so with a space padding on the left 17 and space in between here which is 13 all right so uh let's go over here and say infinite width it crashed okay because we didn't actually check a particular box nice okay so um we have phone input screen here so we wanted to make it like an inspection like a infinite expansion but it is already inside some form of limited space here so we need to go ahead and tell it okay we needed to expand first before we click on this that was why it crashed okay so now it's fine so let's go ahead and look at the height is 50. so we will say 50 okay that's good and then we will go ahead and give the padding on here and say 17. and then from the left is that tin okay good so we can now go ahead and then copy the color here and paste it for as a field color and just enter and that's it so now we have this we need to just go ahead and click and add a row inside that container and then um okay so I from what I'm seeing here when you tap on this to change this flag this number is supposed to also change and then you have the the number here okay so um this is going to be a text and then this one too so we will have to do some really nice logic kind of thing here so let's see uh let's go ahead and put a text here so uh so we say 44 and let's just put it here so this 44 is gonna be more like from what I am from what I saw before it's going to be 16. okay great and then it has some padding on the left 20. so let's say 20 here all right and then we have here we have to click on the rule click to add a text field so I'm saying text field go here all right so then uh let's just copy this information it's a 400 by 16 come down here remove it from label text I don't always like it like that and put it instead in a hint text all right so and I think that's pretty much okay so let's click on the row and give it some padding are from the top it's 18 so I'll just say 18 from the top and that's uh that's about it I'll go ahead and then click on on next not click on next basically just to have these uh containers so let's say this container is uh I'm not seeing the exact Dimension so it says three four four by 55 I just need the height okay so uh the color is black okay so let's say 45 so let's click on this that's the column itself and add a container the container is the height is going to be 45 okay the width is going to be infinite we won't have any crashing errors there then we will say it's 16 on the left okay so let's say 16. 16 here and uh 16 here Okay so and then inside here this is black so I will just go ahead and I did copy the color coded just pure black and then inside here we're gonna say roll the row is going to have the text here as next so this is 700 by 16. so I'll click here to add a text and the text is going to be next right and then we will come here and change it to 700 by 16. really nice then we can just give it a color white and also let's go ahead and click on the row I want to add I might not be able to see this exact hour but let's see let's click on here to search for Icon okay so I can uh I'm clicking here to say right I'm looking for an icon that says right so I might not be able to see that exact icon you see I can see exact thing so um the only thing we could do is either download um the image okay so we have something here I think this works so uh these is roughly 21 by 18. so here it says 24 so maybe we just say 21 okay so 21 click here to change the color of the text there you go then click on the rule and for alignment so click on these to push it to the left right and then click on the first icon we want to know the padding on the right so it's like 16. so we're gonna give it writing a padding on the right at 16. then we need to know the padding separating them so this is like one two eight right so I will click on this and give it a padding of one to eight from the right one to eight so something like that so I'll click on the main row then the container just to find them and then I will look at the spacing from the top so 28 so I'll go ahead and say 28. make sense beautiful Okay so we've gone this far the next thing we need to do is copy this particular text it's a 500 by 12 so I'll click on this and I'll go ahead and click and add a child to widget add a text okay actually I was supposed to add these in a row so I'm right clicking on it to wrap it inside a roll and there you go so this is the text I'm gonna paste this here now good I have pasted these and what we need to do quickly is look at I'll copy the color code now and say check the font size it's 500 by 12. so I will go ahead and then come over here clicks 500 and change this to 12. good stuff then I will paste the color code there you go and I will go ahead and click on that before I click let's see the the padding on the left is 16. so I'll give it 16 here all right and then I will go ahead and click on this expansion to break things down beautiful so I will go ahead and then just give the padding of 16 here on the right okay just to make everything even and then there is a space of 12 from the top here so I'll click on the row and give it a padding of 12. okay good stuff then it has some uh some uh line Heights here so let's see the line height here says 1 6. we wouldn't consider the pixel part so 166 point that okay so let's just say 1.66 so 1.6 six that's okay so it just separated a bit for us instead of clustering the whole thing so let's go ahead and uh then finish up the whole thing so here we have a line a text and a line so uh let me just copy the text as once no let me copy the color of the the line how do you create that so click on the column click on added child column first of all we need to add a row inside the row we're going to add a container you guessed it right so I'll go ahead and say let's click on these first to say that expansion is to be flexible and we will say infinite with beautiful I will tell you why we did that uh uh then we will change the height to one great and then we will give it some space from the left 16 all right so we would say 16 I will paste the color here great and then I will go ahead and then duplicate this I did Ctrl D and it's duplicated okay so now we have it like that we have some space here okay no not that I just control Z to undo what I just did so I need to add or a text first before I duplicate it the other one so I added text the text is going to say or okay and then this long container here has some space away from the text it's about 5.4 I will just leave it six so the padding on the right is six okay nice and then let's go ahead and copy this container no the container itself so I'm clicking the container Ctrl C to copy click on the role uh let's click on the row and paste it right so that's it now I can go ahead and click on this container and say on the left is going to be six and on the right is going to be 16 all right just to make everything even so that's that's that's more like it so let's go ahead and then come to this text this text is 400 by uh 14. which is correct Let's uh give you the a color here so I just paste this color and then that's it so I'll now click on the row itself and give it some padding of 18 from the top so I would say 18. okay so we have 18 and that's it so noun for this one uh it's just gonna be a container so the height is 55 so click on this uh click on this to add a row inside the the row okay no let's add a container first so click on the column itself let's add a container the container is going to have an infinite width the padding on the left will say 16 the right we will say 16 as well the height is going to be 55 great and then we need to download this particular Google icon so click on export uh change this to 3x and Export it great and then here let's just copy this now first of all this has a border right it has a border border color right so before we do that let's just come over here first and inside this container we're going to put a row inside it inside the row we will add an image great then the image it's um looks like a circle image so uh we will don't worry we can use just image then let's look at the size of the image so it's a 25 by 25 pixel so we will come over here and say 25 by 25 pixel and deletes the Border radius come over here change to network from Network to assets click on here and then go to your downloads where you have the file click on it to upload wait for a couple of seconds and it's there uh look at the spacing on the left it's 14. I'm using a proximate figures so 14 then click on the roll and add a text all right so we added text the text is what I had already copied before so I just pasted continue with Google and here I will just say the padding from the left is 15 60 right so I'll just say 60. so piling from the left is 60 and I think that's pretty much it so here it's a black color 700 by 16. so I can just paste it here just to be certain and I just click here and say 700 by 16. there you go we have our design now we have to click on the container itself and we're gonna give you the Border uh a border color right so let's I think we had I already copied it black color so let's just paste this here so now it gives me that kind of black black uh border there so we have that here as well so I'll click on it and see the spacing from the top it's 18 so I give it here as well 18. all right so now we have this and what we need to just quickly do is uh I think that's much that's more like what we need so the border with here is wasn't specified so we can say one uh it's still too thick so let's say 0.5 so it's a bit not so thick so like this is good okay so we have a couple of screens that we have done so far these flash screen Landing screen phone input screen and then uh we can actually keep doing more so we will just go ahead and work on this and then uh we will just break this tutorial into different parts and then at the end of it all we will have like a very very very complete tutorial series okay so I think at this point let's not just make the video way too long this is where we'll stop for this particular pad we will continue this part in the next tutorial I hope you enjoyed this just go ahead and click on the Subscribe button and like this video as well and let's see you in the next tutorial okay

Channel: eelspace

Views: 7,390

Keywords: uber eats app tutorial, uber eats no code, mobile app no code, flutterflow tutorial for beginners, flutterflow tutorial, flutterflow, crud nocode

Id: UOKr2lSIzIE

Length: 44min 55sec (2695 seconds)

Published: Tue Aug 08 2023