How to detect when a user stops sliding in carousel_slider in Flutter to make API calls

Question

I'm using the carousel_slider package in Flutter, and I need to optimize API calls that are triggered when a user slides to a new item.

Currently, I use the onPageChanged callback to detect when the user switches between items and trigger an API request to load data for that specific item. However, this leads to multiple API calls when the user slides quickly through several items, overloading the server.

Is there a parameter or method in carousel_slider that indicates when the user stops sliding on a specific item (e.g., if the user slides quickly to item 7 and stops there, I want to trigger the API call only when they have stopped on item 7)? How can I prevent multiple API requests while the user is still scrolling?

I'm looking for a solution that would help me delay the API call until the user has finished sliding and has stopped on an item.

Answer 1

The logic you are describing is called debouncing. To achieve this in your case, follow these steps:

1. Convert your widget into a StatefulWidget (if it isn’t already) and add a Timer? variable in its State class (The Timer class must be imported from the dart:async library):

Timer? _timer;

2. Add debounce logic to your onPageChanged callback to control the API call. This ensures that the API request is delayed until the user has stopped sliding:

onPageChanged: (index, reason) {
  const delay = Duration(seconds: 1); // You can adjust the delay time based on your needs
  
  // Cancel the previous timer if it exists
  _timer?.cancel();
  
  // Start a new timer that will trigger the API call after the delay
  _timer = Timer(
    delay,
    () {
      // Place your API call here
    },
  );
}

3. To avoid memory leaks, cancel the Timer when the widget is disposed:

@override
void dispose() {
  _timer?.cancel(); // Cancel the timer when the widget is removed
  super.dispose();
}