Parallel Timer animation in flutter

Question

I made an automatic scrolling bar in flutter, the way I made it scroll automatically by using a combination of a timer and scroll controller, and then I linked the scroll controller to a regular ListView.builder, blew is the implementation of my way to do it

  @override
  void initState() {
    super.initState();
    int _length = widget.items.length;
    currentItems = widget.items;

    // scroll smothly to the end of the list then reverse the scroll
    bool isAscending = true;
    _timer = Timer.periodic(const Duration(milliseconds: 3000), (timer) {
      if (isAscending) {
        _currentIndex++;
        if (_currentIndex == currentItems.length) {
          isAscending = !isAscending;
        }
      }
      if (!isAscending) {
        _currentIndex--;
        if (_currentIndex == 0) {
          isAscending = !isAscending;
        }
      }
      _scrollController.animateTo(_currentIndex * 304.0,
          duration: const Duration(milliseconds: 3000), curve: Curves.linear);
    });
  }

my problem here is when I navigate to another screen or press the phone's home button and stay away from this widget for a while and then come back, I'd find it scrolling so fast to catch the currentIndex ( which is far away from where I left it ) in a period of time that I specified for the .animateTo method, I'm guessing the solution is to somehow pause the timer when I'm not in the same route, but I didn't find any reference of how to implement that

Parallel Timer animation in flutter

0 Answers0