Fancy Scroll using sliver widget in flutter | Flutter Scroll Animations | Sliver scroll animations

foreign [Music] app all right question have you ever wondered how to achieve fancy Scrolls within your flutter app if so then this video is just for you with the help of one of the popular widgets yet minimally used in the development process known as slaver widget we will be able to achieve fancy scores within our flat wrap with the help of the slaver widget we'll be able to provide more custom driven yet more intuitive way of defining the Scrolls in our photograph say for example what we have here is a simple demo tutorial which I have created with the help of the sleavers and if you pay attention you will notice that if I try to scroll the page you see that the image which is placed is the very top actually slides below white container and and the list view just slides below it right and the same way if I try to scroll after reaching the very top you see that the image which is placed at the top gets zoomed in just to indicate the user that we have actually reached the very top and there is nothing to show up after that just to denote that we have more intuitive way of a zoom in option we can also have a blur kind of option as well but in this video I have made use of Zoom okay so these kinds of UI you will be able to see in most of the popular apps nowadays and in this video we will try to replicate the same kind of style with the help of slavers in Alpha traps therefore with that wasting time let's directly jump in the coding part and start implementing this sliver widget inertia app all right for starting with the main.f file where we have made use of generated routes and the initial route points to my home page and here in my home page we have a stateless widget class that is going to make yourself custom scroll view okay only with the help of custom scroll we will be able to implement the sleavers and it is going to take a list of slavers the first slaver is going to be the app bar that is the image what we have right over here at the very top and secondly we have the search bar that is the search bar what we have um next below the app bar okay and finally the third component is going to be the list view Builder Okay so totally three basic components what we have as a sleavers inside the custom scroll view now let's start implementing this individual components one after the other now we have the scaffold and let's say the body will be having the custom scroll view as we have discussed earlier and the custom scroll view is going to take a list of slavers the first slaver is going to be the sliver app bar and this lever wrapper will be going to have a list of parameters if you can see here as you hover over that widget to be able to see a list of um optional as well as required parameters you can just play around with say for example with the help of the slaver app bar you'll be able to either make the widget pinned at the top while scrolling or you can also have it as a floating one or you can also provide the values for the stretch which is going to have some kind of stretching animation which we saw earlier and all those things we have inside this lever app bar okay so let's start with the basic set of parameters and provide them with the specific values first is going to be the background color which I have stated as the scaffold background color so I am not going to specify any color specifically for this sleeve wrapper it is going to take the color which is half full color and I'm going to set the elevation as 0 just don't want any shadow kind of thing right over the sleever so I will be setting that elevation as 0 and this lever app bar is going to be pinned at the top so it is not going to disappear up on scroll so I want that to be pinned let me just provide the Boolean variable as true just like a center tile I want that is false and expanded height is nothing but the total height you want that sleever to be covering up during the initial stage I have provided it as 300 pixels you can just provide any value you want and finally we have the flexible space and within the flexible spacebar for the background parameter I will be providing the relative part of the asset image okay now if I hard restart you'll be able to see that the image so this is the image actually that is going to take around 300 pixel and this is going to be pinned at the top it don't disappear up on scroll okay so this is going to be the first component what we have inside this labor list okay the next thing which we need to implement is the search bar okay so let us start with that all right now we'll start with the search bar below the sliver app bar which we have defined earlier I will be just providing the search bar widget which is again going to be a sliver app bar and the same way it is going to take the background color as the scaffold color and it is going to have the pinned value as a true for the flexible space I'll be providing it with the search bar so the search bar is going to be a custom defined class that is um going to hold all the Styles and all those things that the search Board needs okay so I am not going to discuss that for this tutorial which is actually not needed right now so basically we have implemented those lever wrappers one is going to be the sliver corresponds to this image and the second slaver it is going to correspond to the search bar okay and provide with the specific values for the parameters like a pinned elevation background color so on so forth so now we have successfully defined two components and the final thing is going to be the list view okay so let's start with that now for the list view we are going to make use of the slaver list this is going to help us Implement that list View and it is going to take the delegates and let me provide the child count as 20 that is basically 20 children is going to be inside the slaver list and these children nothing but a set of a predefined containers with the defined colors okay so nothing much if I heart restart you'll be able to see that I have almost achieved the desired kind of scrolling which we actually thought of implementing but the only thing which is left over is that I think keep scrolling to the top this image which is placed at the sliver app bar it's not going it's not expanding or not zooming in to provide a relative kind of information regarding the scroll so for that you need to make use of a parameter called stretch and by default it is set as false let me just set it is just true and now if you try to scroll to the top you see that the image is actually getting Zoomed In which is kind of a more intuitive way of defining the users about the scroll all right and there are um certain kinds of stretch modes you can actually provide with the list of stretch modes before you'll be able to see that by default we have this Zoom background that is the reason we will be able to have this kind of zooming option also scroll to the top you can also edit that give it as blur background which means that as the name suggests if you scroll if you scroll it is going to blood the background of that um app bar widget right see if you scroll that it is going to uh blur that widget contents right so this is how you'll be able to provide a more custom driven scroll animations with the help of slaver widgets and flutter hope you guys found this tutorial useful if you do so consider subscribing and I will see you in the next one bye [Music] foreign [Music]

Channel: vijaycreations

Views: 19,751

Keywords: flutter, app, flutter apps, app icons, icons, flutter package, app icon, icon, scrolls, fancy scrolls in flutter, scroll animations in flutter, flutter scroll animation using sliver widget, sliver widget, slivers, sliver animations, scroll animations, scrolls in flutter, flutter scroll animations, sliver app bar, sliver list, list view, elastic scroll view, elastic scroll animation, scroll controller and animations, flutter sliver widget, flutter widgets, widgets, sliver app bars

Id: NkOXry6jbTQ

Length: 7min 42sec (462 seconds)

Published: Sat Dec 03 2022