50

I'm using ListView widget to show items as a list. In a window three, items viewing must the middle item place in the middle.

So how can I detect position of ListView when scrolling stop?

How to detect ListView Scrolling stopped?

0

8 Answers 8

68

I used NotificationListener that is a widget that listens for notifications bubbling up the tree. Then use ScrollEndNotification, which indicates that scrolling has stopped.

For scroll position I used _scrollController that type is ScrollController.

NotificationListener(
  child: ListView(
    controller: _scrollController,
    children: ...
  ),
  onNotification: (t) {
    if (t is ScrollEndNotification) {
      print(_scrollController.position.pixels);
    }
    //How many pixels scrolled from pervious frame
    print(t.scrollDelta);

    //List scroll position
    print(t.metrics.pixels);
  },
),
4
  • where you place these codes, inside ListView (ui) or at bloc ? Mar 26, 2019 at 7:09
  • child: new NotificationListener( Apr 7, 2019 at 15:03
  • 2
    For users in 2021, there is a shorter way to do so (see my answer) :)
    – ch271828n
    Jan 10, 2021 at 13:15
  • How do I detect a bottom ScrollEndNotification only? May 9, 2022 at 14:03
37

majidfathi69's answer is good, but you don't need to add a controller to the list: (Change ScrollUpdateNotification to ScrollEndNotification when you only want to be notified when scroll ends.)

NotificationListener<ScrollUpdateNotification>(
  child: ListView(
    children: ...
  ),
  onNotification: (notification) {
    //How many pixels scrolled from pervious frame
    print(notification.scrollDelta);

    //List scroll position
    print(notification.metrics.pixels);
  },
),
17

You can also achieve this functionality with the following steps

import 'package:flutter/material.dart';

class YourPage extends StatefulWidget {
  YourPage({Key key}) : super(key: key);

  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {

  ScrollController _scrollController;
  double _scrollPosition;

  _scrollListener() {
    setState(() {
      _scrollPosition = _scrollController.position.pixels;
    });
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Position $_scrollPosition pixels'),
      ),
      body: Container(
        child: ListView.builder(
          controller: _scrollController,
          itemCount: 200,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Icon(Icons.mood),
              title: Text('Item: $index'),
            );
          },
        ),
      ),
    );
  }
}

enter image description here

16

The NotificationListener now accepts a type argument which makes the code shorter :)

NotificationListener<ScrollEndNotification>(
  child: ListView(
    controller: _scrollController,
    children: ...
  ),
  onNotification: (notification) {
    print(_scrollController.position.pixels);
    // Return true to cancel the notification bubbling. Return false (or null) to
    // allow the notification to continue to be dispatched to further ancestors.
    return true;
  },
),
1
  • 2
    With NotificationListener<ScrollEndNotification>, i believe you no longer need _scrollController for other than printing the pixel. Sep 30, 2021 at 9:03
6

If you want to detect the scroll position of your ListView, you can simply use this;

Scrollable.of(context).position.pixels

1
  • How to detect ListView Scrolling stopped? Jan 7, 2019 at 7:08
4

In addition to @seddiq-sorush answer, you can compare the current position to _scrollController.position.maxScrollExtent and see if the list is at the bottom

3

https://coflutter.com/flutter-check-if-the-listview-reaches-the-top-or-the-bottom/ Source

If some want to Detect the bottom of a listview then use this way

NotificationListener<ScrollNotification>(
 onNotification: (ScrollNotification notification) {
 if (notification.metrics.atEdge) {
    if (notification.metrics.pixels == 0) {
      print('At top');
    } else {
      print('At bottom');
    }
}
return true;
},
child: ListView.builder(itemBuilder: (BuildContext context) {
  return YourItemWidget;
})
)
1

I would say You can easily detect Scroll Position by

@override
  void initState() {
    super.initState();

    _scrollController = ScrollController();
    _scrollController.addListener(() {
      var _currectScrollPosition = _scrollController.position.pixels;//this is the line
    });
  }

but If you are going to call setState in addListener() ; It is okay, but this will cause to rebuild your entire build(context). This is not a good practice for Animations specially.

What I would recommand is to seprate your scrolling widget into a seprate StatefulWidget , Then get the sate of that widget by calling

  _yourScrollableWidgetKey.currentState?.controller.addListener(() {
      //code.......
      setState(() {});
    });

Note: Set a GlobalKey, and assign to your StatFulWidget.

  final _yourScrollableWidgetKey = GlobalKey<_YourScrollAbleWidget>();
  StackedPositionedAnimated(
    key: _yourScrollableWidgetKey,
  ),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.