📱⌚️MODERN WHEEL SCROLL • Flutter Tutorial

[Music] hey what up guys welcome back to another quick flutter tutorial recently i've been loving this wheel scroll widget that makes your app look a little more modern this is a widget that can be used for any situation where the user needs to select something from a list and so a good example is when we need to pick a time it's actually quite simple to use so let me show you how this works by jumping into the code open up a brand new flutter project and let's delete everything below the main function so that we can create this from scratch so let's do the usual setting up in the material app let's go to our home page and the home page i'm going to make in a separate file and this one's going to be a stateful widget and inside we'll just have a blank scaffold and so now in the body of the scaffold the widget we're going to use is called list wheel scroll view i'll show you the basic version first and then i'll show you how we can use a builder for this as well so first of all you can see the item extent and what this one is is basically just the height of each tile so for now i'm just going to say 50 and for the children this is just the items that we're going to display in the list so i'm just going to create a container here and inside let's just create a basic text widget saying hello and so we can manually create a few more of these just to see exactly where this container is filling up i'm just going to give it a color and let's actually center these text widgets okay cool and so now we should be able to see what this item extent actually does so if i change it to 100 it just changes the height of the tile to 100 pixels and you can change it to a smaller number but for us let's just leave it as 50. now to see the scroll wheel in effect we're going to need a bunch more children so if i just copy all of these and create more you can now see the wheel effect and so i just want to quickly show you a couple of properties that we can play around with so there's two big ones the first one is perspective and if you hover over it you can see exactly what it does it says perspective of the cylindrical projection now the best way to understand what that actually means is to just play around with the numbers so you can see that it says the default is 0.003 and it also tells you the range of numbers that we can select so it says 0 to 0.01 right so let's just pick a small number here so 0.005 that's what that looks like and if i go to a bigger number 0.01 you can see the change in perspective so that's what that property does the other one you can control here is the diameter ratio which the definition here says the ratio between the diameter of the cylinder and the viewport's size in the main axis again just to illustrate what that actually means looks like the default is two so let's just play around with some of these numbers what if i say one you can see the cylinder became a lot more tighter there and if i change to 1.5 as opposed to 2 and the bigger the number you can see the way it behaves so play around with these numbers to get a good feel of what they're actually controlling now when we're displaying a lot of children here like for example in our time that we're trying to display it's going to be impractical for us to create the children manually like this right so there's always going to be a build-up method to all of these lists so first of all let's just grab one of these containers that we just created and separate it out into a file which let's just call it tile dot dot and we can call it my tile and so now we can get rid of all of these children and in the list wheel scroll view we want to use the delegate and so the item extent let's just leave it as 50 as we did before and for the child delegate here this is where the build is going to be useful so we can specify the child count so i just want to have 10 of them and let's build my tile so this accomplishes the same thing as what we had before but it's a bit more programmatically practical so we can just change this child count to display however many we want cool so far so good so now that we understand the basics of how this wheel scroll works let me just finish off by showing you how you would go about creating the time picker so i'm just going to create a couple files here so hours dot dot and minutes dot dot and starting with the minutes let's just call it my minutes and i'm going to create a similar container here and instead of returning my tile i want to return my minutes now let's switch up the colors a bit i want to make it a darker background and the text white now we want to be able to pass through the information of the minutes so whatever the current minutes is let's just print that so if i come back to my home page you can see in the my minutes it's got a red squiggle underneath because we need to fill out now the minutes i just want to display from 0 to 59 so that's just the index but i want to display 60 of these awesome and let's just fill out the perspective and the diameter ratios i'm just going to use the numbers that i like and the other important property i forgot to show you is the in the physics you probably want this one so the fixed extent scroll physics what this does is it makes sure that it always lands on a number so if you don't have this you're just scrolling through it continuously but if you have this physics property on then it's always going to land on a number so that's useful now let's copy our minutes code and copy it into the hours and just change everything into hours and what we're going to do is we're going to display two of these list wheels so i'm going to have to wrap this in a row because i want it side by side and just copy another list wheel and with a lot of these builders we need to specify the space for it to occupy in so you can use expanded we just to split it up to fill up the rest of the space but that looks a bit too far away from each other so actually let's just give it a container and give it a fixed width and let's align this to the center and if you want to space them out i recommend using a sized box like this awesome and for the hours we want to have 12 hours actually that's 0 to 11 so we actually need 13 numbers and so far it's looking good now one extra thing i just want to make this look a little prettier is in the minutes if the minutes is less than 10. let's add an extra zero to the front so in other words if it's a single digit number i just want to have an extra extra zero at the front of it makes it a little bit more nice and digital and for the am and pm it's all very similar except for the fact that it's only two options right either am or pm so i'm just gonna use a bully in here is it am if it is then show am if it's not show pm and so just to quickly explain this code again so for the child count it's just 2 am or pm meaning if the index is 0 the first one then just show the am otherwise let's show the pm awesome so if i save this you can now see we have these three wheels cool so that's the ui part of it now in order to access these actual numbers a couple ways we could do it so you can see here there's a unselected item change method here and it gives you a integer so it gives you the value where if i just do a quick print statement just to show you anytime you change the value on the hours you can see it printing it out there so that's how you can access that number so let's say for example you have another integer just called current hour and any time that the user scrolls this wheel you can update the current hour value to the new one so that's one way you can access this number another way is to use a controller so you want to use a fixed extent scroll controller and initialize it and give the controller to the list wheel so we've got three wheels here so you're going to need three separate controllers in this case so i'll leave it at that for this video hopefully you learned something and understood how to use these wheel scrolls play around with it and let me know if you have any issues but other than that thanks for watching and i'll catch you guys in the next one later [Music] you

Channel: Mitch Koko

Views: 21,073

Keywords:

Id: KKDNNXEPhgc

Length: 9min 38sec (578 seconds)

Published: Mon Dec 20 2021