Flutter App Development Tutorial for Beginners iOS | Android | Complex UI | Training App GetX 2021

[Music] hello everyone so let's get started so in this tutorial first part of this tutorial we'll be building this ui okay and unlike other tutorials i'm going to explain every detail of this ui step by step so that it becomes easier for beginners to learn flatter and how to do complex layout like over here this section and this section like they're overlapping onto each other and as well as this two column section like most of the app they don't have and it it could be a bit uh complex for beginners so i'll cover everything in detail so without further ado let's get started now here i have this okay i don't need this so here i have this file and there's a main.dart okay and what i'll do i'll just delete all of this we don't need this section and here uh i'll also delete this one now of course we don't have this file so what we'll do we'll go ahead and create a new file okay so let's go ahead and create a new file dot dart okay all right and we'll create a stateful class over here all right and we'll call it uh home page all right and we need to import some of the dependencies let's go ahead and do it uh i think we're good and now over here we don't need this my keyword we just go with this and now we'll import this section now we are good to go all right so apart from this i also have this colors file so it has all these colors that we'll be using in our app so you should have in your downloaded folder the one you downloaded at the beginning uh in the description section of this video and apart from that we also have this two json files okay all right and we also have this other json file well no this info json file for now is empty so we'll go ahead and build it a little later okay so that's pretty much it okay so now let's head back to our uh home page this file now we'll do we can run this app and um well this is all empty right okay so it doesn't matter okay so first we'll return over here a scaffold okay all right so let's return scaffold scaffold okay and scaffold we can give it a background color so we'll give it a background color and we'll call color dot now we want to use the colors from our file over here right okay so one thing we need to do we need to import this file background color and the background color should be coming from this file so we need to import this file so let's go ahead and import it so we'll import it as [Music] colors.dart so this is the file name remember not the class name this is the file name and we'll import it as whatever in there in this file we'll import it as color okay that's it now we can use this color this this keyword uh to refer our file and everything over here like these variables each of them are variables that i've defined here okay so now we can use this word color now we can refer to app color this is our class name and this is a static class so you can access the variable directly using the class name and the first color we want to use is background color right so we'll say home background home background color this one all right okay so now let's save it and we have this white background okay yeah so we are good all right okay now within it uh as for scaffold we'll have body section okay so we do body all right and within body will return a container we want to wrap everything on the container because later on we'll give it padding and margin stuff like that okay so that's what we want to do okay now within it we want to create a child and within child we'll have column okay and within column we'll have a lot of children okay now we're going to use column over here because as you can see from this layout so these are rows and like this is a row this is a row this is a row all of these are rows most of them are rows but they're sitting on the top of each other like this one is sitting on this and this one is sitting on that so that's why we are going to use column and if we use column we can put things on the top of each other but not overlapping okay so it's quite different than stack widget so that's why we'll be using columns so so that we can put things on the top of each other like more of them a lot of them would be like as a row okay all right uh so we are going to use uh column first so let's find a simulator and save it and everything is fine again no no error okay so the first thing we want to do we want to show this so this would be as a row okay so that's why i'll here right row okay and i'll have children okay now over here like this is our title right so maybe app title this is a training app and then we have some icons okay so now here our first child is this word so which is a text so we'll do text so we'll wrap it around text widget and we'll do write the uh this text which is a training and then we'll define it as style okay now style could be using style text style constructor okay and we'll do font size so the font size 30 and then we'll define the color okay now once again all the colors are saved in our color file so we can use refer or color file using this color variable that we saw early and then we'll do app color and then we'll do home page title this one okay all right so let's go ahead and save it and see it okay so now it's right over there so we'll take care of that very soon all right yeah and then we can also do say font weight and we do font weight dot say this one all right yeah so now it become bold but of course it looks a bit weird because it's covering and sitting at the top so let me do it and restart it again now it's at the top so i'm going to put it down and that's why we wrapped everything around containers so that we can use the padding okay so now we'll use the padding over here and we'll do uh const edge inserts only now let's do top padding all the top padding 70 let's save it now it's looking much better now we'll also do left and right padding left 30 let's see and i will do right right 30. uh well right 30 we'll do a bit later because we'll see the effect a little later okay anyway so this is the thing we did okay and next what we want to do we want to show this icons okay uh these icons all right okay so we can do it quite easily so we'll use the icon widget okay and over here we'll call icons dot arrow let's see arrow forward okay this one all right and we also need to define its size so we'll do size 20 and then we'll do its color okay now once again we'll use our color uh file so app color and home page icon so this is the one we want to use for color so let's go ahead and save it and run it uh yeah now it's there so the next one we want to do show this icon and then that icon but now these icons should have space all right so what we'll do we'll do size box here okay say size box with 10 okay and then we'll put another icon this one okay okay let me do it a little later so that things look better okay now i want to put another icon so this is this icon that we want to put right now do icons dot over here we'll do calendars so calendar today outlined i think this is the one i want and then we'll do size uh set 20 and then color color dot up color and home page icon so this is the color we want to use and now let's save it and see the result okay now it's there and we have the other icon so this one right so what we'll do we'll just go ahead and copy paste this one and put it there but of course it needs a comma over here otherwise it'll be cranky now we want to change this icon so instead of doing that we'll do say arrow forward ios this one all right okay so now let's go ahead and see uh the result okay now it's looking i mean it is there but looking very weird right so we want to change this thing uh how to change so first you want to create a distance from here uh so the the the text word and these icons there should be a distance right so distance like this so to do that we can use here an empty container using expanded widget okay uh so just simply write container and you should be good to go let's save it all right yeah so now they post it at the at the very right right edge right uh and that's why now we need to set our right margin or right padding so we'll do it 30. now let's save it perfect now the other thing we want to do we want to create this space just like this uh same space between this calendar icon left and right so what we'll do here here we'll use a size box size box and we'll say width with the 10 okay now let's save it and set okay so now this we are happy with this distance now let's create another distance over here um so here will also the size box okay with say 10 and let's save it but it doesn't really look uniform the distance because i think there is a better bit of padding on the left so we don't want to remove the padding but we can increase the width on the right then it would look better okay so i think now it looks better okay so we are done with this section and this section is everything is in a row right okay so now next we want to do this section well now this section is also pretty much a row okay it is also a row so we'll start doing that but now we want there should be a little bit of distance between this row and this row so now we'll use size box okay so let's go ahead and do it size box and we'll do height say 30 okay all right and now let's save it but of course you won't see anything because we don't have content now we'll define another row over here okay draw one second we'll have children now the first thing we want to do we want to write this text your program okay yeah so once again uh what i'll do i'll just directly copy from here so that we become efficient and now i'll put it here now let's save it and see the result yes but now the font size is too big so what we'll do we'll do 20 okay and we can also change the color so we'll do home page say sub home page subtitle all right now let's save it okay now that looks much better okay and the other thing we'll do here in the row itself so here uh we will write that word which is called uh over here details right okay like that so uh one thing you will do once again we can copy this one okay so that will become efficient and now instead of this we'll do details now let's save it and run it and they're together right so we need to use just like we saw a container widget okay empty container widget so using expanded widget so container is wrapped around expanded so it takes all the available space okay whenever you use expanded it takes all the available space okay so now between this two text widget it takes all the available space right okay um and now the other thing about this is that uh i don't want it to be bold okay so we'll just remove this one okay now the color should be different like as you see over here right so it's a little blue color so we'll use a different color for this so we do home page [Music] maybe detail this one yes the color is there right okay so next as you see we'll have an arrow so we'll go ahead with that okay so we'll put an arrow over here and arrow is an icon sorry so arrow is an icon so let's do icons dot say arrow forward i think this one this is the same icon pretty much same all right and what i'll do we'll also use size 20 and color so we'll do color dot app color dot home page icons all right now let's go ahead save it and see the result okay now it's looking much better but now this text and this one they're too close to each other so what would do we do size box and create a bit of distance using width so it is with five okay now it looks much better so we are done with this two sections right now we'll see how to create this beautiful background okay now with this background you'll see that we are we have this gradient color so it's pretty deep here and now it becomes slightly lighter over here so that's what we'll be focusing on drawing this beautiful background with different borders okay all right now let's close this section all right yeah so so that it looks better and clean now the first thing we want to do for this one we want to wrap it around a container and container will have width and height and if it's within height then you can uh control its width using border properties so that's why we want to wrap this thing around a container okay yeah so first thing we'll do here is uh i think we need a comma and then we'll do container okay well now definitely container takes uh within a height okay so do with also with over here now let's say we want to use uh pretty much uh the wii as same as the screen and we get the width from media query of context dot size dot width all right and for now say the height is 200 okay all right now uh let's go ahead and do a simple color colors.red now let's save it and see the result so it is there right okay now they're too close to each other so i think we need to use and the size box over here so do height say 20 yeah now it put it down okay all right so uh regarding this we'll change the color a little later so now what we could do we can use say border radius okay now if we want to use a border radius of a container you need to use within another constructor which is called box decoration so for this reason we need to use box decoration which is belong to decoration property we'll call box decoration okay now once you have box decoration you need to color in you need to move the color inside this box decoration constructor because container and box decoration only one of them takes color and if you use container and box decoration together the color should be gone inside box decoration let's save it run it and nothing happens because no error all right okay now because we want to have this beautiful borders and different borders so now we'll use the border property so let's go ahead and do it also border radius and border radius okay now we want to have different borders so that's what we'll do only so that we can take care of each border separately okay so now first we'll do top left say top left okay radius dot circular say we want to use the 10 pixels and then we'll do bottom right say radius dot circular say 10 and uh do bottom left or bottom right it doesn't matter i think they all have the same radius radius dot circular 10 now so far civil war can see the results so you see it's taking the shape over here so this is the border that we want to have more more of this kind of uh more bigger radius right okay and that is the [Music] i think at top right so the top right radius dot circular and we want to use border radius 80 okay let's see our result okay now it looks much better but as you can see from the design that this and this the width it doesn't really hide doesn't really match so we can change the height over here okay now it's closer but of course this simulator is a bit a bit big right yeah but actually it should be 220 anyway so now we have this color but now what we said that we don't want to use this color we want to use the gradient color okay so the first thing you need to do uh remove this section okay so instead of doing colors you'll call another property which is called gradient and then it takes a constructor which is linear gradient okay and linear gradient has a property which is colors and it takes a list so you can supply here list of colors as many colors as you want but for us we'll use only two colors okay so we do say color dot app color dot uh we do this one gradient color gradient first color okay all right do this one and then we at least you need two colors i guess to be gradient and gradients second gradient second okay all right now uh this one let's save it and see what happens okay so this is pretty much there right yeah so this is a gradient color over there okay and uh but now you can also uh like this is a bit lighter but now as you see it's too dip so we can change the opacity of the color so we'll do with opacity say 0.8 so this is the first color which starts from here so this will have this opacity now you see opacity change but now they look almost similar so i want this one to be a little more a little more transparent so that's what i would do with opacity 0.9 all right now let's save it yes i think i'm i'm happy with this pretty satisfied okay all right and another thing you can also define when you use gradient from the place where the color should begin from where the rendering should begin so you can define that one i'll do that so begin alignment dot we'll start from bottom left so we want to start from here so this place should be the deepest deepest uh area i guess all right and we'll use end okay and now we'll do alignment dot center right okay so over here i guess should be lightest or at least it should it should end here all right so let's go ahead and save it yeah so as you see just now it changed so here's the deepest part and here is the lightest part okay so once you have gradient color you can use different colors and you can also supply beginning end but of course there are more properties that you can take care okay yeah no problem with that okay now as you can see from uh this section over here it is a bit of the shadow so you want to draw this left and bottom right and bottom shadow okay um the once again that's pretty easy to do let's go ahead and see so now over here we are reading box decoration right okay so within box decoration there is another property uh which is called box shadow which we'll call box shadow and box shadow takes a list which means you can use many box shadows together but for in our case we'll just use only one box shadow for now okay and it takes opposite property and opposite tells you that how how much it should spread uh left and right like that okay and then we will have blur radius we'll do 20 and then you would do the box color shadow color sorry so it called color dot app color dot now we'll use the gradient color to do that okay now let's go to save it and see the result now as you see this this is once again to dip the shadow color we don't want sodium so we can use opacity with opacity says 0.2 all right uh yes i'm happy with this color okay yeah so this is the shadow and of course you can play around with this blur radius let's see okay so now it's a 10 so if you're happy with this you can just go ahead and play and instead of doing five ten you can do five all right so uh go ahead and play with this color as long as you're happy so i'm happy with this this color so i'll just go ahead with this so now offset tells you that this is plus five means on the from the left to the right do 5 pixels and 10 that means from the top to bottom come down 10 pixels okay i think with the blur radius it tells like for example if you have just one i think it becomes more dense so once you have blur radius the higher it is uh the the lighter the radius is not the radius i mean the lighter the shadow is and it looks more natural this way okay yeah so that's what the box shadow does and this property okay now we're good with this box decoration and style everything so what we'll do uh we'll collapse this uh box decoration because we have more more stuffs coming on like these things okay now as you can see over here so these prop this text or elements they're on a column order which means they're sitting on the top of each other okay uh apart from this one so this is actually row i'll explain it later why but in general this is the first item in the column this is the second second item is the third item and this is the fourth item so we need column inside this container so now we will do we'll use child container child property and child property text column and we do children okay so now we want to put our text within this column and other stuffs okay all right so the first one we want to do is say text right so we do text the text is next work workout all right yeah and then we'll use a style so text style then who is font size and we'll use font size 16 and then we'll use color so color dot app color dot home page container uh text small so this color is for this small text all right let's see looks like we have an error okay this is font size okay now we'll do we'll go ahead and save it and see the result yeah so it's there right uh and it doesn't look good because it has to be over here right okay now to do that what you could do we can use another property which is called cross access alignment property uh let's see okay it should be at the top cross access alignment and we'll do from the beginning okay all right so when you have a column the cross axis is the horizontal axis the main axis is the vertical axis okay so now we are moving it moving it around this horizontal axis horizontal axis is this uh cross axis alignment and it starts we start from the beginning but at the same time we also want to do um say a bit of padding okay yeah now what we could do we can do the direct padding over here which i don't want to do i want to have more control just for this column okay so now we'll do i'll wrap it this column around a container okay because column doesn't take padding directly so i want to have a container now can if i have a container then i will uh have a padding okay so i'll do padding over here okay and then cost edge it's just only say i want to do left padding say 20 okay so you see it came down a little bit on the left okay and now we want to do the top padding okay so top say 25 okay all right so like this and later on we'll uh design our right padding and we'll see why okay so now that's what we have here and uh everything is working good so the reason why i did this because i can put it over here the padding but i want to have more control just for the column not for the whole container itself okay yeah so let's open it up let's go ahead and see okay now so that's it next we want to put this one this text over here okay now what we'll do uh i think we can just copy this one and put it right there and instead of doing next workout we could do legs toning okay on the font size we can change it to 25 and let's see the color i think i would go with the same color okay right but now i think they're too close to each other we can use a little bit of distance so do size box height say 5 pixels so with the size box so it creates a distance right so now it came down a little bit 5 pixels let's see without this we have this now yeah so i like it all right so next we want to have this one okay and what we'll do we just copy paste it directly and put it right below it okay and instead of writing this so let's go ahead and change the text the text is and the glutes work out okay now let's save it and see okay now it's it's working perfect okay so that's it so now we have these things the next we want to put is uh this thing but now actually they are in a row as you can see they're on the same horizontal line so we'll put it in a row okay so what we'll do we'll go ahead and declare a row let's see where we are okay so row and of course it takes the children and then children will have let's see uh [Music] i think now here with this two they're also in a row okay and this is the empty container and there's the other element okay so this is a row inside the big row and these are independent elements so this and this doesn't need a row this would be an empty container which we saw earlier okay all right so now here we'll declare another row and we'll have children okay now the first one we want to write draw this icon over here so go ahead and call icons dot timer okay and we do size set 20 and color color dot app color dot home page small text no this is home page container [Music] text small so this is actually color name i should have put here text small color but it makes sense right okay anyway let's see uh no let's go ahead and save it and see the result yes okay but we'll take care of this distance a little later it doesn't matter now okay and now we want to put the next text this one 60 minutes so what i'll do i'll do i'll just copy this one directly and put it over here instead of doing writing this we'll write 60 seconds i guess or sorry 60 minutes okay and i think everything else stays the same but of course this one the size we don't want so big we want a bit smaller okay yeah it looks good and now well of course within this we can create a size box to create a distance to do size box size box and would do high uh width yes with the 10. let's save it yes it looks much better okay well the next we will have empty now before i empty container what i'll do i will draw that icon this icon sorry this icon all right okay so just go ahead and call icon widget okay on the icons dot i guess it's uh called what is it the name um the name let's see play circle i think like that this one yeah this is the name and now we'll do color but so this is simply white color so do colors dot white okay and we'll also do size say 60 all right now let's go ahead save it and see the result oh sorry okay well now they're too close to each other right so we learned that we can wrap it around we can put another expanded widget so we do container and of course we have an error okay now the error reason is over here this row okay within this row actually let me take this to out we don't need to put this inside this row so now let's save it the error is gone but our icon is gone as well and uh we want to put those two sections out of this icon okay i mean out of this uh row row okay like as i said that so this is this is the first two element in the row and then empty container and then the other element okay so let's put it here right now okay perfect now let me take it out yes now put it back yes perfect okay uh but now at this moment you think and we think that we need this uh what is it we need this uh left uh uh right padding so we do write 20 okay now it looks better okay and another problem is here as you see well of course this is the row that is showing this one so we want to create a distance over here so we'll do size box once again size box height say 25 pixels now let's save it okay now it put down but now as you see these are in the middle right so we want them to start from the bottom bottom over here like they should be aligned on the bottom like this like this one now to do that uh within this row let's see this row okay we can use another property once again this is cross-access alignment but cross-access alignment we saw earlier that it is a start it can start from the left from the beginning or it can start from the bottom okay so do bottom or sorry it's end actually so now let's go ahead save it run it so now all starts from the end so when you have this option start it starts from the left side when it's you say end okay all right so it actually pushed down everything to the bottom okay all right so now it's okay and uh one more thing as you see that here it is the shadow so we need this shadow okay now to have the shadow we need to take care of this icon now this icon [Music] itself doesn't have shadow so what do we do we'll wrap it around a container so on mac you hit option enter now you have this container over here okay now within container we'll use this decoration property okay so dry decoration box decoration this one okay and then border radius uh well i think border radius is not important though uh let me do box shadow first okay it takes a list and uh box for box shadow we need to call the box shadow con constructor and now for the first one we'll do the color uh so color dot app color dot gradient first we'll use the gradient first color and then we do the blur radius say 10 and offset we'll do offset now upside four eight okay now let's save it and see the result so now we have this uh bit of uh shadow but because we didn't use the border radius so the shadow is still there right okay so just try to use border radius and it will take care of this problem border radius dot circular say 60 so because our icon size is also 60 and border radius is also 60 so it'll uh chop up some of the top shadow okay let's save it yes the shadow is there okay so with this we have successfully done this layout okay uh once again if you have problem understanding it leave a question below and i'll try to answer it okay so now we have this few sections over here let's see this is the container okay all right once again this row is this one size box the distance and then another row for showing this one and this size box is creating this two distance and of course this container itself is a bit complex a lot of things going on in the container itself we have this column within column we have this one then we have this row and within row we have another row to show this thing all right okay the next we'll see how to take care of this one okay all right uh now the first thing we'll do we'll draw a container okay so let's go ahead and do it a container okay all right now the container will have kind of say height right so give it a height 180 so we're going to put a lot of thing inside this container this image this image and this is a separate image and this text okay so one other height would be like like this this amount of height including this shadow as you can see okay all right okay so next what we'll do we'll give it width okay now we do it like media query dot off context dot size dot with okay all right and then we'll have this what else let's see then we will have this padding okay let's go ahead and do a bit of padding uh i think we can do it later now we'll have this child over here okay now this part is interesting um because this image and this background image there are two separate image now they're sitting on the top of each other sorry i mean they're overlapping right they're overlapping so over here we need to introduce a new widget which is called stack widget okay and we'll wrap everything around stack widget because if you do that then you can your items or elements they can overlap okay all right so let's go ahead and do it now stack takes children okay so we'll have these children and next the first thing we'll do draw this image okay draw this image now this image because the image itself also has this shadow so that's why we'll put this image inside a container okay that's what we want to do so let's go ahead and call this container and once again let's give it a width the image and the container will have width so we'll call it using media query of context and then we'll do say size and we do with okay like this all right and now let's define a bit of uh height for this okay height for this container so do height say 120 so that means there is either 60 height or 60 pixels those would be used for padding and shadow things like that okay all right and we want to show an image inside the container so what we'll do we'll wrap it around a box decoration once again okay um definitely as you can see our image will have border so we'll do border uh border radius circular and we do say 20. pixel radius and now box decoration takes image and it takes another constructor which is called decoration image and within it will have uh another property which is image property and it takes another constructor which is asset image okay and for now will be hard coded over here okay uh we'll show an image directly uh from our asset folder and here we have this asset figure figure sorry i guess let's see the card okay card jpg i think this one is the one there's the other one they're the same though all right we can use any of them so that's an asset folder so do assets and i'll call it here car.jpg the size is small this one okay all right and make sure that our pub spec file has this setup over here okay otherwise it will get an error okay so now let's come back to this one and let me run the app okay now see it now it's there right okay and let's see so everything is here and but looks like this border doesn't have a big impact that's now another reason we do have border but it's within decoration and deck box decoration decoration image so we can use another property which is called fit okay so with the box fit dot say fill okay now let's save it yeah okay now it has this border and it's fit inside directly okay now the problem is uh it's coming too close to the earlier container so what we could do here we could create a bit of distance so you do size box height so five pixels okay yeah like this or okay for now this this distance is okay all right we'll change it a little later again because we can use the padding and other interesting things okay so that's one area where we change the height and there is another area actually where we can change uh take care of this distance now it's uh inside this container okay now this container we can put a bit of margin okay top margin okay we do const add sets only on the top say 30 all right now let's say yeah now it's looking much better okay i think you can also directly do it but in the original code that's how i've done it so even if you remove this one and put 35 here i think it's the same but i don't want to change it now anyway but you can play around this thing okay all right so once again the next thing we want to do is creating a shadow around it okay all right so that's why we need box shadow okay it takes a list we do box shadow and over here with the blur radius say 40 because we want a bit of a lot of spreading around it and we do offset okay and off let's say 810 so 8 pixels from the left to right and top pixels from the uh top to bottom okay and we could do color color dot app color dot gradient uh second and would uh so just go ahead and save it and see the result okay now once again we want to use with opacity 0.3 okay now it's a bit lighter and came down a little bit okay now if you use 20 you see it change it like this but in this case i'll go with 40 okay so that's what we have right now okay now we also want at the top a little bit of shadow so we can put two shadows right now so what we'll do just copy paste and put it inside here okay on the on the top we can change the blur radius like this okay and because we want top shadow so we need to put it say minus 8 and minus 10 okay let's see now on the top it is too strong right so we don't want that strong so we'll use minus one and do minus five over here okay and let's see what else we could do uh i think we're good now okay yeah so like uh it goes on the top and a little bit on the left okay all right so with this we are done with this uh image over here okay now this this container uh stack container it has children right the first child is the container and it is showing this image so next we want to show this beautiful girl this beautiful girl on this on the top of this one okay so what we'll do we'll just go ahead and create another container over here and let's see we'll have say for example container um height okay say do it 200 and uh let's do width okay now for now so width is 350 and now say color okay say colors dot red xm dot with opacity 0.2 okay now just go ahead and save it and see what is this we are doing so this is another container this container is overlapping on that one right so that's what i wanted to show you because if you don't have color over here you really don't know what is this and what things are happening over here okay yeah uh so now we'll put our image okay so as we want to put our image um what we'll do we can copy this decoration property okay uh from this container and put it right below it okay and let's see because we are using decoration so the color itself should be inside decoration as we learned earlier okay all right okay and let's see what else i think we are pretty good and over here we all actually if you see this girl doesn't have any shadows so we don't want to create any shadows okay so we can remove this shadow section okay we don't need her this section okay and instead of card here we want to show another image which is called figure dot jpg or png okay all right now let's save it and see okay uh now that's pretty interesting right this girl is way too big i mean she's a beautiful girl she doesn't need to be so strong stronger than many men maybe so we can change her now all right so to do that how to do that now this is a container so we can create margin on the right a little bit margin on the bottom so it'll put her over here okay yeah we'll change this background color a little later don't worry about that okay so what we'll do over here we'll do margin okay margin uh const edge inserts okay now do only say right margin say 200 okay no you say poster on the right okay i'm using this red color because it's easy to see what's happening over here okay yeah and let's see we can also do a little bottom margin so it'll put her up okay yes sorry about it okay so we do bottom margin say bottom margin over here say 30 okay yes it pushed it like this yeah and over here what we could do we can also change this height let's get the height sorry we can change the width so we can change the width we can get it from media query let's see uh media query dot off context dot size good with okay now let's see okay and now let's see if we take out this color from here yes she looks much better right yeah okay now i think this one is too big so let's let me change this one box fit um i think now she's much better and i guess i'm happy with this okay yeah so now we have we are done with this beautiful layout once again this has been possible only because of stack widget as well in stack you can wrap around things okay all right so the next thing we'll do we'll go ahead and write this one but now over here as you can see very clearly that this is a column layout right okay so that's what it will do now because we want to do extra style maybe and we want to control it more so first i'll declare a container and within container uh we will assign other things okay which is uh i mean uh easy to control it okay now this one this container once again let's do width and height okay now let's do with double dot max infinite and say height 100 and now do a color so we know what this container is and where it is with opacity 0.3 okay now let's save it and see it so it's it's there right so it's once again because it's within stack widget so it's occupying the whole area so that's what we don't want okay uh so we can leverage this margin once again we do margin edge inserts only and do a left margin okay do 150 let's see okay so now it came to this section right and now because with max infinite it takes the available width okay within your parent container so that's a beautiful thing about it okay because this container is within that container right okay and we also want to have a bit of top so we want to put it down okay so you do chop say 50 let's see it yes perfect so this is the perfect place and now what we'll do we can go ahead and do our text okay and now those are three lines of text like as you saw earlier over here there in a container and that's a column container and so we do child and call column okay now within column will have children and then we'll have this text and we'll say you are doing great and then we'll do style and text style then we'll do font size say 18 and then we'll do font weight font weight dot bold that's what we'll do here and the color okay color dot app color dot home page home page detail so we'll use this color for this one okay let's go to save it and see the result okay yeah it's right there right okay but we want to start from the beginning so we can do cross access alignment dot cross access alignment dot start and it started from the beginning okay and next we'll create a size box size box and we'll do height set 10 and then we'll do the other two lines but now for this one i'll introduce a new widget you can completely do it texture yet but we'll use another type of text widget which is called a rich text okay it has also its benefits uh you can do less styling i would say all right and the it takes a child which is uh i mean a property which is a text property and it the container it takes which is called text span okay all right now over here you write a text using your text property it say keep it up okay and then you can use style and then you do text style on say color color dot app color home page plan color okay and uh let's see what else we can also do font size phone size say 16 all right okay now let's go ahead and see see the result okay so it's there right so now at this moment what you could do we can remove this ugly color we don't need this anymore okay right all right now we want to put the other word which is called stick to your plan stick to your plan this one okay all right now over here we can we will do we can do a property which is called children okay and within it it takes a bunch of text to span all right and over here you can write your other text which is called uh stick to your plan okay all right save it and now they're on the same line right so what we'll do we'll enter a new line over here like this okay let's see okay so this is slash n that means liu9 so with the rich text the benefit is you see the same style this one is being applied to that one so we didn't need need to have a different style okay uh so that's the benefit with rich text i guess okay anyway you can also use just text widget as you want all right yeah that's beautiful okay so this has been amazing so we have done this beautiful layout so far okay and next we'll see how to go ahead and do this one okay all right and for this one once again uh this is the text widget and then we'll have empty container okay on the now do remember this is not this section is not within our stack widget not within this one so not within this one so i'll close it right here like this and now what i will do i'll call a row widget and then it takes children um the children the first one is a text and i will say area of focus and then we do text line so text align say align dot center and then we'll do style okay uh text style okay font size say 25 and font to weight font which say we'll use this one and the color will use color dot app color dot home page title color this color and this color they're the same color okay now let's go to save it and see the result okay so perfect all right so next one what we'll do we will uh create this this section over here and this is the most complicated section in this uh home page okay all right okay now to do that the first thing we want to do we want to create and say expanded widget okay all right expanded widget okay and with an expanded widget we'll have say what do you want to do we want to return um we want to create a row okay row and column at the same time but first it would be a row okay this row and it's the second row and once you draw the row you'll also have a column like that okay but anyway so you want to put this two things together okay all right so you want to put them in a loop okay these things you're going to put them in a loop so because you want to put them in a loop so what we'll do we'll create a list builder over here okay yeah so let's do list view dot builder okay yeah just like that let me rearrange everything over here and now list builder of course it takes a few parameters so first one is say constructor but we are not passing it whatever con sorry context we are not passing it and then it takes a counter and after that we can return something okay and return a row okay all right so this would be the first row this would be the second row okay and as we are returning we need this semicolon over here okay now the next interesting part is okay let me write children over here now the next interesting part is this one so this is a container okay yeah so we'll do do container okay yeah and now let's see within container let's define a height for this let's define a height for this so we would do is a height okay now let's say hide 170 okay and uh what we'll do we'll also do with okay so for now say with 200 but of course this is not the width we'd use eventually okay and i think that's it okay and at the same time you want to show an image right okay so once again we learned we can use decoration image so box decoration um then say border radius border radius dot border radius dot circle so we'll use 50 pixels and then image and then we'll do decoration image and image and that's an image all right um for now we'll just use a random image from our assets okay all right uh i guess that's assets and the picture is i think x1.png like that okay now let's see if we save it and what happens um right okay yeah so those are the images right and now because we didn't mention our eyes so it created an infinite loop okay so here it takes another property which is called item count for now we'll do four okay now let's say we run it and hit it once one more time yeah so we have this images four images of this girl's bottom i guess okay now okay uh what you could do next we can also design this shadow for this shadow okay uh so to do that we learned early that we can use a shadow within our box decoration okay so we do box shadow all right um it takes a list of properties so first one is the box shadow and it takes properties blur radius we'll use three and offset we'll use five five and then we'll use color okay on the color dot app color dot the gradient second color we'll use and we'll use with opacity 0.1 okay now let's go and save it and see the result yeah it has a lot a lot of these things right okay but don't worry we'll take care of that slowly okay uh now another reason uh you see this is uh this background color showed up we can use actually white color because this our image is too small right so we can use color colors dot white okay yes so it's gone and at the same time we have this bit of shadow over here right okay so the shadow is working and we also want to put a top shadow so we do just copy directly okay and put it right there now instead of going on the positive side we'll do the negative side okay yeah so everything else stays the same now we have shadows left right in everywhere okay but now here we don't have these things we'll take care of that a little later this section okay not now and you also want to show a text below okay uh within this container uh we have done the decoration now we'll use child child would be say we want to show the text right okay now we want to write at the center and little at the bottom okay so we'll wrap it around center widget and then we'll do say for example child and text and say glutes for now okay and we'll do style text style okay and font size say font size 20 and the color color dot app color dot home page detail color the same color we've used before okay now it's at the center right okay that's what that's why we did this but now we want horizontally center but vertically a little bit at the bottom so what we'll do we'll wrap this around okay so we'll wrap this around and the widget which is called align widget okay and align widget has a property which is called alignment now we do say alignment dot uh bottom center okay all right so it put it down but now it's too much at the bottom so what you could do we can create a padding for our container okay over here so we'll do a little bit of padding over here so padding edge inserts only i will do bottom say five look at this one okay perfect all right yeah okay uh so so far this thing's going smoothly okay but what about having the container over here not at the bottom right okay so now before we go ahead showing it really over here we want to read this file from our uh json file okay so this json file all right but this json file is empty there so everything is good over here but i'll just change this folder name so it's an assets folder instead of embed folder so you can follow along and change with me it's a simple json file okay that's it okay so now we want to read everything from this json folder okay yeah once again this is a very simple json file over here it is this uh key value pair like that okay they have different names so that's what we want to read and show over here okay now come back to our file over here i'll close it for now like this so that we know what's going on and we know it very clearly now over here we want to declare a method which is called init state method but we need to override that okay so now we'll call void init state i would call super dot init state okay and now we'll here create init data this is a private function now we have to declare this function init data okay now over here we'll use a function that's built out of this flatter directly which is called default asset folder default asset bundle i guess sorry not folder and then it takes a context and then it is a property or method called load string now here you have to supply the path of your json file so it's within json folder and the file name is info.json so i'll call info.json and then we'll load it okay uh so once we loaded it then we'll take it to the memory and decode it okay to do that you there is add a step which is called then okay now over here will return something okay now let's see so now everything is loaded over here and in the memory the json file now we need to decode it to decode it we need to call through a function called json.decode okay and you'll call it over here value okay uh so let's import the library this one okay so this value is coming over here over here okay now we need to save it somewhere in our file in our application actually so we'll declare a variable of list type we'll call it info this is an empty list now the decoded json file would be saved here okay all right and let's make sure that everything is working correctly let's reload our app completely from the beginning and looks like there is an error over here it's failed to load the json file so now we will do we'll go ahead and check our pop spec file over here definitely it's missing the path of json file so we need to declare here json folder so our json folder you need to say in your pop spec file where it is okay and what's the name all right now once again go ahead and reload it yes so there are no mistakes all right okay so the decoder has been done now we'll use this okay but now everything is loading perfectly so we need to use it okay so let's find our list builder over here okay and uh here instead of reading it hardcoded4 what do you do we'll read it like say info dot length okay so this would give us the length okay now let's run it to make sure that uh vs fine okay yeah now the very first thing we could do we can um over here change the image okay now we can read the image from here so would read info and now index number i and our key is img let's read it okay now as you see here we have this images they're different images right so it means it is working at the same time we can also change the title so here info index i and then would read title okay well just get dependencies i think you can ignore that okay and let's run it one more time okay or we could just ignore okay yeah so now as you see they have different names and different images right okay well so so far it's good okay now the problem is you want to put this one next to it right like that how to do that now in flatter there is no direct widget to do that and i think there might be one or two plugins but i don't want to do use plugins for this so this is the basic programming thing that we should learn okay all right so how to go ahead and do that now all this list builder is more like a for loop okay so i want now the size of this for loop is like four because the length is four okay if you go ahead and see our info json file so there are four items here okay yeah one two three four and the title and images that's what we are reading just now anyway but now i want to read them uh just only two times okay so each time you read so there would be like the first row i would read these images for first row and read again next time the second time so i'll read it two times even the four of them but within two times we're gonna finish them and finish rendering okay well so the first thing you have to do is turn it uh like we need to divide it by two right okay so now because it's the it returns integer like as you can see get length it returns integer but if you divide it by two it will become more like a double so first you need to turn it to double okay all right now divided by two okay now this result is really double now but it takes integer so we'll turn it to end all right so what do we did because we need to divide it by two but it could be only divided by two if it's a double okay so we turn it to double then divided by two now the end result from here it's a double but item count it takes int like as you can see here so we cost it to to end all right so now it will return a value of two okay now that part has been done okay now over here we want to just say for example copy the same one all right yes and put it so over here now let's run it and see the result so definitely this time this is only run two times okay um the let's see if we have an error okay well now there is this kind of this error that error and also you see it's repeating the same thing so we have few issues to take care of right now okay well the first thing i think we can take care of this indexing problem and then we'll take care of this one okay now this is the first container definitely the first one is right the second one is wrong right and over here of course first one is right second one is wrong we can think like think it like that so in general you might think okay when it's going to the second time can i just uh increase the index number okay just do plus one and the same one we do for title okay now let's see what happens okay now it looks like yes it works but now they have the similar index okay so it means it's not working okay so what i want the first time index is zero second time index is one third time index is two next time index is three but what's happening here index zero one one and two so the third one the third index i mean the third index we are not getting and we are also repeating the second one like this index is one this index is one so we need to get rid of this problem now here is the simple algorithm that i found and it works with me i mean i made this own algorithm i don't know if you have better algorithm you can definitely please share with me i'll welcome that one now i want to save the indexes and do a simple calculation okay so what i want to do whatever index is there we take it i uh of course the index is i and we multiply it by two i'll explain soon why and the second one is b and what do we do we multiply it with i plus one okay now let's see what's happening here so first time index is zero all right so this becomes 0 because index i equals 0 first time right okay and at the same time this b is 0 plus 1 so it becomes one so in the first iteration we get zero and one okay all right so what we could do we can just retrieve this instead of i we can use a the same for this one a all right now within our second container instead of i plus 1 i can use b and over here i use b again so once the first iteration is done once the first iteration is done a is zero and b is one so that means that after first iteration this two would be used right yes okay so this is the simple algorithm and when it runs a second time then i is one right then a becomes two right and how about this b well i is one so i multiplied by two is a two plus one so three so it's working right so we are using all these indexes so first term when it runs so this is zero and this one is one so during second iteration this index is two we are getting index two and the last one is three okay during the second iteration so that means it should work okay now let's go ahead and run it application restarted yes so now as you can see the images and the titles they're all different so it means it's working this is the first index second index third index and fourth index so we can confirm it from our json file so glutes abs glutes abs i think it should be glutes not glues and the next one is legs legs and arms so that means images are also correct okay let's let me restart it one more time because i edited the json file so this means our simple algorithm of showing uh uh our containers in a column next to each other it's working i tried to do stack overflow but i couldn't find a solution for this so i just wrote my own algorithm all right so that means it's working uh now the another problem is this overflow okay well that's happening because uh this total container size is too big right now do remember at the very beginning at the top we have this thing this left right um padding right so there this extra space they are taking but because we need more space here so we want to get rid of this extra space we don't want it okay well now if you don't want it what we could do right here uh we can wrap this contain this one around another container okay yeah so that is called overflow okay so let's in mac hit command enter i think in windows that should be alter enter okay now we'll get an option for wrapping it around widget okay now we'll here use a widget which is called overflow box okay you do that and at the same time you need to mention that you want to use the maximum width so what it do it would use the width of the screen so you need to take the width of the skin and tell it that use the maximum width now let's run it and save okay yes you see so that means this top padding is not taking effect anymore okay so because you are using overflow index so it took this extra space okay now we have too much space and that's okay yes so let's recount our um screen width okay over here so what do we want to do actually we want to use a 30 30 pixel over here empty and 30 pixel over here empty and 30 pixel over here empty a space right so rest of this space we want to use for our container and that has to be dynamic so here we want to calculate this one okay yeah so how do you do that well now here once again we get media query dot off dot context dot size okay the width okay now we get that one now do remember that we have this 30 over here 30 over here 30 over here so three third is together 90 okay now i remove 90 but at the same time i want to position it over here and over here right so what i'll do i'll divide it by two so over here what will happen so you remove this 30 30 30 so it would be here okay is this 30 over here 30 and over here 30. so it will remove total 90 then would be left up left with this amount of space okay now what do you want to start now we divide it by two so that means you will have this amount of space okay or like this amount of space so we want to use that amount of space because rest of the space you need to divide equally to these two containers hope it makes sense so you remove 90 and rest of the space you want to allocate equally allocate equally to this to these two containers okay so that's why you divided by two all right okay so that's one and so now let's go ahead and run it and see the result okay it's loading yes it's removed a lot more space and you see first one becomes smaller right so we'll apply this one the same one to our second container so this is our second container so this is the width all right now let's save it okay now it becomes much smaller now i think you understand that now here is our 90 pixel okay so this 90 pixel has been removed and this is the whatever the space we our container is using so that means this part is very dynamic okay now what you could do this containers itself we can put some extra padding or margin like this okay so now this container will have margin okay all right so what do you do edge edge in sets only i would do left so left 30 okay so this is the first container and it will have 30 pixel margin on the left so let's save it so you see now that margin is over here but at the same time our shadow is there as well remember earlier we didn't have the shadow it was cut off okay all right and at the same time you also want to give it a bottom margin for the first one okay yeah so what do you do we do bottom [Music] say 15 all right so there is this bottom margin a little bit but it looks weird we'll fix it very soon okay now the same one you'd use over here okay so give it some margin so margin will do edge in sets dot only and the left so this for our second container right so left 34 so second container will have 30 pixels okay now it's working and at the same time let's see what we could do maybe okay this bottom bottom 15 let's save it okay now it's looking much better okay so this has this little bit uh a bottom margin okay now what we could do we can also add a top margin uh bottom margin say the first one bottom i think for this second one second one for the second one we can add the top margin so top well instead of doing like this why don't we just do directly 30 yes and also let's change it over here okay so now it's looking much better okay so this is uh working pretty perfectly okay so with this actually everything is fine as you can see you can scroll up and down and at the same time say for example if you increase this somehow say for example you want to increase this thing okay so six and in that case our algorithm should work okay as you see now there are total six uh six items and our algorithm is working the last two lags and the last one is arms so whatever the algorithm we wrote here it's working correctly okay i'll keep it six six here for now okay now there's another problem now here this is too much extra spatting uh padding top padding so we'll remove that padding to remove the padding you need to this one actually this this padding is coming because of list builder so you need to wrap it around another widget and that widget is called media query dot remove remove padding okay um it has this top padding so we'll set top remove top true and you also need to pass context to it okay now let's save it so let's see well now it's too close right so over here maybe uh we can set up a margin okay now this top padding can help us okay say top margin actually top 15 and over here for the second one we can also do top 15 okay but now it's too much over here right so maybe we need to get back to bottom 15 and 15 together okay so everything is perfect all right so with this we are done with this section and now we'll build our next page okay all right so now we'll be building this next page first we'll build a page and then we'll connect that uh connect them through navigation okay uh to do that first we need to declare a file let's go ahead and create a new file and we'll call it video info dot dart okay and then we'll create a stateful widget and we'll call it video info and then we need to import some of the dependencies and we're good to go all right well now the first thing definitely we want to wrap it around a widget okay and we'll call it a scaffold okay all right and we we're gonna use scaffold because we also need to use some of the other properties and the navigation button things like that anyway so instead of child we do uh body all right okay perfect now the first thing we want to do we want to give it a background color okay and things like that okay so to do that that we'll directly use decoration property for this okay box decoration okay all right because as you can see we have this linear background color over here and so this is a gradient color right gradient color so that's why we need this box decoration because if your box decoration we can use linear gradient or this kind of gradient color so once again we'll do gradient over here okay and we'll use linear gradient okay all right and then it takes colors okay now once again we'll use our color file so we'll import it to do colors.dart as color okay all right okay now definitely we'll have gradient color uh so we do color dot app color dot uh first gradient and then we'll do the second gradient color okay second sorry gradient second right okay now for now we'll change this home page to video info later on we'll connect them together video info now we need to import this file okay now let's go ahead and run it on our simulator sorry this one okay all right okay so this has this gradient color right and it's coming from left to right uh what is this file so this file is over here and over here actually i can we can also specify where to begin from and where to end from so would say begin and we do const fractional offset fractional offset this one and zero point zero and 0.4 okay and then we'll do end okay for end i would go with alignment and top right okay let's see so you say change so it started from here and finished the top all right and i guess we're very happy with this okay so now background is this that's because we want to have this kind of background right okay now with this actually we can do a bit of change because it's might be right now too deep so we can change the opacity of this okay so do with opacity say 0.8 this is the first one then nine one second one is zero point nine okay um or let's go ahead and nine with this okay uh yeah or just okay well now i'm happy with this one okay so this color almost matches this design color okay i guess all right so that's what we have now and the next we want to do here as you can see that uh we have this layout over here so definitely this is a column layout as you can see so we'll use column property okay now within child within container will declare a child property okay and child be column for sure okay yes well now with the column we'll have our width okay sorry children and within children we'll have a container okay and within container will have this bunch of stuffs okay all right now within container we want to declare our media query and hide things like that okay so we'll go ahead with with and we do media query dot off dot constant context dot size dot width okay now we do height okay and height because uh within this will display some of the stuff okay so do 300 but let's go ahead save it and run it of course there is no obvious difference because we don't have any content now the first thing we want to do is uh showing this one this is as a row right okay but this this row and this row and this row would be within a container and that container would be once again a column okay so here we have this child and we do column okay and it takes children and within children will have row okay and row once again takes children okay and now this is the first one is the icon okay so you do icon icons dot arrow uh this is this one back ios and then we use size say 20 and then we use color okay now we'd use color dot app color dot second page icon color this is what coming from this color palette okay now let's go ahead and save it and run it okay now this is not visible yet let's see okay well i know why because this might be somewhere uh at the very top okay so now for this container uh we can uh hook up here padding okay so we do const edge sites only and we would do top 70 okay now let's save it now here is our icon so definitely we can also use left and right padding so left 30 and right 30 okay perfect so it's looking much better now all right now we want to place our second icon which is this uh this one okay so we do icon you know what it could do we can just completely copy this thing let's save our time and the only thing we need to change this icon name so do info outline info outline this one it's beautiful put it there and run it okay now they are together but in the beginning of this tutorial we'll learn we can use expanded widget to separate them container all right let's save it perfect we are done with this right okay all right now what else we do we do this text all right so legs toning things like that so i think we have this one over here so over here we can copy it uh from somewhere so let's look at this container looks toning yeah this too so this one and this one okay so i guess we can just completely copy this one and video info over here right but definitely that would be a i guess a new row right you can just completely put it here okay and not in this row because this is we are already in column right so whatever it is so it would be laid out on the top of each other so let's save it and see okay perfect uh but now we have some of this problem here because it's in the column so this column property we can set so we can use cross-access alignment which is horizontal alignment dot start so you put everything at the beginning now here they're too close to each other so we do size box size box say height 30 all right yes okay perfect all right and maybe we can change some of these colors instead of home page this color we can use the second page title color okay and the same over here second page title color second page title color all right yes we're done we're good with this okay and next we want to show this one okay all right now right after this text we can use and the row property i mean draw widget and then we do children right okay because we have this and this okay well now this one as you can see these two they do have background right so that's why we need to fit this one in a container and this one in another container okay all right so that's what we want to do so do container because if we have container we can assign width and height okay and background color and we do height say 30 right and we do decoration box decoration all right we do now this one over here we need a radius and gradient color as you can see from there so do border radius border radius dot circular.10 i mean not 10 though now we do gradient color for uh background and then would use colors okay now we'll use the two colors so the first one is app color dot second page gradient color first and then color dot app color dot second page gradient color second all right yes now let's go ahead save it and run it so it's there so it's getting this uh background color all right okay now we can also assign this begin and end thing so do alignment dot bottom left bottom left i guess and and alignment dot top right okay perfect now let's save it okay now here the changes are very tiny it starts from here and ends there okay all right so you can play around this value and see anyway so now here these two items right now they are also in a row so within this container uh i'll declare a child property and within child i'll have this row okay all right now this row will have our this and this so definitely uh we can declare with icon so the first one is icon icons dot say timer so that's a timer and then size 20 and what else we can do color right color dot app color dot second page icon color this one let's go ahead save it and see okay it's working all right well at the same time next we can do another sized box within this row because before we put the text so we do size box with five okay perfect and then we do text okay now the text is 68 min and then with the text style text style okay font size say 16 and a color color type color second page uh icon color so this one we'll use the same color for them now okay now it's there okay all right so now the problem is that it's it's too close to the previous uh text color or the text not text color so over here we'll use a size box uh size box and we'll use say height okay on with the height 50 and it should look much better now okay perfect all right okay now another problem with this is that the this is too close to this side so we can put this whole row item in the center so over here we'll use because again it's two left okay so we can center them so we do main axis alignment so main access alignment dot center okay now it put things in the center okay well so that's our first container right okay now this first container hold this thing so we need to have another container for drawing these things okay this this item and things like that and before we do that we can use the size box otherwise they would be too close to each other we'd do with 20 okay now once again pretty much like this one everything has to be in a container then background color this and that okay so everything in this row okay but this row has another part so and what you could do for this one first definitely we can copy some of the things from here so so this container okay well now this container we put it there and let's put it now it's next to each other but it's too close so we'll use size box say with 20 okay now let's see okay perfect uh but now the width over here it's uh not because this text is much longer so you can use a longer width say 250 all right it's it's making sense now the height is okay everything else is fine all we need to do just change the icon in the text right okay so the tag for this icon i don't have the perfect one so i have used handy outline things like that it's not the perfect one though okay now we'll change the text over here so this text is uh red resistant bend kettle bell okay perfect so now everything is working perfectly okay great we're done with this so this row section has been done all right and uh what else so now we want to have this one so let's see [Music] okay so let's uh organize our code so that we understand what's going on okay perfect all right so now we want to draw this one and okay now we have this section this section we're done and this is in this container in the column so in our column this is the first container and within container we have containers and rows things like that so next we want to be able to draw this one okay and to draw that we want the rest of the space should be white space whatever the space available on the screen so that's the space we want to take and if you want to take available space of something or within a widget or container you should use expanded widget okay and over here we'll do container okay all right yeah and uh uh definitely for container you need to give it say color right so go ahead and give it colors say white color and let's see the result okay now as you see it's taking uh this rest of the white space okay and we want to make this border over here okay so that's why we need to use decoration property okay we do sorry we do box decoration okay and we do color colors dot white okay perfect let's save it and we're good okay now because we're doing decoration so we can do border radius border radius dot say what kind of how much border we want to give it say 70 pixels all right okay perfect but now it's taking here and there at the same time but we just want one border so that's why we can do border radius only okay border radius only and we're going to do we want to do top right and radius dot circular and then we do 70. okay so that's what we want okay perfect we are almost done with this section okay well all right now we want to draw this section and whatever is here now as you can see if you look at it so this is one row and these are rows also inside a column so this is this all could suit in a column widget okay so now within this container it takes a child property so we'd use child property and we'd do column okay and then we'd do children okay all right now within the children definitely the first one is the row okay all right so we do row okay and row text children okay fine now what you do would do text over here and let's see what's the text name this circuit circuit one likes toning okay and then would use style text style okay and the font size say 20 font weight font weight dot so we do bold okay all right and uh let's save it and see the result [Music] okay perfect all right now you you also want to change the color so we do color dot app color dot say circuits color okay so this is just name of the variable that i've used okay now i like this color okay okay now they're too close to each other so i want to create a distance from the top so over here i could do size box sized box and would do height say 30 and run it perfect now it's too close to this left side for the row itself so over here inside the row we could do size box again and we do say width okay with the 30 yes perfect so i'm happy with this uh so we have this text and things like that so the next we want to draw is this three things and this empty space so definitely for that icon we can directly use over here so what you could do we can put this in a row okay bro so do children and i can i can start say it's a loop okay all right and size 30 and the color color dot app color dot it's a loop color okay let's save it and run it okay it's there and next you want to put the text before that you want to have a sized box say with 10 so that they don't stick too close to each other and then we do text and the three sets okay and then we do style text style okay font size say font size 15 color color dot app color dot sets color okay so these are the variables in the color file okay where is this over here all right but now once again they're too close to each other this uh this row and this text so over here we can create a sized box we don't need to create a size box we can use actually expanded container so it will take all the available space okay now you see this is pushing too much to the end so how to solve this problem okay um now here we can use like this one right after that we could use a size box okay uh size box say width 20 so it'll take some empty space right after it okay so it looks like it moved over here okay perfect so we are done with this section now okay all right so the next we want to do next we want to do is these things okay show them all right now i want them to be loaded from a json file and we already have this json file in our project okay uh let's see what is our json file so this video info is the json file so we want to load them now for loading what we'll do we'll just copy paste the one we had for our home page over here so pretty much i'll copy everything and just change the file name so we can save sometimes so now here within this i'll load it but instead of info this time it's video info the file name okay and i need to import the file library okay now let's save it make sure that it's loaded and no error okay perfect so here we don't have any errors so it means it loaded correctly and everything is fine okay now we'll see how to use this back button okay and go back uh to home page so this would be our home page from here uh we are here in details section okay well detent section is within this row so if you open it up uh here we have this detail so there would be a button like over here and once you click the button it will come to this page then this back button will go back right now for this one actually we'll use a package we'll use get x package so let's go ahead and install it so just uh over here yes so right here get i didn't get that's all okay now it will update ask you to get get the files once you click on this one so it will uh install the necessary package and i think it's done and now over here we'll wrap this home page material app using get all right okay and make sure the file this file this file has been imported yes it's good and let's run our app and make sure that uh it's working correctly now i'm using here get x for navigation and other things if you want you can check out the other tutorial that i made before and i explained more about get x in that tutorial so check out the link below anyway so now we are here uh so now let's go ahead and change it to home page first okay then we'll go to video info all right so home page okay let's save it run it yes so this is our home page uh i think we need to reload everything okay fine yeah so that's what we have now we want to click on this place and go to the next page right okay all right how do you do that now let's go to home page and over here we have this icon right so wrap it around uh widget which is uh called inkwell ink well okay this one and it takes a property so so let me close this it takes a property which is called uh on tap okay and over here you can use uh get its library to get to a new page to do get to okay and here you will mention your page where you want to go we want to go to video info page like this one but definitely you need to import this file first and you also need to import getx right so let's go ahead and import it let's see isn't defined let's see i think instead of getting this on you can just import this main file and the error should be gone okay now let's restart our app okay let's restart it i guess no problem now let's click on this click on this icon all right now it comes here now we want to go back now if we want to go back let's find this arrow well i guess this arrow is over here okay and we in the first row okay so this is the arrow right so what we'll do we'll wrap it around once again another widget i'll call it say inkwell all right and over here we have this on tap button okay sorry child [Music] yeah this one okay and i think there should be a comma although it would be cranky okay now over here we can use get to get dot back and that will take us to previous page but as usual we need to import the get x package so we'll import it right below it okay now the error should be done well now let's go ahead and check it out so start from here so everything is loaded now click on this arrow and now we are here on this page and now we go back all right okay perfect so our navigation is working perfectly okay all right and at the same time earlier in this section we also have done this one next we'll see how to load this information video info and play the video in this page okay over here so we'll stay tuned for the next tutorial which is coming very soon thanks for watching

Channel: dbestech

Views: 82,327

Keywords: flutter app development, build flutter app, flutter app, flutter app step by step, flutter app for beginners, flutter app development for beginners, flutter getx app, flutter video app, build flutter app from scratch, flutter for beginners, flutter tutorials for beginners 2021, dart, flutter tutorial, flutter

Id: svQOxQde0bg

Length: 121min 12sec (7272 seconds)

Published: Fri Aug 27 2021

Reddit Comments

[u/zintjr]

Awesome job dude, thanks for contributing!

[u/Sajjad_theory]

How do you manage your flutter apps, what is the best architecture?

[u/Tree7268]

I haven't completely watched the video, but wouldn't it be better to use SafeArea instead of a Container with padding at the top? What if the padding isn't enough on some devices? I like the part about the colors, this way its very easy to later add something like a darkmode or change the overall style.

[u/GitPushMaster]

Subscribed to your channel because I see potential, and can't wait to watch all your videos!

[u/mersalin]

Thanks for the video, awesome job.