Make Flutter Stack Positioned Scrollable

everyone assalamu alaikum well in this  section we'll see uh how to make your position   widget scrollable well over here as you can see  i have scaffolding within scaffold i have body   and a bottom navigation bar all within uh scaffold  within body i have the stack and stack as you know   it takes position widget well i have two position  widget well the first one is this one over here   okay and the second one is this one and this is  the widget that's showing this items over here   all right so in this items i can take things  out okay or i can go back home and add more   but let's see uh the point i'm trying to make  how to make your widget scrollable so what i'll   do i'll add more now i have four now let me add  two more very quickly so over here and let's say maybe this one okay add to cart and let's go  to this page over here now i have this one   as you see it's not scrollable so how to make  your widget scrollable uh well now my in my   situation i'm using stack widget or while  there are many different ways you can make   a widget scrollable but if you have stack widget  in general stack widget the default property they   are not scrollable i mean the widgets inside  stack widget which is called position widget   so position widget in general is not scrollable  to make a position widget scrollable actually we   can use it two of the way uh two there are two  ways you can do that well the first one is uh   setting up the constraints which means that top  left bottom and right this positions now as i   see i have only three properties over here so  this three properties not good enough to make   a widget scrollable um because my understanding  is i think flighter framework really doesn't know   from where to where how to make it scrollable  which means the width and height so the simple   proper solution is you use like all the properties  like top left bottom then it would be scrollable   so now i restarted it hot reload and  now you'll see that i can scroll it okay   uh but say if i take a bottom out so now  i restart it's not scrollable now let's   try if i say write property out and let's see what  happens of course we will have overflow issue okay   yeah so it doesn't work because it is scrollable  now but there is an overflow issue so definitely   you need all of them to make it working properly  and to make it scrollable okay now within position   you widget you set up this four properties and  then as a child you can put whatever you want   and make that scrollable okay well now this is  one of the ways that you can make scrollable   and there is another way so it depends on your  needs so now i commented out so now i have   only three properties and it's not scrollable  yet uh now you can do the other thing   like if you have child widget and if child  widget can take constrain which i mean   width or height so you can give it height so once  it takes height the child widget so it works with   the parent widget together so parent widget  knows that the child widget has a constraint   in that case the scroller will still work okay so  let me put it like this now i restarted of course   so we have this white part here because this is  500 but it is still scrollable so it depends on   your needs of course you can make it much larger  like so 1000 okay now that white part we don't   see anymore okay yeah so but now in this way it  doesn't work the way you want so it only works   with minimum height say 600 700 uh it works  like that okay now the reason it doesn't work   the other way that's because um i mean this screen  height this height container height becomes bigger   than the screen height so child height has to be  smaller than the screen height then it works okay   so i'll use this one i'll use the bottom one okay  all right so this property so um so far i found   two ways we can make a position widget scrollable  which is inside the stack widget okay thank you

Channel: dbestech

Views: 19,364

Keywords: flutter positioned scrollable list, flutter stack scrollable, flutter positioned widget scrollable, flutter tutorial, flutter widgets, flutter

Id: GPbnhN8lvbw

Length: 5min 1sec (301 seconds)

Published: Sun Dec 26 2021