Stack and Positioned in Flutter | Flutter Complete Crash Course | Flutter Widgets | 30DaysOfFlutter

hey there this is akshit madan and welcome back to the day 15 of 30 days 30 concepts of flutter series for beginners and in the last part we were studying about the forms and we had built this simple form also and in this part we're going to study about the stack so what is a stack so to study about a stack i have found this beautiful image on google and you can understand the stack from this image so basically you can see that we use stack whenever we want to put something over something right so you can see this yellow square box is at the bottom now let's say now let's consider an image and on that image you want to put some text or you want to put some widget or you want to put some icon and instead of an image you can consider any widget right whenever you want to put something over anything then you use a stack so you can see that this yellow square box is at the bottom then over this yellow box we have this purple box and over this purple box we have this red box you can consider from this image also at the bottom we have the green then we have the red then we have the indigo boxes right and yes so this is a use case so using the stack only this uh this developer has built this flutter solid game in which you can see that these are the cards and over these cards we have put other cards so right so whenever you are willing to build such things then you can use the stack and you can see from this image also like this card is overlapping this app bar that means this card is uh that that means this complete widget is a stacked tree and inside it the app bar is at the bottom then we have the card so these are some of the use cases and we will be building something like this only today we will be using an image and over that image we will be putting some other widgets so i am on my vs code and in this widgets folder i'll be creating one more file and yes if you want any code you can go to my github repository link is in the description so let's let's call it stack.dart and in this stack i'll uh very fastly i'll just copy uh this only ctrl c then in the stack i'll just paste it and i'll just remove this body right and i'll make it as stack widget perfect and the app bar i'll make it stack so let's take a simple example first in the body i'm going to write a simple container and this container will be having a color of colors dot blue and if i just save it and in the main dot dot also have to return stack widget instead of returning form widget stack widget and if i just save it you can see the stack the app bar the app bar and then i have this blue container now in the stack dot dot i'll just put some other widgets and i'll put one widget over another widget using a stack so after this color you have to define a child and to this child i'll define a center because i want everything at the center and in the center uh i'll put a stack so i'll put a stack and yes let me just deactivate my github copilot uh disabling for dart for now so let me just write stack and the children we have to define a child after this center i just forgot it perfect now as you can see i've defined a stack and this stack takes a children so as you know that in rap in column in listview they take children in the same way stack also takes children right so let's define a simple container and to this container i'll define a height of let's say 400 a width of let's say 400 and a color of yellow let me just save it so you can see this container at the center of yellow color now let's say i want to put a red color container on this yellow container so i will define one more container let me just copy it let me just paste it let me just decrease the height and width change the color to red if i just save it you can see that whatever you will put after this main content that that is this first container and as you can see that this red color container is written after this yellow container then this red color container will be over that yellow container or above that yellow container right but if i put this container this red container before this container this yellow container and if i just save it then it will not be visible because it is placed below this yellow container so i'll just make it yes perfect and let me just use a center save it and let me just use center for this too perfect you can see right now whatever container i'll put after this red container it will be placed above this red container right so i hope you are getting the stack tree how we use stack tree so let me just again half the height and width and i'll use the color green and if i just save it you can see the green container is now above this red container and red container is a red container is above the yellow container perfect so i hope you are getting the stack now basically we use stack uh with position we use position uh while using the stack so let's use position so why do we use position so as the name is defining whenever we want to uh modify the position of a widget then we use position so as you can see over here i'm using center but let's say instead of putting this yellow container this red container this green container at the center i want to give some uh modified spacing from top from bottom from left from right right so for that let me just decrease this height let me just make it 300 let me just make it 300 this will make it 250 this i'll make it 250 and this i'll make it no 150 this will be this will be again 150 and this will be 50 last container will be 50. let me just save it fine so they are of small size now let's say instead of defining the center i'll just remove it and i'll use position now this position has four other parameters that is bottom height left and right so let's say this yellow container i want to place 10 spacing from the bottom so i'll use bottom and i put 10 and if i now just save it you can see this yellow is at a spacing of 10 from the bottom so now let's say i want to keep it 20 from the left so i'll write 20 i'll just save it you can see it is 20 now if i just put 50 so it will be 50 from the left like this you can use top and right wherever you want to put your widgets in the same way let's use position for these red and green container also so i'll use top and in the top i'll define 40 and from the right i'll define 70. put a comma save it and yes so like this you can just change these positions so what is the use case why i'm doing this stuff so for that let me just take a use case so let's do it so let me just remove this complete body and like we will take a image and we will work on that and in the body i'll define a container again or let's define a stack and in the stack i'll define children and first children i want to take an image at the center so or we can use position also so let's use position and the position we have a child so let's give a child i want to give a container and the container i want to give image dot asset image dot asset and that's it i'll write asset download dot jpg i have this image so if i just save it let's see what we get so i have this image so in the position i want to give from the top i want to give like a 100 and from the left i want to give 100 let me just save it we have the image over here and if i uh yes perfect so i just want to increase the size so i'll just remove this uh left from here and i'll write height and width to this container height i'll give it like i think 200 200 will be perfect and the width i will be giving uh the complete width i want to give so for that i'll use media query dot of context dot size dot width just save it so as you can see now it is at the center because i have given the complete width of the mobile screen to this image i can just increase the height also let me just do it yes so it is coming at the center i can now remove the top if i just save it yes perfect now let's say i want to keep some i want to put some widgets over it right so for this you can just watch my card ui tutorial i created a visa card i just cloned that complete visa card or you can say mastercard in flutter right so you can watch that i also use neomorphism in it so you can also we will also be able to see this card i button you can watch it it's very it's a very perfect video for understanding stack and position but now let's say now over this image over this container i want to put some widgets so let's do it folding for doing this let me just see where my container is so i'll use a color and i'll write colors dot red so this will give me just a reference or an idea where actually how much spacing actually my container is taking this image container so it is taking this much uh spacing but i want that it should also this image should also cover this complete container so for that i can define instead of child i'll define let me just cut this path i'll define decoration so i'll define decoration i'll define box decoration i'll define image i'll define decoration image and in this i'll write image and then asset image and then you can paste the path so let me start it let me just paste it yes i'll remove the child from here and you also know that we can't put color if we have the decorations i'll cut this color and put the color inside this decoration paste it it will be box fit dot cover box fit dot cover and if i just save it perfect now i want to put some widgets uh like below this dorymon or above the story mod so i can just put one more container i'll take a container and you can see that i am putting this container after this container that means whatever i'm whatever widget i'm going to use after this container it will be placed above this image so i can take a container i'll put a height height of let's say 50 and a width of again let's say 50 and a color let's say of color start yellow and what is the error i'm able to see it so let me just cut this container and after this position we have to do it and i'll use one more position so i can just remove that container so it will be child and just paste that container and if i just save it now you can see this container is over here but i want to just modify its position so i can just do it by using this position that's advantage of this position so i'll take left as 20 then i can take top as 20 so if i just save it you can see it is perfectly fine so like this you can work with position i can take more containers and i can just place them anywhere using this position on this image so i hope you uh you you have got a very good idea what this stack is what this position is and you can also use aligned inside the stack so let me just do it so after this position i will define a line so i have a line and this align takes an alignment so i'll use alignment and i'll use alignment dot alignment dot let's say bottom center bottom center i'll take a child and to this child i'll define one more container of let's say we copy this container only let me just copy it and we will paste it and if i just save it you can see it is at the bottom center because this complete stack is taken right so like this you can just place your widgets anywhere you want to keep so i hope you like this video and till the next content keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 2,132

Keywords:

Id: FEo5wIEGdy8

Length: 13min 17sec (797 seconds)

Published: Sun Jul 11 2021