Build a Food Delivery app without coding using FlutterFlow - Part 1

hello guys welcome to another video tutorial by no code Africa and in this tutorial I'm going to show you how to uh you know build a food delivery application within flutter flow without writing codes it's going to be a very very interesting tutorial we're going to try to see how we can Implement most of the pages that you see here and by implementing most of these Pages you're going to learn some tricks and some hacks that will help you to design your mobile applications faster we are not necessarily going to complete everything I will just pick Pages randomly and just design them and within this tutorial you will learn a whole lot how to make gradients you will learn pop-ups bottom sheets you learn a lot of things and then it's going to increase and improve your mobile development skills all right within Florida flow so um I really wanted to sit back and enjoy this it's going to be a very long ride but let's see how far we can go Okay so for this particular part we will do a couple of screens and then I will show you that okay uh sometimes you don't need to like create screens over and over again you could just like uh duplicate them and use wow okay so um this is like uh the designs we're going to make it's a food delivery application and um you will be able to get access to these particular figma file by checking the description under these uh video you will see a link to to assess the file from figma and then full credit to the person who worked on this the name is also on the description in the under this video also um if I told you didn't have an account on Florida flow you could just check the description also and you will see a link to click to create a new account for yourself it's free all right let's uh get straight to it and uh sincerely I want to assure you that this is going to be an amazing tutorial you're going to enjoy it and I would like you to join Faith with me and just give this video a thumbs up and uh just punch in the Subscribe Button as you begin to learn this uh you know this class okay so uh this is uh the platform we're using we're using Florida flow so you will be able to build application faster than ever with flutter flow so if you don't have an account just like I said earlier just check the description under this video and you see a link to click and create a new account for yourself it's free and then also uh if I told you already have an account just click on sign in I need to take you here all right okay so um this is my dashboard and for me to start the project okay so I would just click on create new all right so uh then I will call this uh project uh food yes why not I'll call it food yes then I will click on create blank and then begin my creative process so we're not going to connect this project to Firebase so we will just skip this particular stage all right the next thing we will do is we will just take off this app bar so you click on it and click on delete all right and then the next thing we're going to do the very first steps we're going to do is we're going to go ahead and check out the dimension of the screen so just click on any of the screens so I click on this I need to see the show me here three seven by five by eight one two this is like the best screen to start building your application from because this is like the smaller screens possible and it will allow you to not suffer so much when trying to make your application uh responsive to other bigger mobile devices okay so always start with 375 and the cool stuff is that this design begins with 375. so let's hit the road running so here the witch is 37.5 the height is eight one two so we will use that same dimension for all our projects so um we will just come here and how do we do that so you just click on here click on this particular icon here to uh choose the Mobile screen that you want to use so we want to use this very fast one here so I'll click on it and then we have the screen beautiful all right so uh what next are we going to do we're just going to come back here and then we start designing so this is the splash screen so if you come here to the widget tree you see that it says your home page so I will just go ahead and then it's already selected on the scaffold this is a scaffold then there's a column inside the scaffold you can rename the scaffold to Splash all right just call it splash I like to best practice this what I do is I just go ahead and then click on this and copy the name of the screen because the designer always makes sure that they create a different names for each of the screen so I just go ahead and copy it it's like best practice for me I believe it to be best practice for you too then come here and click on here and just paste it alright so I paste it and you can just click on this button and it's done now and it's called splash screen so splash page 01 so whenever you're trying to locate it you can come here and uh yes we have done that the next thing we're going to do is start designing so let's start with this screen of course now this is the logo we will just click on it and uh I will go ahead and Export it so on the design scroll down to export click on export uh I believe my picture might be covering this but you should be able to see it um then click on export logo and that's it so before we proceed what you need to do is go ahead and check the dimension of the screen uh sorry not the screen dimension of the image the image has one two one by one to one point one three by 58.88 so I don't always like using the overflows like the 0.13.88 well you can actually so it's actually good because it makes it very specific but in this particular training we will just use the approximate so we will use one two two by 59 okay all right so I will just come here to the column and click to add a child to this widget that's adding a child to the column and I will pick an image uh and then I will say one two two and then I will say 59. great I believe that was what we had yes 59 and um I will just click on the column itself all right so this image here is uh you know it's not properly positioned it's supposed to be at the center so what we need to do to make that happen is to wrap the the widget with a roll okay when you do that it will now spread across like this and then you can go ahead and then uh Center align anything that is inside the row by clicking this button so now you have the image Center align what we now need to do is go ahead and then change the image type from Network to asset and then click on this icon to upload the picture so this is it and then I pick it up it's going to be inside here in a couple of seconds and then yes it is I will click on this right and then uh what I need to do now is I want to Center this here so instead of trying to check the position from here to here and all of that uh you can just go ahead and Center align it so click on the column itself and click on this to center a line and then right now you have the logo of the application in the center of the screen good stuff now we've done page one all right so the next thing we're going to do now is a beta tricky uh not too tricky but it depends on how the designer worked on this so now we are going to just go ahead and duplicate this screen since we already have this so we will go ahead and then go to the widget tree uh-huh go to the page actually then right click on it you see duplicate page good now click inside the page so that you can see the new name okay here it is and then I will go ahead and then copy the name of this screen I'm trying to do so I double click on it and copy it Ctrl C and then uh I'll come here you know highlight it and paste this and just click on this tiny button and that's it so we already have the scenario now what we need to do now is we need to go ahead and put these things that you see here so it's going to be a bit tricky but we would do it now uh you see the edges of the screens are around that you don't necessarily need to do that okay so um what we need to do now is this particular uh you know what is it called this particular design here it's an image so we will double tap to assess it so when you double tap you assess it like this uh this was the way the designer did it so you're going to just manage it like that so you click on design and then export and then export ellips okay let's see if that's what we have actually exported so yeah it shows here like this which is okay but now the thing is we don't know the size of this image if you say 292 by 295 you know this is actually a big circle you see it's a big cycle so uh you can't just use 292 by 95 so what we are going to use okay before we leave that let's click on this as well and it's the same thing so we will just go ahead and then export the design and Export it here which is good now and what we are going to do is we are going to go inside the um application like maybe go inside your system and you will see the uh this is the the dimension of the files so for this one it's two one seven by two four six so two one seven by two four six so we will go ahead and then and then make it happen here but now the thing is this how do we put an image just a lot just around our design like that so here it is and then here it is how do we do that do we put a row here and put stops here no so what we're going to do now is um let's go to the widget tree and see how it's been arranged so this is a row okay and then this is a column now in this big column is where we're gonna put uh some things right so um let's try it in two ways one will work okay so the one that works we just leave it like that so we will right click on this and wrap widget with a stack so it's basically a stack that will help us put things around our application anyhow okay so we just want to put it around here around this corner and around here so we just put wrap the row inside the stack and then the row is already positioned properly fine then what we need to do now is just go ahead and click add a child to the widget which is the stack and add an image so um now this doesn't sit well with me let me see if 400 uh no this doesn't work this doesn't work okay Ctrl z uh all right so we will try to see how to make it work uh it doesn't work again let's say let's make this 800. uh it still pushes this up okay so uh we will say Ctrl Z and undo everything we've done so far good now and what I want us to do is we're going to go ahead and then wrap this column in a widget that is called stack okay so wrap it in the stack like this okay then let's add an image now let's see if it's gonna work great it work now so now we actually have um the image here at the upper part of the screen and it's not affecting this at all so with this noun it works perfectly so now what we're going to do now is uh check the dimension of the file again so the file here is two one seven by two four six so we say uh two one seven by two four six okay great and then we go bring the image in all right so we will switch from Network to asset and then upload picture and we will pick this oh not this oh my goodness so this is the dimension actually so instead of going inside your system like that you can hoover an idiot and you see it so here is 184 by one zero three yeah so let's change it 184 by one zero three okay good this one is good and then let's select that I picked the dimension for these that I want and that's not what we want to use first so I upload it and then we'll have this design now so it's beautiful yeah so I believe that's it it has this design okay good really it's okay then what we need to do now is this same thing we would just say Ctrl D so we've duplicated it and um what I'm going to do is this is the duplicated version right this is a duplicated version so I will change it now to uh let's pick figure out the dimension again of the other one the dimension of the one below is uh two one seven that's hover on it and you see the 217 by 246. so we would say two one seven by two four six then upload the picture and I click here to upload the picture and uh it's uploaded but the position is not right okay it's supposed to be here at the bottom so what we now need to do is click in this image and um actually since it's not like a specific image we won't really see the dimension but let's just try so from here it's not giving us proper proper things so it says 258 from here we will have to just use our eyes okay so we don't have the proper positioning like the the paddings okay so let's say from here to here is going to be maybe 100 left to right let's say 100 it didn't work okay so 150 didn't work to let's say 160 worked okay 160 worked now we've gotten it to this point so we now need to take it down so we're going to say padding at the top this is going to be 400 it didn't work let's make it 600. and it worked so we have it here and uh uh okay so um so uh it's not coming up very well right so but it has given us what we needed but uh I think it's too much so let's say 580 uh huh let's say okay did it give us what we okay so somewhere around it so let's say 570 because I think we have some things that are really covered 560. ah okay so 570 is good 570 is good and uh I think that we are good with these the heights now uh let's see okay yeah perfect now everything works out very well for us you see this is the design all right guys so we're done with that we will just jump to the next thing so I want you to just uh uh you know get to see um how to do these things now we're going to design this right we're going to design this and then we'll duplicate it for days and then days and then like that we just keep moving this application really fast okay so um Let's uh let's proceed and uh let's go ahead and then just uh create these particular screens and it's the same Dimension so I'll just click in this and copy the name it says on boarding or one so I will come here to the pages and click here to add a new page and then click on create blank paste the name I copied click on create page this is how I design and I believe it's one of the best practices so you can try this as well okay none we have gotten this scenario now what we need to do is start designing so here we start with these now this is the image don't worry guys this is actually an image if you come to design you will see uh okay so it's an image but the designer did not put any image all right so it's okay but in some of the designs we will see an image but the thing is this is just an image so you can just use an image here or you can use a container and then add a background to it anyone works but I would prefer to use a container so that I can achieve the same grayish color right so and then of course I'll show you how to add an image to it now what we need to do is this is 240 by 292 so I click on the column go to the widget tree and add a child to this Widget the child is going to be a container the container is two four zero by two nine two so it's going to be two four zero by 292. and then uh we're just going to use the gray color here so I'll just copy this color and then paste it here Ctrl V enter and then it has some border radius so our border radius is 12 so we will just come here and put the radius as 12. beautiful stuff and the thing is if you notice it's it's not Center aligned and I wouldn't like it to start looking at the inspecting and then giving padding here it's not good it's not best practice because when you're considerating considering other devices this is going to be really bad so what I would rather want you to do is wrap this container in a roll right so you wrap it in a row and then Center align the roll and that's it you're good all right so the next thing you need to do quickly is you need to go ahead and um uh what do we do from here let's give the padding from the top which is going to be one one four so uh I'm currently under in specs that's why I can see all of these uh Dimensions around it so 114 on top so I will just click on the rule first and then add um the padding on the top one one four and good stuff then the next thing we need to do is I will add a row here right yeah I'll add a row and then uh I will put this text here so I just want to quickly copy the text and then click on the column itself click on add a child to this widget click on a roll and then click on add a child to the row and click on text good we're doing things really fast and I like it so we paste it all right and then another thing uh we have to always pay attention to the dimensions of the text so here is 800 and then the size is 24 pixel and is 10 all right so the font type is send so 800 by 24 let me just copy the color code so uh let's come here and change it from 400 to 800 change these to 24 and the font family is 10 okay so let's see we can say send okay so this is San but now uh we wouldn't want to be going around changing uh the font color every single time because this is sand this is sand and I believe most of the text in the entire design is is using the font type send so let's just go ahead and then fix these across our design let's come here to team settings go to typographies and icons and then come here to primary font family and change it to send all right so we click just change it to send and here we can just click to change it to send as well good and then that's that's it we go back to the widget tree and then now this font is already going to be in sen all right see it has the same design now so we will go ahead and then click on this and Central align it and then not just that alone we will go back to okay we will click on the font itself and then look at the spacing between these and this object is 63. and then we will put 63 here don't forget I'm selecting the row not the text okay so um I like to select the upper widget in the hierarchy that they can that they that the smaller widget is inside okay all right so what we need to do now is uh we're going to go ahead and then uh well we have to paste the color I picked yeah so uh let's just paste it I think it's almost the same thing it's a big grayish not really super black that's it so here uh we will just go ahead and duplicate this Ctrl D and we're going to use it for this particular font so I I double click copy the text check the font size 400 by 16 and then go ahead click here and paste it all right and it's 400 by 16 and uh great so this is it and I think it's Center aligned yes it is so I will go ahead and then make it Center align and that's it guys so but now in this particular one is just 18 pixel apart from this particular text so I'll click on this change it from 63 to 18. all right okay so the next thing we need to do quickly is this thing here so this is the uh dots the shoe right we're not going to make this Dynamic we just make it static all right so there's a way you can make this Dynamic I will create a separate video for that sometime but we'll just use this static okay so let's just click on this and Export the design the this is a lazy way of doing it but it's okay uh it's a 76 by 10 so I would just go ahead and click here uh click on the column itself then click and add a child to widget add a row uh yes I like to do it like that add an image inside it and then the image is 76 by 10. okay and then uh we will go ahead and then change from Network to assets and click on this to bring in that small tiny tiny image so we put it inside here and then after we've done that we will click on the rule that contains everything in Center align it good stuff let's check out the spacing so here let's go to inspect so that we can see the spacing it's 32 so I will say 32 here good stop good work guys well done then the next thing we need to do is we need to go ahead and put this button here this button is 327 by 62. I will copy the color I will copy the color here 327 by 62 so I will click on the column the B column here click to add a button so this is a button it's a widget so three two seven by right 3827 by 62. so we will say three two seven uh by 62 this is where you change the dimension of the button I will paste the color of the button and then scroll down I will see where to change the text on the button so what we had there was next and I think we have some uh border radius so border radius is um uh what was it butter radius is 12. so we will go ahead and then look forward to change the Border radius here so this is it and we will say 12. good stuff so we have it now and it's beautiful we just click on this and then go to inspect and then you see the space between them is 69 okay I like this stuff all right so I just click in here and say 69. we're doing a very good job let's close this all right so now this looks really neat and beautiful all right the next thing we need to do quickly is this text here it says skip so we will click here and then uh what I would simply do is just copy this one um yes so you try to copy things so that you can work faster so I will just click here and then click on the bottom and paste it and then click on this take off the let's look at the distance so here and here is 16 so I will just change the padding on the top here to 16 and then I would change this uh to skip copy this and it is 400 by 16. I will just paste the skip here Ctrl V and come here and change it to 400 and change this to 16 and we're good all right ladies and gentlemen we are done with what we were doing for that one we will just go ahead and then come to the pages Arrangement here right click and duplicate the page and this is the duplicated page it shows here so I will just come here copy the the name of the second screen and click here highlight everything and paste it good stuff and then I will just go ahead and then uh what else all your favorite oh okay so the only thing that changes here is this all right so we will just click on that and Export it all right and I'm exporting that and then I will come over here and then click on this and then replace the image get another one and I will see it here good stuff all right so we have this and it's uploaded then uh I think that's all for that particular page nothing changed okay so we will go ahead and then come back to pages and then uh right click in this and duplicate it come here to onboarding three and uh I'm just showing you how this whole thing works so click on the screen here then click on this highlight paste it click on this check button click on this image we need to download the image first so this is it click on design go to export and exports slide and then uh let's go ahead and come here and replace it we will start designing some complex screen very soon because the idea here is just for you to have an idea oh I just said idea twice yes the idea here is just for you to have an idea of how to design uh mobile screens using photo flow really fast alright so we have these done for us the next thing we need to do is the final one so we will just go ahead and then come here and duplicate the screen and then click here double click twice uh double click twice sorry I'm really saying things repeatedly alright so I will just click here and um paste this this is good all right um now we will just go ahead and then change this particular one let's click on the image and Export it all right uh exported come over here click in the image and then click on this icon and then bring in what you had just exported good stuff now we have this so we can just take a look at what we have done quickly and see how far we've gone so it's going to take some time to load so while it's still loading let's look at the next thing we're going to work on now this is the next thing we're going to work in and um it's super really nice uh but I think I think there is going to be uh uh let's see I don't know how this design was gonna work okay so um maybe tap once right maybe tap once and then this brings up maybe maybe maybe not okay maybe tap on this login screen and then this pops up I think maybe that's how it works okay so uh let's try to create some of these right yeah let's why not okay so um let's create this quickly uh all right let's see let's see let's see what do we do okay so actually this is our work this is what we have done so far so um let me just show you right so this is it okay now it's not showing responsive because we're not really like making it responsive let's just select the screen that we worked on uh okay so uh things are not really appearing very nicely there is a small problem I think we will work on this towards the end okay so this is it and then this is it and then this is it and then this is it like that you see it it just flows okay so the idea is for you to just be clicking next next and all of that we're not adding any actions we're just focusing on the front-end designs okay now we need to go ahead and then continue pushing right so um do I work in this yes that's working this now so how do we create this uh we will create a background we will create what we have here at the back I don't know what is inside here below but I think there should be a button that says uh maybe lunch or maybe anything I will just show you how we can achieve this um this uh this is the same thing we had that time so we would just click on it and um let's see let's see let's see we can export this yes let's exported it once we will use it immediately and then let's start this background is black so we will copy this black and then I start working on it um but you see that this is almost in the same position like what was here so there's no need to redo it okay so we can just um we can just go ahead and duplicate this screen and then set things running here or or not okay let's just start it from scratch let's click in here to add a new page and then click and create bank and then um oh I should have copied this so it says login empty so click on this login empty just paste it that's just how I do it and then I have this click on the up bar take it away all right the next thing we need to do is go to the widget tree and then we will go ahead and let's start designing what is inside here this is what is inside the main page first so login so it's a row uh inspect it's 700 by 30 so we click here add a row uh this is our row inside our row we have the text and then we're pasting what we have here 700 by 30. you know you have to learn how to memorize this thing so you can walk really fast 700 by 30 and then I will Center align it and then um let's come here all right so now this is there's a slight problem the another problem actually this background is black right so what we need to do is uh just just change this to White for now yeah so we don't let's change it we won't see it again after we've changed it but uh we will see it later good uh actually you can see because the background is not white it's like gray so we will come here to the column and we will go ahead and wrap this column with a a widget the widget is going to be a container and then the container is going to be the size of the screen so we will say three seven five by eight one two so we would say um maybe three seven five four responsive nay's sake I would say make the width in finite okay infinity and then the the heights you can fix it to be eight one two well I will tell you that in subsequent videos why we did this okay so um and then the next thing I need to quickly do is copy the color here and then paste it all right so at voila we have this now good now what we need to do quickly is we will need to give it some distance 118 so we click on this and say uh one one eight good stuff and then uh just like we always do we will click on this and duplicate it and then we will copy this this is going to be 400 by 16 you see here and then I will paste what I just copied and change the dimension to 400 by 16. basically not Dimension their properties all right so that's it and um uh what do we need to do okay so we need to go ahead and uh what do we do what do we do uh let's check the spacing between them so it's three uh so I will click on this and make it three all right so this is it and um I think that's all for now so we will just go ahead and click on this column now what we need to do is these uh this design we will go ahead and then wrap this um wrap this column with a stack wrap it with a stack and then click and add a child to the stack that's added child to this widgets and add an image good stuff and then we will um go ahead and then change from Network to assets and then click on here to uh do our basic settings okay so here we go um we will go ahead and and have it uh over here let's say this is what we downloaded yeah was this what we downloaded no this one I think this is what we downloaded let me let me be sure of what we did so this is it uh uh okay and then we actually downloaded this let's just download it again okay let me just let me just be sure let's click on this and I'll see it twice great this is it so the dimension here is one four one by 130 let's just upload it one four one by 130. so one for one by 130 so I'll just click on this and say one four one by 130. you see now we have our beautiful design it's inside it's good great so you can actually click on this to look at how it looks like but I don't always like this over overflow colors here um yeah so I don't always like it very much so uh let's take it off okay so what we need to do now and quickly is um the next thing is these particular scenario so this is actually a bottom sheet so what is a bottom sheet if you come here to the pages you will see that we have this is pages and components and then this is Pages alone and then this is component so you can create a bottom sheet in the component section so here we click on this and click on component and then we will come here to bottom sheet so you see here these are bottom sheets you can choose uh to to pick a template here or you can just create a blank one so we will click create a blank one and we will still call it login uh login Mt all right so so I'll paste this and click on this it says name already and use uh okay so we would just say hyphen uh bottom shoot bottom sheets okay so uh click in that and then now we have it like this what do we do with it um what do we do with it so we see the dimension is 375 by 579 so we will come here to the bottom machine this is the bottom Shades all right so um what we need to do is come to the widget tree of the bottom sheets so this is it and then we will click to add a container inside it all right so and that's a container so we say 375 by 579 so we will say three seven five by five seven nine good work so I will take this off so we can just see what we have done so this is it so I think this is a full thing all right uh no this is not the full thing why is it not showing uh this doesn't look full to me three seven five by five seven nine uh it doesn't look food to me let's bring it back and just adjust this uh okay all right so I think this is this is it this is like the real size okay so maybe just keep stretching these until you see the real thing so something like this um this is more like the covering or some sort of mock-up yeah so I will just adjust it like this a bit okay so take it off yeah all right so this is the design the dimension um what we need to do now is just start putting things inside it so we start with this one here email now there's something I want us to do uh let's start with the roll okay so we're gonna put these email in a row let's zoom in double click and pick this it's a let's see it's 400 by 13. let's click this to add a row no we add a column first look at this everything is stacked from top to bottom all right so you put a column inside this container first so there's a column first and then we now put a roll and then in the row we put the text the text we're putting is what we had copied before and uh the dimension is 400 by 13 so I will scroll down and just change this to 13. and then I will click on this and Central align it oh no not necessary then uh what I need to do now is I want these and these to be together then I can just duplicate it and change it so that means I'll put these two things in a column all right I'll show you what I mean so this noun is in a row I will wrap it um hold on uh I will wrap these in a column wrap it in a column all right great so this is the row noun okay good stuff then I will click this and add a text field inside this column all right so add a text field and now you don't see anything around that so what we need to do is let's see the dimension 327 by 62 so let's say um three two seven okay great so it adjusts this 327 and then what we need to do is it has a it has a background so let's see uh when you come to the properties of the text field let's just copy this example first and paste it here in the hint text some hint text okay good now and it's really grayish let's copy the the color of the hint text and um and just paste it here good stuff and then we can check the dimension 400 by 14 it's okay that's okay so let's make this 14. all right so um we don't have uh this is the Border color Focus butter color butter width and a lot of things but we don't have the background color that can you know give these a background so what I normally do is I will wrap this text field in a widget and that widget is going to be a container so that container is going to take the the dimension of the text field design so three to seven by sixty two so I would say um I will say three to seven three two seven by 62. and then I will copy the color of the text field like what we have here this grayish color and then I will paste it here as the background of this container here and then if you see it has some border 10 pixels so I will just give it some border here 10 pixels and uh that's it we have something numb but it's not really beautiful right so I will just click on the text field and then do some things around it so I will come here first go down and um here in the contents padding I will say 24 uh too much I would say 18. this looks good so this is a contents padding padding the content inside the text field and then here I will say 16. uh I think this looks good too but I think it's more like this is 16. it's okay all right so um not so good because uh this is still pushed down way too down uh let's go ahead and say contents padding here is 14. all right so I think this is good now and then what we need to do is uh 62. this is fine uh let's see let's see let's see okay so for this particular text right I'll click on the text and see the the spacing on the left it's 24. so um I will put a padding on the left here and say 24. I hope you're learning and this is perfect now I will click on the column itself and give it some padding from the top which is 24 and then I'll say 24. you're learning good then I will go ahead and then give some spotting between this email and this text field so the padding here is going to be let me click on the rule that contains a container uh the rule that contains the text is here the spacing in between them is eight and then I would give it bottom so eight good now we have this right so we're in good shape now I need you to understand that this has a border radius uh let's come here and we'll see the baller radius 24. that's this big container this big uh container the white container it has a border radius of 24 so I will put here 24. and you see now it's curved somehow okay good and then uh what we need to do now is this column we're going to duplicate it Ctrl D is duplicated all right so I would just click on this and change and copy the password you see why I wanted to just uh create it like that so I can simply reuse it so I will paste the password Here and then come here and then um now you don't need to put all of this well you can just copy it really all right so um well you don't need to copy this it's not it's not necessary passwords don't have hint text so uh but you want to put this icon here so you will come here to the text field and then do something so if you scroll down scroll down you will see something called password field so you check it all right so if you check it and it says oh yes you now see icon size so you have to this is a Togo hide password icon so you click on here and then you give the grayish color something like this will do give it um an icon size let's see what is the size of this thing 19 by 14 just say 19. okay then that's it it appears all right and then um what else none of you observe this thing shifts up a bit uh we will just try to adjust it so we will come down and then we will make this 18 okay so good stuff all right so I think it's it's pretty good now you can always add numbers to to make that a bit okay so we need to do this particular part so I will click on this and just copy it it's a 400 by 13 uh let's click on this and see the dimension 20 by 20. let's go ahead and click on the column and add a row okay so we add a row here and then we add a container so the container is 20 by 20. so it's 20 by 20 here and then um it has a okay let's just copy the Border radius so butter color that's a butter color so it doesn't have a few colors so we'll click in it and maybe clad a few color the butter color we pasted and then not just that alone we will see the radius the radius is 5 pixel the Border radio so we'll put it to the 5 pixel and then that's good so the distance between the distance on the side is 24 so I'll give it some padding on the left here turn to four and then uh here is the next thing we need to pick up so I will click on the row click here and add a text and then paste the text here and I think it's 13 right if I'm not mistaken uh yeah it's correct then copy the color of the text and then paste it here okay good we are doing really fine and then check the distance between them it's 10 and so come here and give it some padding in the left 10. beautiful then we click on the row again we want to add this particular one forgot password well we can just duplicate this Ctrl D to duplicate it and then copy this thing and paste it here okay and then copy the color of this and uh paste it here all right good and then this is actually 14 so we're good now then what we need to do is check the distance between these two texts 96 and then so we'll just change this from 10 to 9 to 6. beautiful all right let's go ahead and give some padding at the top here so if you click on let's say this and check here it says 24 so we will add some padding in the top here 24. and then the next thing we will just quickly need to do is we'll click on this button and um Dimension is three to seven by 62 so click on the column click and add a child to the widget uh three two seven three two seven by 62. copy the color or come to design copy the color Ctrl C this is login here and then paste it you see I try to pick up a lot of things while I'm working just so that it makes me work fast because most times when you're working uh when you're building a UI all right you get to uh you have like a lot of screen so you want to find ways to you know work really fast so you memorize something so 30 31 here is the space between the button so I will just come here and then put it you know the thing is this with practice you will find some methods that works for you and only you so here uh what what I need to do is we need to create this and so I don't want to do I want to be lazy so I'll just copy this and click on the column and paste it and then click on this content and delete it great really fast right I will just copy here and say don't have an account I check the font size the properties of the font 400 by 16. good stuff and then I'll click in here paste what I had copied uh and then make this 16 and then here on this one this is sign up it's all 700 by 14. so I paste it here 700 by 14. great all right so I will have to check the distance it's just a 10. so I will change these padding on the left to 10. and then I will click on this and Central align it and there you go I need to remove this padding on the left and we are good so don't have an account sign up and then there is all here so I will just click on this to duplicate it Ctrl D remove this delete this and then just I like to just copy so copy 400 by 16. click in this paste it it's already 400 by 16. and then what I need to do is these icons so I will click this duplicate it delete this or and then add um uh images I will just add an image here this is going to be the image that contains all of this so I'll just pick here the image is going to be 62 by 62. I will export these images first okay then I will click on this export it as well click on this export it as well and then that's it so uh this is going to be 62. 62 [Music] all right so um even though you're wondering how this thing works I want you to compare yourself to a Taylor someone who makes dresses all right so uh when it Taylor is trying to uh you know take measurement of your clothes you discover that they tend to memorize a lot of things although some of them always have PayPass beside them so learning how to design really fast on floor to flow like designing UI will make you to have the skills that tailors always have so you tend to memorize the dimensions of the things that are in Sigma you just pick it up all right so this is it I will say Ctrl D to duplicate it look at the space between each of the images uh go to inspects to see that 30 so I will say here this will be 30. good stuff then I'll click here and duplicate again beautifully done I will go ahead here and change the image for this one to this one and then wait until it's done then I click on this and change this last one here to this okay good stuff we we've done an amazing job guys so this is it we have this beautiful design it's it's complete now how do we use it let's come back to that page that had to do with login button login uh login Mt so this is it so I don't know how the designer wanted to make it let's just click here and turn this like this I don't know how the designer intended for it to work is it that maybe when they click on this or click on this text uh right um that should pop up so I will just add Zoom so for that to happen I'll click on add an action uh click on action click and add an action and say on tab so there is on tap there's on double press uh there is a long press um so I think just on tap right so once maybe the user Taps on this I want the person to I want the bottom sheet to be launched so this is the bottom sheet I wanted to show click to select the component you want to show I wanted to show this one and that's it so we can go ahead and then uh you know uh preview this particular screen that we just finished all right so while that is it's going on I think it's gonna just show us very soon let's look at the next screens that we're going to do so uh I will not do this one or this one uh this one this is just basically how it would look like when you turn on your keyboard I will show you what this is right okay this is for sending code for forgot password so you can just read these screens and and work in it right so um I will I wouldn't want to be doing that all three days right so I want to I know that you can just redo it I will go ahead and do the ones that I think are difficult all right and um so um I think I will just go ahead and work on the sign up part like really fast so you can just see how it's done uh yeah yeah I'll work on the sign up then we can just start doing some of this okay so the idea is I'll just do some screen so that you can understand how it's been done okay all right so this is what we have done uh let me pick uh okay so now this is not covering the entire screen I do not know why why is it not this is supposed to cover the entire screen I do not know why it isn't covering the entire screen anyways I know that some things I usually hear in applications right so maybe that's why it's like that all right so uh maybe when the user clicks on this then this shows up I think this is what what the designer wanted to do so that's it so we click on this it just brings up this so you can you see how beautiful it is good stuff now uh what we need to do again let's close this it's uh this sign up button the sign up page uh it's quite simple uh but that means we need to have the sign up page itself so let's let's have it why not so let's go ahead and then duplicate this screen and then let's uh copy this uh-huh click inside and then um paste this here why not so here it's sign up I copy it and I paste it oh I'm trying to double tap paste it here all right so please sign in this and say sign up so just copy this and paste here uh good stuff now we need to put this icon here this icon for back okay so the icon is 45 by 45 let's just go ahead and we can just download it so the thing is this this has some bad practices uh yeah some bad practices but uh since the design is made up you can just download this really but if at all you want something to happen maybe this button should show some loading kind of thing yeah you might not need to use the images you might just need to create it inside your inside like a fresh but I will just use a lazy man's work which is okay and then back.png it's good it's still best practice you can use it uh so how do we put these here you see so um let's see now we can actually get to this one is here so we will just go ahead and duplicate this okay so we'll duplicate this and then instead of designer button we will go ahead go to the widget tree and add an image uh the image is uh 45 by 45 so we will say 45 by 45. good stuff then let's change it from network type to assets click in this and then upload this and this is it that's a go great stuff now we've done that now what we need to do is let's look at the distance let's go to inspect and see the distance from here is 50 so let's click here and say 50. let's say 50 here and then this guy is going to be left aligned so not center line so we click on the row itself and say go this way noun uh there are some problems right so there are some problems because there is an image that is on top right there's an image that is on top of this so it doesn't show properly so uh let's see how we can fix that first of all let's just give it the padding you need so uh oh sorry I need this one I'm 24 Let's uh say 24 no not this one that um okay so I wouldn't be able to see it again let's say image yes so 24. don't worry we will arrange this it's just about Arrangement so let's locate who this guy is this guy is this guy Aha and then this guy is here and then this guy is here and then this guy's here so for us to have this guy at the back this guy has to come forward weird right so we will we will go ahead and drag this down here and uh well that fixes it that fixes this problem so we have this button and um uh okay so I think that's it there's some things at the background here which I wouldn't really want to go so far in implementing yeah because uh well you can uh you can do it yeah but I will not go that maybe at some point we will all right so uh let's go ahead and then we're done with this let's go back to uh Pages then go to components and then this guy right click on it and duplicate component and then here let's see 375 by 579 the same dimension but let's uh call it our sign up components all right so uh this is it so let's say sign up component oh no no not component bottom shirts it's good to maintain your naming all right so um this is it and uh we're good uh what we need to do quickly is just uh around this just duplicate this it's the same thing it's simple all right so um I will take off this okay intake of this and take up this and of course take up this right yeah so that's it take this off so here is the column for this so I'll just click on this and Ctrl d this is going to be for name Okay so after this we'll try to find something more difficult to do so I'll just paste this here and then uh oh no no no no no no no okay so this is supposed to be name now so name here and then email here no no come on uh copy this uh okay and then paste this here good stuff so password uh uh retype password so maybe Ctrl D like this and then uh let's see let's copy this and paste it here all right guys so we're doing a great walk if you can see so this is it it's done all right okay so uh we're done with this let's look at the sign the next thing so this is quite simple I believe you already know how to implement this all right so it's quite simple what I would like us to go ahead and do is maybe some more complex things this is a chef interfaces which we can do but let me see where we would rather start from I would like to start from here right so let's do a couple of screens I don't know how much time we have used so far but um let's design a couple of screens and then see how we can continue with this so um I will go ahead and design some more screens so if we do this and then do this uh this is similar to these so we wouldn't wouldn't replicate a lot of things so I'll just do this and do this then look for something different and just create them I'll just be creating different stops okay just to give you an idea of how these things work so I'll click in this home and then I will go here to um the widget tree and then click on add a new page and then click on create blank and paste it and that's it so click this delete it click this and say 375 good stuff and then let's just design this thing the one we're done with this we will create this and uh maybe a couple of other pages and then we will end the tutorial okay so let's quickly create this how do you arrange things like this okay so let's uh let's do it now this is a roll as you can see it's a roll so we will just go ahead and then click on this to create a row let's go to our widget tree click on this to create a row and so a row we have created the first thing here is actually an image so let's just download the image right so I will just download it export menu and then this is a text so I will just maybe just copy it I like to just be ahead of myself let's go ahead and then add an image here the image size is 45 by 45 so I will say 45 by 45. Network to assets and then click on this upload the image and then add voila we've put the image let's come here and then this is a text and the text is delivered too so this is uh a column all right so this is a column things I stack from top to bottom this is a row so we will just go ahead and click here and um all right so you see this shows but not showing very well you see it shows but not showing variable let's click on this first and see the distance from the side so the distance from the side is 24 so click on the the image and say 24 good stuff and then let's wrap the entire column with a container let's wrap it into entire color with the container the container is obviously white and so we will say width is infinite the height is eight one two okay you see now you can clearly see the icon so let's see the spacing on top so it says 15 so I'll give this row 54 not 15 sorry yeah so it's 54 and then now I will just copy these deliver two I'll click in here and add a column that's the rule and add a column inside the column I'll add a row I like to do it like this and add a text and then the text I'm adding here is what we have here deliver tool and then I will copy this is 700 by 12. I have to check that too so here I'll come here and say 700 and here I will say 12 and here I will paste the color I picked great stuff and then here for this one this is a drop down okay so what we need to do is click in the the column all right and um and then click on here to add a drop down search for drop down okay so you see here drop down and that's it you come here to the index and paste what you copied it says Halal lap office so this is it as well and um the dime it's 400 by 14 good stuff but what we need to know is 107 by 17 the width so we will come down and say 100 and what 7 by 17. so this is drop down properties 100 and seven by Seventeen great that's it now um it doesn't show it doesn't show properly you see uh because we have uh it's not really 107 this is just a text so but everything here this plus this is giving us 100 I had to hold and shift to select the two so one two seven point seven five so we can say one to six by 17. so we'll say uh one two six one two six by Seventeen so uh is it 17 it is actually 17 but it's not showing everything so why um this is 400 by 14. okay so uh there's a problem there's a problem so uh there's a problem here what we need to do is uh uh let's see let's see um okay so I am trying to figure out what the problem is so one two six the problem is with the height so I don't know let's say 25. yes uh I think there's a problem with the dimensioning here so I will just increase it to 25 and I think it worked so I think that's okay so but now it doesn't show me the office right you see it doesn't show me the office so um I will have to also work on something and the the width so I will say 135 uh 150. uh this is weird one two hundred okay that's too much let's say 180 how does it look like here okay so um uh imagine what is to imagine here okay this is okay so uh let's say 170 160 okay so I think we can use it like this then click on the column and do the left alignment and then here for this let's remove that um imagine let's remember here all right so I think it is these margins that is giving us the problem we had so there's four here there's another four here and then this imagine here is um this distance so it's eight actually so we can say eight all right so um I think this is okay for us okay so for real this is okay all right let's uh go ahead and see the space in between it's 18 so I will say 18 here and then we have some good work done so let's go ahead and then do something so these I would have just downloaded everything but it's not gonna be good um so this is all right so I'm going to download these separately from this one will just be a stack because we need to be able to put these dynamically from the back end when we're working it so we would just go ahead and Export these one first it's 45 by 45. I will just copy it actually Ctrl C and click on the row and paste it great stop you see uh all right so we need to go ahead and then bring this in like bring the other picture in so this is what I copied uh oh it's just giving me only this that's not what I want I wanted this one too so okay so let me see if I export this what does it give me it's gonna give me everything and I don't want everything let's just export it and see how it looks like okay it's giving me everything I don't want everything so all right guys so I will copy this right let me show you some hack I'll copy this and paste uh drag it out and it keep it here good stuff then I'll click on this and delete this one all right so now I can just export only this two things so now if I check it out good stuff all right so uh I will come here now and then import this uh This Is It I hope you're learning and so if you like this video please click on the Subscribe button click on the like button too and turn on your notification Bell so that whenever I drop videos you will always be notified first I'm very sure you don't want to be notified last so I will right click on this and wrap it in a stack because uh it will allow me to be able to put these other thing here there's two here so so 25 by 25 I'm gonna put a container all right so the container size is going to be 25. by 25 okay good stuff and I'm gonna say it's gonna be secular and I will copy the color here and I will paste it here and I will not just stop there I will go ahead and right click on this and no not right click I'll just add a row inside this and in the row let me click to open this in the row I will add a text and then the text is going to be two and the color of the text uh let's go here at once and pick the color Ctrl C all right and then I paste it here and there you go so the font size is uh let's see I think it's 700 by 16 so I will come here and say 700. by 16 I'll click on the row and Center align it so that everything fits in well see we did a good job so I'll click on this and click on the container all right so what we need to do now is this stack so we will have to push it um we'll have to push it a bit from the left so let's say uh let me see will it tell me okay so it tells me 26 but it wasn't even inside this so we would just have to use our mind so let's say 50. so uh this is it I think 50 just worked almost almost perfectly so but I think it didn't work so perfectly perfectly so we can say um 35 nope that didn't work at all 40 uh something like that okay so I actually think um it looks bigger here 25 by 25. the the container looks bigger I don't know why it doesn't look bigger here uh so let's say four to five and then there's some push on the bottom here let's say 18. let's add more let's say the 40. no it doesn't it doesn't work 40. oh it didn't work so uh all right so I think this is it and uh well this is the best we can just quickly do all right so uh what do we need to do now is um you see this guy is not towards the end here so we can just click on it and see the spacing in between so 93.25 so we can just say 93. so we will say 93 here uh no we're going to use a stack okay let's remove the oh I see this was a problem so um okay so container um yeah that was it that was a problem so because this would have been correct it's 20. it's just supposed to be 20 so 20 great that's it all right so now the stack is 93 from the last so 93. uh okay so now we don't have like proper dimension in here so that's why we did it this does not fit in very well so we say 63 uh okay so I think this is pretty okay so we leave it here all right so we will go ahead and then just uh you know try to implement this screen and then maybe we will have to pause this design and move on to the next one maybe like half different parts in this so um all right let's go ahead and then just create this hey hello so let's uh let's just copy this quickly and click on this click on this as well and say uh roll inside the role there's a text and so we paste it here and then uh let's see so it has like combinations here so one is 700 by 16 one is 400 by 16. so let's split these right so let's click this and Ctrl Deeds and let's uh change this one let's take this off okay so then here in this side let's take these ones off great and then here this is going to be uh one is 700 by 16 that should be this one so we'll click on here and say 700 then we make this 16. then we will try to um the spacing here is 24 so I'll click here and add padding here 24 all right let's add padding on the top let's uh say 24 here as well good stuff so we say 24 I believe you're learning so uh good then let's add this search scenario all right so um this is a text field guys so I wouldn't want to waste so much of time I wouldn't want to waste so much of time let's go ahead and come to uh uh let's come here and look for uh sign up which of them was it okay it was a bottom sheet all right so let's just copy this text Fields not just the text field we have to copy the container right so this is it like this so I'm copying this Ctrl C and then I go to pages and I go to home this I'll click on this and paste it alright guys it's a lazy man's way of doing things but let's do it why not and so I need to just copy this search dishes and restaurants and then come here to text field and uh paste it all right so then what we need to do is let's take the dimension here so 327 by 62 right is it still the same thing let's see go to widget tree three two seven is it three two seven uh yes it is it is it is it is correct so we need to put this icon here and then let's click on the text field uh aha now this one here is a little bit different so let's click in here and give the container this particular color uh yeah this is quite different now so uh let's go ahead and put the search icon so you click on the text field scroll down you will see something called icon property so you click on it and add a leading icon it's going to be search so you see here and we can pick this so good now um this is uh 15 by 15 so you will give the icon size 15 that's it it looks small yeah it looks pretty small to me too so um what's it what do you think we should do well it looks pretty small I don't like it so let's take it off all right so um this is uh the container so I'll right click in it wrap it in a row all right so that's this is another way of doing it click on this and add an image right so the image is 15 by 15. let's export that image so let's click on this and Export the image all right export search then then we can go ahead and then add here 15 by 15. would it also be so small I think it will still be so small but it looks bigger here maybe because I zoomed it in all right so we will figure it out let's uh let's change from Network to assets and uh bring the image in and uh we bring the image in okay um uh-huh so let's see the road and the text field okay this is not gonna work out this is not gonna work out this is not gonna work out because um except we except we wrap these uh ruin stack yeah except to wrap the room and stack but from what I see this is pretty much not gonna work out so let's leave it the way it was and then just uh Ctrl Z control Z control Z uh let's leave it like this so and then let's just click on this and try to see how we can push it downwards like uh give it some content padding let's say 18. uh didn't still work okay so slightly not really perfect uh uh but normally you can just work in it and tweak things along the way so uh let me just give the padding on this um let's go to inspects and say 16 uh right so let's come here to container and say 16. all right so we will adjust it with time okay so um and then this is uh okay so let's go ahead and do some other thing let's create uh this scenario now so this is gonna be a row as well so I will just click here Ctrl C click here Ctrl V and copy this as well and um it's a 400 by 20. I'm gonna delete this click this one and paste it and say uh 400 by 20. 400 by 20 and then what I'm going to quickly do now is this is see all all right so um I'm going to go ahead and let's see let's see let's see what do we do I'm going to duplicate this so it's just gonna give us this so it's 400 by 16. so um I'm gonna paste it here and then uh say 16 all right then I will go ahead and click on the row and add an icon okay hold on Yes actually add an icon uh let's search for icon okay so this is icon and then I'll click on it and say right so I'm going to search for right and I think I'll pick something like this the color is gray so copy this and paste it here in the icon color and that's it so I will click on this and say and choose this all right so like this all right so um let's see what we're gonna do with this so here the spacing is 24 on the side so I'll click on this icon and give it some padding on the right and say 24 good stuff and then here for this one I will say padding is 132. 132 on the left 132. so this is it it's just perfect now we are done with that particular one let's go ahead and then um work on this so these are um these are buttons uh well I think when you click in this when you click on this it should just uh I don't know it's a carousel I don't know how it's supposed to really work but I think when you click on it uh uh I don't it's not a toggle button is it let's see let me close this first of all Let's uh we're gonna put it in a row so let's click let's create a row so click on the column itself and add a row okay I think after we're done with this one we wouldn't continue the design we will create part two of this and then part three and like that we will create as many paths as possible until we are we like exhaust some of the cool designs here so we will go ahead and then create um what do we do here Let's uh let's start with what let's start with what let's see I want to see what a toggle button will look like if I told we want to use it that way so this is a switch list title switch and then uh toggle icon so I think something like this does it have a background this is not it this is different all right so this switch is different from this is totally different yeah so it's not gonna be these uh can I see active track color um let's see let's give this a color and see what we see no it's not inactive in active term now uh let's see this use color no it's not it's not this it's not a switch and those are just containers so I will click on this and put a container yes so it's a container so I'll click on this and say container is one zero three by sixty so let me just copy the the colored ones so copy the colored ones one zero three by sixty so one zero three by sixty so we have 60 here what we need to quickly do here is we'll just paste this here and then um what we need to do quickly again is we will just go ahead and uh you know get this particular uh guy this container so this is going to be 39 the bottle radius is 39. all right so um then what we need to do is this guy is a 44 by 44. so inside this container we will click to add a row right inside that container and then the roll is going to contain a container nice the container is going to be secular and it's going to be 44. beautiful and so uh it's going to be great all right and then we will paste the color here let's look at it the padding here let's go to inspect the padding here is eight right so we will say eight for eight great and then what else so there's a text here and uh so there's a text inside the container so let's click on this particular and add a text the text says all in it's 700 by 14 so I paste it here and say 700 by 14. good stuff and then let's look at their spacing the spacing is 12. and I will come here and say 12. great now we have these now so let's go ahead and then just uh we will just duplicate it all right and um uh uh let's see let's see let's see let's see okay um we will duplicate it all right but before we duplicate it I want us to wrap it in something called list view because it's that's what is going to help us get this scrolling scenario scrolling effect so this is a container and this is the row okay so let's pick this container first and wrap this container wrap this wrap with the widget called list view all right uh it says invalid action now and I will tell you why that didn't work now what we need to do for it to really work is um we're going to uh let's see how do we make this work okay so let's just go ahead and duplicate first let's duplicate this container Ctrl d and uh the space between them is seven so this one is one three five um this one is going to be 135 135 and it's actually white this is it's it's it's white and it says hot dog so let's paste this and say uh let me just pick it once I prefer to just copy it so and just paste it here it says hot dog it's white um now there's some things that we need to do it's white and the background is white too so it tends to disappear so we will click on this and click in the container and we will give it some uh box Shadow so we click this to give some box shooter so now you can see it somehow okay good now we will go ahead and then uh give it some I think it was was it seven let's click in this and see inspect its uh it's seven so we will just give it some padding here say seven and then um I will contribute DDS again uh that's duplicate oh great so now we have the next one and uh this is gonna be borga bulgar okay so I'll just pitched this here and paste it now um the way it's supposed to work guys the way it's supposed to work uh let's say this noun uh it's not perfect because it's it's not perfectly perfect all right so um what do I do here all right let's try to see how we can make this work because this supposed to be a carousel right it's like Carousel rolling so this is the roll that contains it so if we wrap this inside um wrap this inside a list view it works so we have put it inside a list of view good stuff congratulations to us but I don't know why this is not showing now uh padding let's move this thing from the top uh here this is gonna be 20. let's give it some let's give that padding to the list of you or or not okay let's finish up first so that we'll know what to give to what now uh the the list view is supposed to be horizontal but we're gonna get a problem yeah we ran into a pro I wanted us to run into the problem so let's just reload this now the reason is because you need to give the list of you a definite a finite space to be able to dominate right that means we need to wrap the the list view in a container that has a fixed height and a width okay so let's just wait quickly for Florida floor to load up the interface and so we can just redo it I needed you to see the error because most times maybe when you're trying to do your Carousel you encounter similar problems so let's go back to home and um here in this part now what we need to just quickly do Wrap This widget with uh wrap the widget with um with a container right so we will wrap it with a container the container is going to take the dimension of these let's say um let's say infinite width right and then not in finite with sorry uh it's just going to take um maybe the size of the screen so uh so we're going to say we're going to say 60 the high to 60. uh the height is gonna be like 65 something like that maybe and then the width here is going to be uh the width of the screen let's say uh 350 yeah maybe 350 something like that uh not exactly no let's use the width of the screen that's infinite okay good now we have this in finite scenario uh the only problem that I have is the fact that the I need to give some padding to each of these containers so let's see let's click on this row and click on this container and add some padding at the bottom let's just say four yes so yeah I just want to otherwise we wouldn't see everything properly so container and add four then okay so I think I should add the same thing here for everyone so four okay so we're good now so everything is fine I think I should also add the uh you know what I did for the other guys so the Box shadow here as well no good good we we we're good now so we have these uh list view list view now is in a container and the axis was vertical before and we tried changing it to horizontal and things crashed now we will succeed you see we succeed now it's working now because we can now do scroll it from left to right so I will just click on this and click on the container and duplicate it now you can see that when I just duplicate it because it's um it's it's covered okay well you can see it somehow right so um all right so let's go ahead and then click on the container that contains the list View and give it some padding it's 20 on the top so let's say 20. we're almost done we're almost done with our work okay so uh let's see what we are gonna do next don't worry about this scenario right should we worry about it or not let's add something else and see if things are gonna adjust so let's uh pick this come oh not country D Let's uh country Z uh let's actually I just copied it and pasted it here and then Ctrl C this and paste it here and then here see all so we just need to inspect so this is going to be 96. so this is going to be a 96 so 96. all right so um it didn't still work uh let's let's see what we can do for this so all let's give the spacing here for this one uh is 24 so for this container we have to give it some padding here 24. okay now we're good we're really good so um and then this is fine what we need to do now is just create this scenario this is going to be a list view that just keeps going down so let's just quickly create it this is going to be in in um in a column so I will click on this and uh click on this and say I would like to wrap it in a row actually I don't know yeah I'll put this in a row first then put these column in the column I'm going to put the container here and the container is this one here 327 by 137 let me copy the color code immediately 327 by 137 so I'll say three two seven by one three seven and paste the background color border radius it says mixed I'll click it again to see the real border radio so uh no Okay so all right so um the thing is this right let's go ahead and see some things let's see let's see let's see this is uh I can't really see the Border radius for these uh let's say it's 15 right so 15. and then I will Center Line see this is why I put it in a row okay so what I need to do now is I need to go ahead and um put some things here now so this was a column this is a column and then there's a container so I need to put a text so I put a row first and just like I keep doing and then I put her a text and then I will go ahead and then just copy this text this is going to be uh 400 by 20 so I will just paste it okay so uh let's see what we're gonna do here Rose Garden 400 by 20 good stuff and uh and then here okay so uh we will just go ahead and then click in this column and left align everything and I see the spacing and the spacing in between is eight so I will say eight follow the top padding and then I will click on this and duplicate and then I will copy this and use it for the second part here and paste it then I will get the color code and I will paste it here good stuff now we're doing well like we're doing really well so let's see the space is five so I will click on this particular row and reduce it to five okay good and then what else we need to just create this particular thing so I click on the column click on this and then add a row and the row is going to contain different things so let's start so this is going to be an image uh I'll come to design and just export it then export this one as well and Export this one as well so that's it so and this particular first one is 20 by 20 so I'll come back here and say add an image uh 20 by 20 so 20 my 20. and um from Network to assets and then click on this to add the star and that's it okay so we have this in let me just close this quickly and um I'll click in this row and add a text so this is the text that will be full uh this so this is going to be 700 by 16. I paste it it's gonna be 700 by 16. good all right so uh I will click on this Ctrl C uh click on the row and Ctrl V and then click on the text Contour C click on the role and Ctrl V what else then the the shape again that's the the image I'm just copying it and pasting just then I'll rearrange them okay so there's no need to recreate things when you've already created them before so um Ctrl C uh then just go ahead and and click on this all right so we're good now we need to just go ahead and copy this free and then first of all let's find the spacing let's find the spacing okay four then this is 24 so let's click on this and say four and then click on this and say 24 [Music] 24 and then this is going to be four again and I just space what is here let's change the icon the image for this to the truck so this is it and then this is also going to be 24 again uh this is going to be 24. okay and then this is going to be four all right so I'll click here to change the image of this one to this one all right so now that we've done this let's check out the distance between this it's 15. and then I'll click on this and give it a padding on the top 15. pretty good we did a good job um this one has a different dimension 23 by 16 right and then this one okay turn it to this one alone 23 by 16 so we come here and change it to 23. and we make this 16 yeah so that the car the truck shows full all right good um none we're done we can just go ahead and this column down let's see uh this column we can just um uh wrap this column in is it is it a column no no let's let's pick this wrap the whole of this roll wrap it in a list view now the thing is this these things are supposed to come from database so and for you to come from database you have to put it in a list View and um that's it so this list view now space from the top is going to be 20 so yeah I say let's say 20. and we're good and then here we can just duplicate but these things are supposed to come from database don't forget and so this is going to be this from here 28 uh where is it this one is going to be 28. all right so that's basically how this whole page works and I believe that you've been able to like learn a good number of things and um you have also are subscribed to this Channel please subscribe to this channel like the video drop some comments if you have some comments I'll respond to them and in the subsequent videos we were working in you know implementing some other screens so that you can know how to do some of these things all right I hope you enjoyed it and if I told you a developer here then you should also find ways to appreciate this uh you know instrument called flutter flow because you can click here to view code and then you see all the codes that makes up these entire design so you see here the splash screen this is the code that makes the splash screen this is the code that makes this what particular one you see everything is knitted now and then this is the code for these this is the code for this one and this one in this one and then the login part and then the sign up part the home all right and then these are the codes that makes up the components the sign up bottom sheets all right so this is your pop spec the yaml and all of this is in Dart programming language so um it's one of the coolest thing that you can do and I really advise you to take this like super serious I need to make your career like super nice okay so good let's go back to food and just click to view this particular part of the replication all right guys please please please please click on the Subscribe button and subscribe to this YouTube channel and like the video as well drop comments if you have comment then please also turn on your notification icon your notification Bell so that whenever I drop videos you will be able to see the videos alright so um this brings us to the end of the the class and this is what we were trying to achieve so far and this is what I was talking about so this is a carousel that I created just for you guys and I didn't make this particular column scrollable so we can't really scroll we can just go ahead and then click on the main column here now and then we make it scrollable all right so let's see is any other column I don't think so this is fine now so you can actually get to preview it again um let's wait for a couple of seconds you see it so this is very beautiful well this drop dance we didn't really work on it very well so we will work on this and clean it and make it really neat when we are ready and then meanwhile you can in the subsequent you know tutorial you're going to be able to see how to put some images on this so that you can make your design even more interesting I will just put one image just to show you how it goes all right so this is it now you can scroll down and see how it looks like okay good stuff so uh for this one here what you could quickly do to just put an image there is uh if you come here and double click in this all right and then you come to design uh maybe clicking it again you will see an image here so this is the image so we can just click to remove this one and then you see this image but um uh the way the design did it uh this would be difficult to export let me try to export and see will we see this beautiful piece of meat yes we do so we can just go ahead and click on this container scroll down go to background image and say from Network to assets and then I just upload only one and such so that you can see it we will do more in the next videos okay so we upload the picture one so now it looks even more interesting you see this is basically the whole concept all right okay guys uh see you in the next video tutorial bye for now

Channel: eelspace

Views: 38,991

Keywords: flutterflow tutorial, frontend no code, mobile app development tutorial, no code

Id: 6Yf7eYQt8D0

Length: 105min 44sec (6344 seconds)

Published: Thu May 11 2023