how can I scroll list view to the bottom in flutter

Question

I have a flutter app contain a list view builder (chat page) I need to scroll the page to the end of the page to the last message?

Does this answer your question? [Programmatically scrolling to the end of a ListView](https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview) — dshukertjr, Apr 27 '20 at 00:12

score 7 · Answer 1 · answered May 18 '20 at 22:17

7

Setting reverse: true to ListView widget will bring the newest element at the bottom. With this, you can achieve a chat timeline easily.

ListView.builder(
  reverse: true,
  itemBuilder: (context, index) => _chatCell(),
)

answered May 18 '20 at 22:17

dshukertjr

15,244
11
57
94

1

I don't want to reverse it, I want to scroll down it, the answer before it work when I use timer I the initState, I need do it with every new message. – Husamuldeen May 19 '20 at 02:28
1

@Husamuldeen Have you actually tried this though? It actually works like a charm. – dshukertjr May 19 '20 at 03:50

score 5 · Accepted Answer · answered Apr 26 '20 at 02:44

5

You will need to create a scrollController and pass that to the ListView and run a code like this:

class SampleList extends StatefulWidget {
  @override
  _SampleListState createState() => _SampleListState();
}

class _SampleListState extends State<SampleList> {
  ScrollController _scrollController;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemBuilder: (_, index) => ListTile(
        title: Text(
          index.toString(),
        ),
      ),
    );
  }

  void scrollToBottom() {
    final bottomOffset = _scrollController.position.maxScrollExtent;
    _scrollController.animateTo(
      bottomOffset,
      duration: Duration(milliseconds: 1000),
      curve: Curves.easeInOut,
    );
  }

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

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

answered Apr 26 '20 at 02:44

dshukertjr

15,244
11
57
94

1

and where is the call of scrollToBottom() – Husamuldeen Apr 26 '20 at 18:51
@Husamuldeen That is up to you. You can call it whenever you load a new message or whatever makes sense to you. – dshukertjr Apr 26 '20 at 22:28
I tryed to call it in the initate or in the build method but I got red screen – Husamuldeen Apr 26 '20 at 23:38
@Husamuldeen You have to call the method after the widgets have been laid out. – dshukertjr Apr 27 '20 at 00:11
please wxplain that for me, how to do that – Husamuldeen Apr 27 '20 at 11:43
after a lot of trying I could do it with timer in the initState but it didn;t work when I press button – Husamuldeen May 18 '20 at 02:35
@Husamuldeen When do you need to go to the bottom of the list? After a new element is loaded? Or when the user presses something? – dshukertjr May 18 '20 at 03:37
it is a chat, when the user send a new message it's add a new element to the list and the list view scroling down. – Husamuldeen May 18 '20 at 04:12
@Husamuldeen How are you displaying the chat message? Stream builder? You just have to call the scroll to the bottom method every your chat loading mechanism is fired. – dshukertjr May 19 '20 at 03:42

score 1 · Answer 3 · answered Feb 05 '21 at 02:29

Initialize the object of ScrollController class in the initState method.

Remember :- 1) Call the super.initState(); at the top of the initState method. 2) ListView should be connected with the scroll controller's object.

WidgetsBinding.instance.addPostFrameCallback((_) { scrollController.jumpTo(scrollController.position.maxScrollExtent); });

Then, add the above code at the top of the build method. It will scroll automatically to the bottom of the list view of messages.

score 1 · Answer 4 · answered Jul 21 '21 at 12:23

1

Perfect way to do this is by adding

reverse: true

to the ListView.builder() and change the way you give data the list view. Like this.

Instead of retrieving normally, reverse it and give it to the list view builder.

<List> _messages = [...];
_messages.reversed.toList();

answered Jul 21 '21 at 12:23

MBK

2,589
21
25

I'm talking about scrolling not reversing – Husamuldeen Jul 28 '21 at 18:24
By this way, flutter automatically take you to the bottom of chat, and keep you at the bottom when new messages are added to the list view. Let me know if doesn't work. – MBK Jul 29 '21 at 16:59

how can I scroll list view to the bottom in flutter

4 Answers4