Flutter reverse listview refresh from bottom (after version >= 3)

Issue

After Flutter 3.0 the ListView(reverse: true) in my project has changed behaviour. In older version it can be refreshed from bottom pull but now it doesn’t, it can just refresh from top.

I know pull_to_refresh package but I am looking for a core solution like old days.. Github issues indicate that It is intended but I don’t wanna reverse flutter version.

Does anybody have idea on flutter 3 and without extra packages?


RefreshIndicator(
    key: refreshKey,
    onRefresh: () async { onRefresh(); },
    child: buildMessagesView(messages),
),


  ListView buildMessagesView(List<MessageModel> messages) {
    return ListView.builder(
      scrollDirection: Axis.vertical,
      reverse: true,
      itemCount: messages.length,
      itemBuilder: (_, index) {
        return Message(message: messages.elementAt(index));
      },
    );
  }

while ListView reverse:true I expected the Refresh Indicator work by pull from down but it doesn’t..

UPDATE
Solved. The ScrollController answer was very useful for me and I developed a simple widget that wraps the ListView to integrate it into the project. You can find the code here.
https://github.com/bnurd/reversed_listview_refresh

Solution

I saw the github issue. Actually I realized this behaviour without refresh indicator widget. You can use ScrollController. Create ScrollController instance with listener, attach it to ListView. Write code inside listener that check whether scroll ended. This is listener function sample code:

void _onScroll() {
final maxScroll = _scrollController.position.maxScrollExtent;
final currentScroll = _scrollController.position.pixels;
if (maxScroll - currentScroll == 0) {'YOUR REFRESH CODE'}
}

This is how you attach this listener to ScrollController:

  late final _scrollController = ScrollController()..addListener(_onScroll);

IMPORTANT: Dont’ forget to attach scrollController to ListView.

Answered By – Jakhongir Anasov

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *