How to check if scroll position is at top or bottom in ListView?

Question

I'm trying to implement a infinite scroll functionality.

I tried using a ListView inside on a NotificationListener to detect scroll events, but I can't see an event that says if the scroll has reached the bottom of the view.

Which would be the best way to achieve this?

Answer 1

There are generally two ways of doing it.

1. Using ScrollController

// Create a variable final _controller = ScrollController();    @override void initState() {   super.initState();      // Setup the listener.   _controller.addListener(() {     if (_controller.position.atEdge) {       bool isTop = _controller.position.pixels == 0;       if (isTop) {         print('At the top');       } else {         print('At the bottom');       }     }   }); } 

Usage:

ListView(controller: _controller) // Assign the controller. 

---

2. Using NotificationListener

NotificationListener<ScrollEndNotification>(   onNotification: (scrollEnd) {     final metrics = scrollEnd.metrics;     if (metrics.atEdge) {       bool isTop = metrics.pixels == 0;       if (isTop) {         print('At the top');       } else {         print('At the bottom');       }     }     return true;   },   child: ListView.builder(     physics: ClampingScrollPhysics(),     itemBuilder: (_, i) => ListTile(title: Text('Item $i')),     itemCount: 20,   ), ) 

Answer 2

You can use a ListView.builder to create a scrolling list with unlimited items. Your itemBuilder will be called as needed when new cells are revealed.

If you want to be notified about scroll events so you can load more data off the network, you can pass a controller argument and use addListener to attach a listener to the ScrollController. The position of the ScrollController can be used to determine whether the scrolling is close to the bottom.