ScrollController how can I detect Scroll start, stop and scrolling?

Question

I'm using a ScrollController for a SingleChildScrollView widget where I want to detect scroll start, scroll end/stop and still scrolling.

How can I detect this?

I'm using Listener

    scrollController = ScrollController()
          ..addListener(() {
            scrollOffset = _scrollController.offset;
          });

Also try with _scrollController.position.activity.velocity but didn't help me.

Also there are

    _scrollController.position.didEndScroll();
    _scrollController.position.didStartScroll();

But how can I use it?

score 52 · Accepted Answer · answered May 10 '19 at 07:26

From this link https://medium.com/@diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac

Just Wrap your SingleChildScrollView to NotificationListener and update your code like ..

NotificationListener<ScrollNotification>(
                onNotification: (scrollNotification) {
                  if (scrollNotification is ScrollStartNotification) {
                    _onStartScroll(scrollNotification.metrics);
                  } else if (scrollNotification is ScrollUpdateNotification) {
                    _onUpdateScroll(scrollNotification.metrics);
                  } else if (scrollNotification is ScrollEndNotification) {
                    _onEndScroll(scrollNotification.metrics);
                  }
                },
                child: SingleChildScrollView(
                /// YOUR OWN CODE HERE
               )
)

And just declare method like

_onStartScroll(ScrollMetrics metrics) {
    print("Scroll Start");
  }

  _onUpdateScroll(ScrollMetrics metrics) {
    print("Scroll Update");
  }

  _onEndScroll(ScrollMetrics metrics) {
    print("Scroll End");
  }

You will be notify by particular method.

This does not work right now due to an open issue here: https://github.com/flutter/flutter/issues/44732 — ANDYNVT, Sep 23 '21 at 08:46

score 47 · Answer 2 · answered Aug 31 '20 at 16:56

47

No need for NotificationListener, we can use solely scroll controller for this.

First, register a post-frame callback by using WidgetsBinding.instance.addPostFrameCallback to make sure that the scroll controller by that time has already associated with a scroll view. We will setup listener in that callback.

For listening to scrolling update we can use scrollController.addListener.

For listening to start and stop scrolling we can use bgScrollCtrl.position.isScrollingNotifier.addListener. You can check the code below:

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollCtrl.addListener(() { 
        print('scrolling');
      });
      scrollCtrl.position.isScrollingNotifier.addListener(() { 
        if(!scrollCtrl.position.isScrollingNotifier.value) {
          print('scroll is stopped');
        } else {
          print('scroll is started');
        }
      });
    });

answered Aug 31 '20 at 16:56

The Vinh Luong

913
9
14

2

Way better approach than the accepted answer. Thanks. – Ashkan Sarlak Dec 05 '21 at 19:01
Is it appropriate to add notification in `addPostFrameCallback`? – Henson Fang May 05 '22 at 13:54
@HensonFang I don't see any problem with that. I forgot to mention that we should call `addPostFrameCallback ` in stateful's `initState` callback to make sure scroll listener will be registered one-time only. – The Vinh Luong May 05 '22 at 14:10
I think this answer must be accepted because it really answers the question – Konstantin Oct 01 '22 at 17:09

score 4 · Answer 3 · answered Jan 22 '20 at 08:40

NotificationListner not work for me because i animate scrollview. When i touch it ScrollEndNotification is called.

So to detect scrollview reach bottom or top. I added Listner to scrollcontroller.

  _scrollController.addListener(_scrollListener);

  _scrollListener() {
    if (_scrollController.offset >= _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
    if (_scrollController.offset <= _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

This is the end of the scrolling list. Not End scroll action — ANDYNVT, Sep 23 '21 at 08:49

score 3 · Answer 4 · answered May 10 '19 at 06:18

3

_scrollController.position.pixels

if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
//scroll end
}

to use these, you should add a listener to your scrollview

answered May 10 '19 at 06:18

Murat Aslan

1,446
9
21

Thanks but I wand to detect scroll start and stop. You any only detect end of the scroll. That my mistake let me update the question – Govaadiyo May 10 '19 at 06:23
you can use position.pixels for it – Murat Aslan May 10 '19 at 06:24
How can you give me expample – Govaadiyo May 10 '19 at 06:24
if position.pixels greater than minScrollExtent then scroll starts – Murat Aslan May 10 '19 at 06:27
This is what I want, Short and precise. Thanks for the sharing! :) – Rajan May 11 '21 at 14:09
This is the end of the scrolling list. Not End scroll action – ANDYNVT Sep 23 '21 at 08:49

score 2 · Answer 5 · edited Aug 12 '21 at 13:32

2

You can use _scrollController.position.pixels for getting scroll position and addlistener to be notified about changes

if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
//for scroll end
}

if(_scrollController.position.pixels == _scrollController.position.minScrollExtent){
//for scroll at top
}

edited Aug 12 '21 at 13:32

Stanley

801
2
10
20

answered Aug 11 '21 at 11:28

K_Chandio

558
1
7
16

score 0 · Answer 6 · answered Feb 02 '22 at 00:38

There's a package for this use case. scroll_edge_listener

You can detect either the start or the end of the scroll with a few configurations such as offset and debounce. Just wrap your scroll view with the ScrollEdgeListener and attach a listener.

ScrollEdgeListener(
  edge: ScrollEdge.end,
  edgeOffset: 400,
  continuous: false,
  debounce: const Duration(milliseconds: 500),
  dispatch: true,
  listener: () {
    debugPrint('listener called');
  },
  child: ListView(
    children: const [
      Placeholder(),
      Placeholder(),
      Placeholder(),
      Placeholder(),
    ],
  ),
),

ScrollController how can I detect Scroll start, stop and scrolling?

6 Answers6

Linked