Flutter Tutorial - Awesome 3D ListView Scrolling | ListWheelScrollView | 3D Rotating Card List

how to scroll items on a 3d rotated wheel in flutter with different types of rotations by using the list wheel scroll view widget if you're new here subscribe to my channel and make sure to watch this video till the end let's start with a list view which is a 2d scrolling list and we want to exchange it with a 3d rotation before we do this you also have within the list view the item extend property which is defining the height of each of your items alright and now instead of the listview widget which scrolls on a plain flat surface we want to use here the list wheel scrollview widget and with this we have now here this rotated scrolling list with the 3d effect it is important to notice that we need to set here this item extend mandatory so the item extend is defining the height of each of our cards right now if we are scrolling here through the list then we can control here every single pixel and we want to change it therefore you can also set here the fixed extend scroll physics and with this if the user stops scrolling then he will always jump to the nearest item possible inside of our list so we cannot control anymore every single pixel next you can change how much your list is rotated with the property perspective and if you set here a really low value inside then our list is flat like the normal list view on the other hand if you put here a higher value inside then our list gets here more rotated like you can see and if i put a real high value inside then we have here now this rotated list pretty similar to this you can also change the 3d effect of your list with this property diameter ratio by default we have a ratio of 2 and if you put a lower value inside then our widgets become here more rotated and if you decrease this value even more then we have here for example this cool cube effect on the other hand if you put here a higher value inside then you will make your list even more flat like you can see next we want to determine the current selected item inside of our list therefore you have the property unselected item changed and here you get then the index of the item that is currently here at the center location and i simply want to print then this index here as a toast message on our screen and with this if you change here this item then you always see here the current selected item inside of this toast message and you can basically do here anything inside what should happen if you have selected another item you also can change the current selected item programmatically to do this you need to add a controller inside of your list wheel and this controller we want to create then here within our state and make sure that it is here this fixed extend scroll controller and lastly we want to initialize it inside of the init state method and secondly we also want to dispose it so that we clean everything again up and now we want to make use of this controller therefore i go back to the ui and here i want to create a floating action button and if we click on this floating action button then we want to go here to the next item in our list therefore if we press on our floating action button we simply called on our controller the animate to item method and the inside you need to put then the index of the next item inside where you want to go therefore let's create here the next index where we want to jump to and therefore you can use here first of all the controller to get the current selected item and in my case i want to go then to the next item and since we animate to the next item you also need to define here the duration how long this animation should last so in this case one second and you also need to define here a curve for this animation and with this if we click on this floating action button then he will animate to the next item every time next we want to look at more properties inside of our list wheel therefore you have the property squeeze and by default it has a value of one and if you set a higher value inside then the items become here more closely together like you can see on the other hand if you put here a lower value inside than 1.0 then we have here more space between our items next you can also change the angle of your rotated list so if you put here a positive value inside then it is here to the left side and if you put here a negative value inside then we have here this scrolling list to the right side for the next property we want to change our item extent to allow our value and with this each of our items has here a smaller height and now you can create a magnifying glass effect for the current selected item therefore we want to use here these both properties and with this we have this magnifying glass effect for the current selected item and if you provide here with the magnification a higher value than one then our item which is here in the center is scaled up and zoomed in on the other hand if you put here a lower value is inside than 1.0 then your item will be here zoomed out and with this we have now here decrease the height of this item and lastly and importantly you have here within this list wheel also a constructor use delegate and this constructor is pretty similar to the list view constructor builder so instead of using here then the children property you can simply use here this child delegate and with this we have here a builder where you can set the item count and then you can also use here this builder with the index to build each individual card and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music]

Channel: HeyFlutter․com

Views: 25,165

Keywords: 3d cube, 3d list, 3d list flutter, 3d listview scrolling, 3d rotating card list, android, dart, flutter, flutter 3d, flutter 3d listview, flutter list scroll, flutter listview, flutter scrollview, flutter ui, how to make a list, ios, list view flutter, list wheel scroll view flutter, listview, listwheelscrollview, listwheelscrollview flutter, make a list in your app, programming, render your list, scroll view flutter, scroll wheel, widgets

Id: wnTYKJEJ7f4

Length: 6min 32sec (392 seconds)

Published: Wed Sep 22 2021