Flutter: Infinite Looping Scroll

역시나 제 medium 글을 복사해왔지만 누군가엔 도움이 될 것 같아서 벨로그에도 포스팅합니다.

동작 동영상

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.

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.

필요한 widget을 알게되니 생각보다 쉬웠습니다.

참고로 저는 저 스크롤할 리스트들을 한개씩만 해놓고, start를 열었는지, end를 열었는지에 따라 리스트가 자동으로 바뀝니다.

그리고 시작시간이 끝 시간보다 늦으면 안되니, 확인하면서 시간시작과 끝 시간을 조정하고, AM PM도 바뀝니다. 예제로 아래 코드가 있습니다.