How to trigger lazy loading function before user reaches scrollController.position.maxScrollExtent?

Question

The result I want to achieve, is to trigger a lazy loading function before user reaches scrollController.position.maxScrollExtent, so in that way I will "minimize" the waiting time in the eyes of user.

In my case, I want the lazy loading function to trigger every time users scroll an 80% of the screen

Here is my working code snippet with lazy loading function triggered when user reaches the end of the screen (classic way):

scrollController.addListener(() {
      if (scrollController.position.pixels == scrollController.position.maxScrollExtent) {
        print('bottomReached');        
        // lazy load function 
        }
    });

I tried to change the if statement to this:

scrollController.position.pixels >= scrollController.position.maxScrollExtent*0.8

but it didn't work as expected. What else can I do ? Thanks in advance.

Answer 1

You have to set a delta limit, which checks if the scroll is about to read max extent.

scrollController.addListener(() {
      if (scrollController.position.pixels > scrollController.position.maxScrollExtent*0.8) {
        print('bottomReaching');        
        // lazy load function 
        }
    });

Here it checks if the current pixel is more than the delta value (maxExtent * 0.8) and if true, loads the function.

One more thing to note is that if in delta range, the function will be triggered with change of every pixel. So it is suggested to have a bool variable outside of scrollController.addListener to check if the function is already running.

For reference https://www.youtube.com/watch?v=EXJboDdIpEA

Happy coding!