I'm trying to create a slot-machine-like behaviour with ListWheelScrollView.useDelegate() method. Here's what I have so far:
final FixedExtentScrollController _controller = FixedExtentScrollController();
...
ListWheelScrollView.useDelegate(
controller: _controller,
physics: NeverScrollableScrollPhysics(), // user will be unable to scroll manually
itemExtent: 50,
childDelegate: ListWheelChildLoopingListDelegate(
children: model.allToppings
.map(
(topping) => Container(
color: Color.fromRGBO(0, 0, 0, 0.5),
height: 50,
width: 50,
child: Image.asset(topping.image),
),
)
.toList(),
),
),
and I have a "Spin" button that when hit, scrolls the ListWheelScrollView programmatically to a randomized item.
void userClickedSpin() {
final Random random = new Random();
final int randomIndex = random.nextInt(allToppings.length);
controller.animateToItem(
randomIndex,
duration: Duration(milliseconds: 300),
curve: Curves.fastOutSlowIn,
);
}
The problem with this is that the animateToItem method scrolls in both directions when I want a behavior like those of slot machines where they only spin in one direction. How can one achieve this?
Any input is appreciated. Thank you!