Flutter Stacked Item ListView | Flutter UI Design Tutorial | Scroll Animation

[Music] hey hello friends and welcome to retro Forell studio and in this video we're gonna be taking a look at creating this awesome ListView screen in flutter you can see that I swipe up on the ListView the top container fades away you can see that we have a strolling widget in this along with this you can also see that each of the item in this list appears to be stacked on top of each other and the top item of this list fades away as soon as a scroll on the list so this effect can be used in multiple ways in your own platter apps so let's take a look at how to create this ok so right now I'm gonna simple for a wrap in which I just have this basic UI Tom you can see that I here I have this my home page and in my home page I have this build function in the builds function you can see that I'm getting this nice from media query and I'm storing this in a new variable for ease of use along with this I am returning a scaffold which is covered by a safe area along with this I have this app bar in which I have set elevation to zero I have a leading icon and a few action icon buttons that you can see right here along with this for the body I have this container which is set to a height of sized or height in this I have a column for the first child of this column I have this world in which I have this text of loyalty cards and menu that you can see right here along with this I have added some space using the size box for the third child of the column we have this categories scroller which is basically an instance of this category's scroller class that I created this category scholar is basically a stateless widget and in this I have a single child scroll view and I have this container which contains a row and in this row I have these three containers which have some text widgets in them you can see the detail right here and you can also get the code from github for the last channels of the column we have this expanded widget and in this I have a child of ListView top builder so basically this list view dot builder is getting its items from this item data this items data you can see that it is a list of widgets which is set to an empty list in my home page States for getting the data I have this function called get posts data in this I'm getting the data from this constant of food data this food data is basically declared in another file called call stand start in this you can see that I have list of objects and each object is having a name-brand price and image these images have been added to the application as an asset that you can see right here so let's go back to the main door file so in this get post data what I'm doing is in getting the data from this food data and iterating over each of the item and for each of the item in this data and creating a new widget and I'm storing this in a list of items that is a list of widgets and after looping through all the data items and setting the state with the new list of items that is stored in this variable right here and the way I'm using this items data is down here in the ListView table filter and here you can see that I'm getting the count from items data at length and for the item builder and returning the items data for that particular index so now let's take a look at adding all those effects that we saw in the demo to this application right here okay so the first thing that we need to do here is we need to close this top container as soon as we scroll up on the list and this top container is this categories scroller right here for this what we need to do is we need to control the scrolling of this ListView and for this we need to pass in controller to this list view filter so here what I'm going to do is I'm going to go up onto my home page state and below the category scroller I'm going to create a new scroll controller and name this controller and put it people to a scroll controller along with this I'll also create a boolean and I'll name this closed top container and give it an initial value of false I'll pass this controller to the ListView builder and now we need to add a listener to this controller so that we can get updates of this ListView as it Scrolls for this I'll move up to the init state function and in this init state after calling the get posts data what I'll do is I'll use the controller and I'll use its function of add listener in this alcohol set state in this I need to set a new value of closed top container and we can either set it to true or false so this closed top container basically tells us whether we should hide this container or we should make it visible so we should hide this container only when the list is scrolled upwards so for this what we can do is we can use the controller and we can get its property of offset in simple words the value of this offset basically increases when we move down the list and when were at the top of the list the value of this offset is zero so what we can do here is we can use this controller offset and if its value is greater than 50 then we can close down the container now what we can do is we can go down in the build function and we can wrap this category scroller with an animated container for this container we need to pass in the value of duration and we'll set that to milliseconds of 200 along with this will also pass in a width for this container so that the width is set to the width of the screen that is by using sine start width and I'll also set in the alignment and I'll set it to alignment top center for closing the container what we can do is we can set the height of this container and here I'll check the value of closed top container and if the value is true we'll have to close this container that means we have to set the height to 0 or else we can set this to another height in this particular case what I'll do is I'll use the size or height property and multiply this by point 30 that means the height of this container is equal to 30% of the height of the screen for making the code more clean what I'll do is I'll cut this from here and instead I'll create a new variable in this build function and here I'll create a new final variable of type double and named this category height and put this equal to size or height multiplied by point 30 and I'll use this category height at this point if I run the app you can see that when I scroll up on the list the top container closes and when I scroll down the container comes back again but there is a bit of an issue that we need to look into for this what I'll do is I'll set the value of milliseconds to mm so that the animation takes a duration of two seconds and now if I scroll down on the list as soon as the animation reaches the text we have this bottom overflow error and this is because this text is not able to fit in the container when the size of the container is decreasing for this what we can do is we can move down to this category scroller and in here you can see that we have this single child scroll view the way to fix this is by wrapping this row with a fitted box and in this fitted box I'll set the value of fit to box fit dot fill along with this i'll set in the alignments and for the alignment i'll set the value of alignments that top center the way this fitted box works is that it tries to fit the content of this row according to this fit in the container that is the parent of this fitted box and for this we have set the alignment to top center so that the top of this row is always fixed to the top of this container that is the parent of fitted box for more details on the fitted box you can check out the link in the description below so at this point if i run the code once again you can see that the container animates nicely and the row is always aligned to the top of the container right here so what we can do is we can move up the code and here i can change the duration of milliseconds to 200 once again one thing that we can also do is we can wrap this animated container with an animated opacity and in this opacity we also need to pass in the duration so i'll copy this duration from the animated container and pass it to the animated opacity also along with this we also need to pass in the opacity value and here we can check if the closed top container is true we can set the opacity to zero or else we can set it to one if I save the app now and scroll up on the list you can see that the container hides smoothly and also it fades away because of the animated opacity that we just added now that we have control over the visibility of this top container the next thing that we need to do is we need to overlap the items of this ListView before this one thing you have to be sure of is that you give equal height to each of the item in this list for example you can see here in the gatepost data I'm setting a height of 150 to each of the item of this list along with this height I'm also giving a margin to each of the item that is 24 horizontal and 10 for vertical so the total height for each of the item is going to be 150 plus 2 times the vertical margin that totals out to be 170 now to give an overlapping effect to the items of the ListView what we need to do is we need to go down to the bill function and to the ListView tot builder here we need to come down to this item builder and we need to wrap this item with an ax language it in the align we have to set the property of height vector and we need to set it to 0.7 what this aligned with does is that it takes the height of this item and it multiplies that by 0.7 and hence it shows only 70 percent area of this item along with the height factor I also need to give this a line a value for alignment for this I'll give it a value of alignment top center as soon as I save the app you can see that items in this list view appear to be stacked on top of each other now the last thing that is left to do is when we scroll on the list we want to detect the topmost item and we want to fake that away so for that what I'll do is I'll go up in the state and here I'll create a new double called top container and set it equal to zero the reason why I'm setting this top container initially to zero is because when we start with the app the first item that is being displayed on the list is that index zero now we need to find a way with which we can find the index of item that is at top of the list when we scroll through the list for that what we can do is we can go down to the init state and here in the listener we can again use the value of controller offset for calculating the item index what we can do is we can create a new double and just name this value and put this equal to controller dot offset divided by the height of each item and this is the reason why I told you to keep the height of each item equal at this point the height of our each item is 170 but we're displaying only 70% of an items area so the resulting height is going to be 119 points so what I'll do here is in the set state I'll set the new value of top container and put this equal to value now with the help of this we'll be able to get the index of topmost item in the list whenever we scroll through the list now to fade away the topmost item what we need to do is we need to go down in the build function to the ListView table filter and in this ListView builder I need to wrap this align with a transform the reason for adding this transform here is because whenever we scroll to the list we want the topmost item to be scaled down and slowly fade away so in this transform I need to pass in the transform property and here I'll add the property value two metrics for identity and using the double dot operator I'll change the scale so for calculating the scale what I'll do is come up in the item builder function and here I'll set the initial value of scale to one point zero and this value is of type double so what I can do is I can pass in the scale value for x that is scale and also I'll pass in the same value for y so basically we'll be scaling down that item by both X and Y axis now we need to alter the value of the scale for each item in the list according to its position on the screen so for that I've written a set of simple conditions which looks something like this so what's happening in these conditions is that whenever the top container reaches that index the scale turns out to be 0 or negative and if the scale turns negative then I set the scale to 0 and if the scale is more than 1 then I set the scale to 1 so if the top container is 1 and the topmost item is also 1 then basically the scale would be 0.5 and so the first item no matter what index it is it will always look like it's going behind the ListView to demonstrate the code I'll run the app once again and if I swipe up on the list you can see that the topmost item scales down and fades away at this point the items are going away from the list but we want the items to stick at the bottom so for that what we need to do is we also need to set the alignment of transform so here I'll add the alignment property and set this to alignment not bottom center now if I save the app and scroll on the list you can see that the items scale down to the bottom along with this what we can do is we can wrap this transform with an opacity and here I'll add the well you for opacity which will also be equal to the scale because as the item scales down we also want to set the opacity of it to zero now if I save the app and swipe up on the list you can see that the topmost item scales down and also fades away with this you can see that all the effects that we wanted to achieve are done and the github link for this project is in the description below so I hope you find this video useful and if you do please make sure to hit the like and subscribe button and also consider supporting me on patreon for more flutter' videos coming your way see you next time peace [Music] you [Music]

Channel: RetroPortal Studio

Views: 157,360

Keywords: flutter, flutter ui, flutter tutorial, google flutter, flutter tutorial for beginners, flutter ui design, flutter animated list, flutter listview, flutter listview builder, flutter listview animation, flutter advanced ui, flutter advanced tutorial, flutter stackeditem listview, flutter app development tutorial, flutter mobile app development, flutter development, flutter ui tutorial, flutter animation, flutter animation tutorial, flutter listview scroll animation

Id: Cn6VCTaHB-k

Length: 13min 18sec (798 seconds)

Published: Mon Jun 01 2020