Flutter: Looping Infinite Scroll

ListWheelScrollView

If you want to create an infinite scroll that loops over the same values, ListWheelScrollView.useDelegate() is the way to go.

It took me about half a day to figure it out after playing with ListWheelScrollView. Here is a sample of how I implemented ListWheelScrollView.useDelegate() in my calendar app.

Infinite Looping Scroll (for hours)

Here are a few things you need to know:

1. You need to use ListWheelScrollView.useDelegate() because that will allow you to use ListWheelChildLoopingDelegate.
2. physics should be set to FixedExtentScrollPhysics() (which can only be used with ListWheelScrollView()). You can also set the initial item of the scroll (= index of your list)

ScrollController _ct = FixedExtentScrollController(initialItem: 6);

3. You can use onSelectedItemChanged to execute methods each time it changes. In my code, I use it for two things: (a) to change the hour shown above the infinite scroll, and (b) to change the AM/PM depending on how the hour was changed.

4. …that’s it! Nothing more as long as your list contains all the values you need.

FYI, I only use one scroll loop for both start and end. I change the list depending on whether start is expanded or end is expanded.

code to change the list

And to make sure that start time < end time, I continuously check the time against each other, and also change the AM and PM. Here’s a sample code.