Flutter Tutorial - Stack - Deep Dive

hello everyone in this video we want to look at the stack widget and i want to do a deep dive about it so i want to look at every attribute which the stack which it has and to show you what this stack widget is about so first of all i wrapped a stack widget into a center and you can wrap it even into another widget for example into a container and here you can give it a color so i give it here color of black and then you see that initially the stack gets the whole space available if you now place some widget here inside then you will see that the stack takes not the whole size anymore so for example i take here a widget with a size of 100 and also with a height of 100 and then you see that the stack automatically gets also smaller so it takes only the base needed but what you also can do is you have here this property which is called fit and there we have here the stack fit expand and if you do this one then you will see okay right now the red widget is here expanded and this is exactly what this fit widget is doing it expands again everything so initially it is for loose and then we have it like this but if you say expand then all the widgets inside which have not a positioned widget around it will take the whole available space however if you place here this position widget around it and inside of this position widget we can set some parameters so we said for example it should be at the top then you see that we still have here this black widget which is our stack so it is still expanded however the red widget is then here aligned to the top left corner and with this position widget you can basically align your widgets inside of a stack widget by pixels so you can also say okay it should be 10 pixels left of the top left corner you can also say okay it should not be to the left it should be to the right instead so you can also put your higher value and then you see it will be positioned here you also have something which is called bottom and therefore i remove here the top currently and then you see it is aligned to the bottom so basically you have bottom top left and right to align your widget inside of this stack widget if you for example take bottom and top and both supply with a zero then he doesn't know where to line and therefore he will stretch the whole container widget which we have here in red and even if you supply here a width of 100 and a height of 100 he doesn't care he will stretch it here the same goes into the other direction so for example i set here bottom only then it is at the bottom and now if i set here the left to 50 and now he stretches the whole widget from pixel 50 to with minus pixel 50 because here we set the right to 50 you can also set it to 100 or 0 and then it will align differently so with this position widget you have the full flexibility of how you want to position your widget so with this position widget you have the full flexibility to position your widget inside of your stack so for example you can also change here at the top of the stack the width and height of the stack so i set it for example to 200 and 200 and then you see the stack is this black thing here so it's 200 and width and 200 in height and inside we have here this other widget and because we have here set to expanded so it expands to this 200 and 200 however this other widget will not expand because it is inside of a positioned one and therefore it will be aligned here and this is basically about one widget but you can also place multiple widgets inside of a stack and therefore i go here and get rid of this expand for now and put here another widget inside and i put here two other widgets inside so i put here range widget of 200 and 200 a blue widget of 150 and 150 and then we have here this red widget and this will look like this so we have basically the blue widget the orange widget and the red widget and like you can see the widgets are displayed differently so the red is on the top thereafter comes blue and the revenge is in the background the most so you can say it like if you put it your widgets here at the end of the list then it is displayed at the top and on the other hand if you place a widget on the start of the list then it will be at the bottom so right now orange is at the bottom but i also can place red at the bottom so i just remove here this red and put it here at the top and then you see that the red is not there anymore because the orange is over it and after it comes the blue one so basically the stack widget makes sure that all of your widgets inside are overlapped and this is one widget on top of each other is overlapped and therefore this order here of the widgets inside of our list is important and here are the top ones and here are the bottom ones all right i will put this one here back so that we see all again and i will also delete here this positioned widget for now and now you see okay we have here this red one the blue one and the wrench one and now we want to talk about different properties which we have here for the stack so we have also this alignment and this alignment can be set with alignment and then you have here all these parameters so right now it is aligned to the top left corner because every widget will start here at the top left corner and then it will show its size so here 100 and 100 pixels for the blue one 150 and 150 and for the range one two hundred and two hundred but we can also align it for example to the top right and then you will see that all of them are aligned here to the top right and then they will display their whole size here you can also put them to top center then they will be aligned here to the top center and obviously there are also other attributes so bottom center and all the other directions which you can take now it is important to mention by default all of the widgets the inside are aligned to bottom center for example right now but if you place for example right now here around this red widget a position widget then it is not aligned anymore around the bottom center because now you can define it by your own how this widget should be aligned so i can say for example top 0 and then you see that it is aligned here to the top and you can also say okay it should be aligned left 30 and then you see it is 30 pixels aligned from the left or you can put 10 then it is 10 aligned from the left and so basically with this position widget you can override the alignment and change where this widget should be specifically displayed in the stack then we have also another widget which is called overflow and i will basically show you something so for example i type here minus 100 or minus 50 let's say then you will see okay we have here our widget it was before larger but now it is not there anymore but it will still be here but it's clipped away and this is because of the default behavior of the stack it will automatically clip widgets away which are not inside of this deck but with the stack you have this property overflow and then you can set it to overflow visible and now if you hot restart then you see okay it is still here but it is outside here a little bit of the stack and therefore it is overflowed and you can then change it also in the other direction so you can even place it a little bit outside of the stack and it will still display it even if you go far more so let's say we go here with 150 even if it's outside it's still displayed here and this is fine but if i remove this here again then you will see okay the red widget is not here because it's not inside of the stack and therefore it is clipped away so this is what you can remember here and that's basically everything what you really need to know about the stack so it is not really complex and in general it is therefore there to make multiple widgets on top of each other displayed and then you have different choices how you align your widget if you want to make it visible or not and if you want to expand your widgets or if you want to keep the size loose all of it you can decide for the stack hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye

Channel: HeyFlutter․com

Views: 8,136

Keywords: Flutter, Dart

Id: F12GIPdd32E

Length: 9min 36sec (576 seconds)

Published: Fri Sep 18 2020