Introduction :

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 :

  • ListWheelScrollView class
  • Properties inside 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

Let’s Start: :

How to implement -:

Image for post

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 and children

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,children we have provided a single decorated container.

Let’s see how our app looks:

Image for post

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 :

Image for post

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.

#dart #mobile-apps #flutter #programming #developer

ListWheelScrollView in Flutter
9.35 GEEK