Using Tab and Scroll Controllers and The Nested Scroll View in Dart's Flutter Framework

Key Takeaways

hey guys my name is tensor welcome to another flutter tutorial today we're going to be talking about controllers specifically we're going to look at the tab controller the scroll controller and we also want to look at a widget called the nested scroll view this tutorial is going to be fairly UIC Centric so let's just build out the basic scaffold for this application first and then we will start to talk about the various different functionalities that we get with these controllers for the boiler plate we have our material app then we have this stateful widget here which builds out an empty scaffold generally when you want to use tabs inside of your application you wrap your scaffold in a default tab controller you specify the length for both of the tabs so in this case we have two tabs so length will be two then you put your scaffold in here and you have your app bar you can have a bottom here with the tab bar widget inside of it and in here you define the actual tab icons and stuff at the top of the page and then for the body you wrap your two pages in a tab bar view so that you can tab between the pages using the buttons at the top for this example I also brought in all of the wallpapers that we were using in the last tutorial so that we could fill out the actual Pages for our application so down here we have page one which just builds out assets photo wallpaper 1. jpeg with a width of 300 and then we have page two which also builds out an asset this time it builds out wallpaper 2. jpeg with width of 300 here you can see our application it's fairly basic we've got our two tabs each one has an icon and then text underneath of it and we can tab between the two pages fairly seamlessly this is a perfectly acceptable way of creating a tab based application however if you want to have more flexibility and you want to have more functionality there is a different way to go about doing this so for now I'm just going to comment out all of this stuff up here and then we'll just work with our scaffold like this and build out a new sort of dynamic tab system now before we continue building out our user interface we want to do a few things at the top of our state class we need to bring in the single ticker provider State mix in so that we can animate our scroll controller and tab controller and we also want to instantiate a tab controller and a scroll controller so at the top here I'll create the tab controller and the scroll controller and then we will override in its state here and I will set up the tab controller by instantiating tab controller adding in a vsync tag so we want this tab controller to be synced to the frame rate of the screen and then we want to specify the amount of tabs that we're going to have in this tab controller which will be two for the scroll controller we just need to instantiate a scroll controller at least for now there are a few other options that we can add to it and we'll go through those in a bit with most controllers inside of floter you also want to override the dispose function and make sure to properly dispose of the controllers when the state or the widget that you're building them in goes out of scope so here we just override dispose we put in tab controller. dispose and then scroll view controller. dispose and this will properly dispose of our controllers and then if a new state object comes into scope it will then instantiate a new set of controllers for us all right so now let's go down into the scaffold down here and let's start building out this new page down inside of this scaffold we'll create what's called a nested scroll view this will allow us to have a a few different scroll views inside of this scroll view we need to give this a controller so we'll attach our scroll view controller to it this nested scroll view also has a property called header sliver Builder this allows us to build the header for this nested scroll view so in our case it will be our quote unquote app bar the callback for this property takes in the build context and then it takes in a Boolean which basically asks the question of whether or not we have scrolled up or down for this header sliver Builder we want to return a list of widgets so this is a builder that actually creates a list of widgets rather than just a single widget and because we want an app bar we'll put a sliver app bar inside of this so since we're working with slivers we want to stay with slivers for the most part so we're going to use the sliver app bar rather than just the normal app bar inside of our sliver app bar I'm going to put in it title and then I'll put pinned and floated to true and then I'll put Force elevated to box is scrolled so this is the Boolean that changes based on whether or not we've scrolled up or down then at the bottom of this sliver app bar we'll build out another tab bar and in fact for this tab bar widget we'll just build it out like we did before so we have our first tab for home and then our second tab for example page the major difference here however is is that we're going to Define our controller in here so tab bar has a property called controller and we can push in our tab controller so that we don't have to define the default tab controller and then wrap this widget inside of it the nested scroll view also has a body property so we're making the body for our nested scroll view after we create the top of it which is our sliver app bar and for this body we want to of course create our tab bar view like we did before and still put in our children but we also want to put in the controller as well so the tab bar view takes in a controller just as the tab bar widget does and we want these two controllers to match in this case now there will be some cases where you might want two separate controllers for these widgets but for the most part those are fairly neat examples all right so now let's look at our application so you can see here it looks a lot like what we had before we can tab between the two pages still but now we can also scroll up and down inside of our application and you can see here as we scroll up the actual sliver app bar disappears and we can do this with both of our pages so if I scroll up on the example page and then go to the homepage it still stays scrolled so this is pretty useful if you want to have some kind of functionality here maybe when you scroll up you have like a bar that pops up here that allows you to do other things something like that could be fairly useful in certain types of applications now let's come down and restructure our pages so for page one what I'm going to do is create a center put in a column and then in the column we'll put in our three different photos and we'll make it so that the widths of these photos are of 200 pixels and size so that they can all fit on the page for page two I'm actually going to borrow a piece of code from a previous tutorial this is the code to create an infinite list view so you can see here we have our list view Builder we Define the item extent at 250 pixels and then we have our item Builder which builds out a container it has some padding and then inside of our containers we have material with some elevation and a border radius and then the color for each of our materials rotates based on the number of the index if the index is even then we have cyan and if the index is odd then we have orange and then inside of it we'll create a center put in the text and then we can specify the actual index as a string so that we can see what index each of the tiles is so this will allow us to scroll this list infinitely and in the example that we used this code in we had a friction list list view this time however we do not have those scroll physics inside of this example so first let's take a look at page number one so here are some fairly interesting things to note about the way this page works if we scroll up you can see that the space between the photogaphs actually gets larger that's because we're using this main axis alignment space evenly for the column if we change it to space around you can see when I scroll up this one almost stays still and the other one ones sort of raise up further than they did before and then for space between this one does stay in place whereas the other ones go further up the actual scroll axis we can of course change this to Center end or start and then it will combine all of the images like this and make it so that they have a consistent amount of space between one another this type of behavior could be fairly useful for very specific user interfaces and it's something to keep in mind if we come over to our example page or page two we've got our infinite scroll here and as we scroll up it you can see that the app bar shrinks as it normally would and then we can continue to scroll all the way down and when we go in the opposite direction the app bar doesn't appear until we hit the end of the list here now that we've set up our user interface and we've set up the controllers let's create a floating action button which will allow us to manipulate the controllers so here we'll just make our loing action button with icons icons control point and then the onpressed will call to our controllers these controllers have fairly interesting properties attached to them so for instance with our tab controller we can call this animate tube method we can specify which tab we want to animate to in this case I've chosen tab one and then we need to specify the curve that this animation should follow and I've chosen this curves Bal in and out and then a duration that it should take for the animation to complete if we go back into our application and I click the floating action button you'll see that it will automatically move over to the second page and that's because our tab index is zero indexed so tab number one is actually page number two if we're already on page two and we click the button nothing will happen but if we go back to home and then we click the button you can see here here that it will navigate over to example page and we can slow it down considerably I've put it at 10 seconds here and you can see that when I click the button this white thing doesn't get all the way over here until those 10 seconds have elapsed the scroll view controller also has an animate 2 method that we can call like with the tab controller animate 2 function we want to specify a double offset and this is the position that we want the scroll controller to actually scroll to when we click this button the scroll controller comes with some specific properties that we can use in this case we can use the max scroll offset and we can use the Min scroll offset so the max scroll offset is how far the scroll controller can go and then the Min scroll offset is where it starts from then we need to set up the duration like we did with the tab controller animate 2 and then we want to set up the curve as well so if we start started home and I clicked the button you can see that it actually tabs over to example and it Scrolls up so that the actual sver app bar disappears completely and if I'm just on example page and I hit the button you'll see it just Scrolls up and removes the sliver app bar so that's the max scroll extent of our scroll view controller in this case the app bar starts from here and comes down to about here and that's where the actual scroll view is located ated in this case so even though this body here also Scrolls it is not controlled by this particular scroll controller now imagine if I scroll the list down quite a bit say to 27 and then I change this so that we can scroll back to the Min scroll extent rather than the max scroll extent if I hit the button you'll see that the actual list will scroll all the way down before the app bar comes down and this is because this scroll view up here can't scroll down until this list here has hit its end so even though this scroll controller doesn't control the second Page's scroll view it still needs to have it scroll up before it can scroll up the scroll view that it does control if we come back up to our init State function we can also Define where we want our scroll controller to start from and in here we can define a double so I've put in 300 pixels and if we look in our application you can see that it actually starts scrolled up so say you wanted to have the app bar automatically scrolled for whatever reason you could do it this way if we want to we can actually expand the height of the sliver app bar by specifying the expanded height for it so I've put in 500.0 pixels and you can see the app bar now takes up almost all of the screen and it still Scrolls up like like it normally would except it has to scroll up a larger distance we can make this expanded height fairly large you can see here I put in 20,000 pixels and there's no overflow so if we reset our initial scroll offset to 0.0 and then reload the application you can see that the actual app bar starts completely extended if we come down to where we have this animate 2 method we can make it so that it will scroll to the max scroll extent and then when we hit the button here it will scroll all the way up within a second because that's the duration that we've set up so it's scrolled 20,000 pixels in a second if we don't want to use the anime 2 function and we don't want an animation we can use the jump to function so we put in our scroll controller here and then we can put in Jump two this just takes in a double and I'm just putting in the Min scroll extent so here if I push up the app bar and then I click the button here it will automatically and instantaneously extend everything out and if I make the expanded height say 2,000 pixels and just click the button you'll see that it's literally instantaneous so this is pretty cool so interestingly enough the tab controller does not have a jump to Method like the scroll controller and even if we go and we decrease the duration on the anime 2 function it will hit a soft cap the tab controller can only go so fast from one tab to the next so for instance in here we're on the homepage and if I click the button you can see that is the actual fastest speed that the tab controller will animate this tab in so it won't go any faster than this unless we go in and override the tab ourselves and customize it all right guys well I hope you enjoyed this tutorial if you did feel free to like And subscribe if you have any questions or comments free to leave them in the box below and if you dislike the tutorial then by all means download it as much as you like have a good night