Search code examples
flutterlistview

How to add specific actions to ListView when user drags to its start or end (when the curvy blue lines appear)?


I'm curious is there an easy way to add such functionality to my Flutter ListViews? For example, I would like to trigger some animation on another widget when the user drags "over the edge" on the ListView with all of it's items scrolled to the top or bottom, that is when the curvy blue line indicating that we're at the end of the list appears. It obviously has an event firing up to show those lines anyway.


Solution

  • It's not hard actually, you can use a custom ScrollController with a listener:

    declare it, then in initState put:

    _myController = ScrollController();
    _myController.addListener(_myScrollListener);
    

    and the function itself can be something like this:

    _myScrollListener(){
    if (_myController.offset >= _controller.position.maxScrollExtent && !_myController.position.outOfRange) {
      print("List end");
    }
    if (_myController.offset <= _controller.position.minScrollExtent && !_myController.position.outOfRange) {
      print("List top");
    }
    

    Use the controller with your ListView, add what you need to the listener.