ListWheelScrollView in Flutter
ListView is basically a collection of non-ending or infinite data generated in form of a list.ListView is a 2-D type of list which creates data linearly.
ListView is a useful widget but sometimes leaves a normal or just a simple effect on our application.
To resolve our issue flutter also provides us with a 3-D type scrolling list type known as ListWheelScrollView.
Table of Content :
:: Properties of ListWheelScrollView class
ListWheelScrollView class :
ListWheelScrollView class is basically a widget that is almost similar to the ListView widget but having additional 3-D effects in a list which makes it more attractive, stylish, and advanced. Normally ListView scrolls linearly in form of a list but ListWheelScrollView scrolls in form of rotation along the axis which makes it look more similar to the motion of the wheel.
When the list is assigned to zero scroll offset, the first child is aligned at the middle or selected part of the 3-D list while when the list is assigned to final scroll offset, then the last child is aligned at the middle or selected part of the 3-D list of a ListWheelScrollView.
Let’s Start
How to implement -:
Here above the code, you can see we have implemented ListWheelScrollView to generate a list in our application. The required property of this widget is itemExtent andchildren.
The itemExtent property is used to adjust the size of each child in the main axis of a list item and it should not be null and must be always a positive value. The other required property is children which are used to define the number of items added to form a list similar to ListView.
In the above code, we have given itemExtent a value of 280 which defines the size of each child. Inside,childrenwe have provided a single decorated container.
Let’s see how our app looks :
As you can see our single container inside the list is assigned in the middle because of ListWheelScrollView. The selected child is displayed in the middle or in front of your screen.
Now we will try to add multiple children inside our application and see how it looks 👀
Demo :
As you can see we have added multiple containers inside the children property of ListWheelScrollView class and it gives a more 3-D view look to our list.
As we have implemented our list in ListWheelScrollView type, now it’s time to see a more interesting property of this widget and try to implement them too.
Properties of a ListWheelScrollView :
- diameterRatio: It is defined as the ratio between the diameter of a cylinder and the viewport’s size in the main axis. It basically defines the diameter of a wheel or a distance from the axis of rotation.
For diameterRatio of a value set as 2, the list looks like :
For diameterRatio of a value set as 4, the list will looks like :
2. useMagnifier: this property is used to define whether to use magnifier at the centre item of our wheel or not. It takes a boolean value of either true or false.
3. magnification: it is used to define how much magnified our centre item should look. We have to provide a numeric value to it.
We have set useMagnifier property as true so it will magnify our centre item and its magnification value is 2. Let’s see how it looks.
4. offAxisFraction: this is basically a viewpoint of a wheel on how the normal wheel looks when you view it through different side angles.
When offAxisFraction is set as 1.5 which is positively valued.
When offAxisFraction is set as -1.5 which is negatively valued.
For more info visit down the link :
ListWheelScrollView class
A box in which children on a wheel can be scrolled. This widget is similar to a ListView but with the restriction that…pub.dev
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think is required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
