Sunday 31 October 2021

Flutter - how to scroll to the bottom of a listview?

I use this code to scroll:

WidgetsBinding.instance?.addPostFrameCallback((_) => _scrollToEnd());

_scrollToEnd() method is:

_scrollController.animateTo(
  _scrollController.position.maxScrollExtent,
  duration: const Duration(
    milliseconds: 200,
  ),
  curve: Curves.easeInOut,
);

Imagine this as a normal chat screen. It scrolls to the bare bottom if the messages are in 1 line. But as soon as a message gets to 2+ lines it struggles to scroll to the bare bottom. The more rows of a message the less it scrolls to the bottom.

This is how it looks like when i enter the chat:

But if i scroll down further this is the bottom of the chat:

I noticed there's also a case when:

  1. I enter the chat.
  2. It scrolls down like on the first image.
  3. If i tap anywhere on the screen, it continues to scroll to the bare bottom of the listview like on the second image.

Why does this happen and how do i fix this?



from Flutter - how to scroll to the bottom of a listview?

No comments:

Post a Comment