Flutter - ListView.builder: Initial scroll position

Question

I want to setup the initial scroll position of a ListView.builder, I want the list to start at the bottom 0.0

If I setup reverse on the listView of course I get the initial scroll position to be the desired one, but what I need is to have the last children on the bottom, is a chat app.

This is the list builder, MessageItem() is the chat message

ListView.builder(
                    shrinkWrap: true,
                    controller: _scrollController,
                    itemCount: snapshot.data.documents.length,
                    padding: EdgeInsets.all(10.0),
                    itemBuilder: (BuildContext context, int index) =>
                        MessageItem(
                            index: index,
                            document: snapshot.data.documents[index],
                            myId: myId));

This is the animation I have when someone send the message


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

the animation works okay.

What I want is the list scroll position to be already at the bottom when the user enters the chat room.

why not set the intial position of the scroll controller in the initState of the widget. this way in the intial widget build it'll scroll to the bottom position. — Salma, Aug 15 '19 at 06:38
@E.Bradford Well, that is just an animation that happens when the user press the "send message" button, that works. I tried putting the animation code on `initState()` but it throws error: ``` I/flutter (15097): ScrollController not attached to any scroll views. I/flutter (15097): 'package:flutter/src/widgets/scroll_controller.dart': I/flutter (15097): Failed assertion: line 110 pos 12: '_positions.isNotEmpty' ``` Where should I put it so it can be triggered at the beginning? — Irving Armenta, Aug 15 '19 at 06:39
set it to 0.0 while initializing the scrollController >>> _scrollController = new ScrollController( initialScrollOffset: 0.0, keepScrollOffset: true, ); — Salma, Aug 15 '19 at 06:45
@Salma. It doesn't seem to work, perhaps is because the `ListView` is a builder, `ListView.builder` , so that is why I need to setup the animation as: `_scrollController.position.maxScrollExtent` instead of `0.0` but of course this causes an error, it needs some `mounting` I guess. — Irving Armenta, Aug 15 '19 at 06:53

Rodrigo · Answer 1 · 2020-06-03T19:53:52.243

26

for avoid error where scroll isnt attached for any list, use, WidgetsBinding to pullout after build is ready.


void _scrollToBottom() {
    if (_scrollController.hasClients) {
      _scrollController.animateTo(_scrollController.position.maxScrollExtent,
          duration: Duration(milliseconds: 300), curve: Curves.elasticOut);
    } else {
      Timer(Duration(milliseconds: 400), () => _scrollToBottom());
    }
 }

@override
Widget build(BuildContext context) {

  WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());

  {...} //rest of code;
}

edited Jun 03 '20 at 19:53

answered Jun 03 '20 at 14:49

Rodrigo

381
3
5

2

Not sure why this answer didn't get more love. This solved a problem I've been having with selecting checkboxes in a ListView and keeping the view static, instead of always jumping back to top. Thanks! – ConleeC Jun 25 '20 at 22:48

score 18 · Answer 2 · answered Nov 11 '19 at 23:20

18

You can set one of ScrollController's property: initialScrollOffset

But on the condition that you know the offset position of the target item/index.

ScrollController _controller = ScrollController(initialScrollOffset: itemHeight * index)

(note that this example assumes that the sizes of your list's widgets are of constant size, but if you don't have constant widget sizes in your list, then you must be able to calculate the final offset position of your target item - and that is a whole other issue)

Or, if you want it to always be the last item/index, then it's much easier:

ScrollController _controller = ScrollController(initialScrollOffset: _controller.position.maxScrollExtent)

answered Nov 11 '19 at 23:20

TWL

6,228
29
65

15

You can't use _controller while constructing it – maff May 07 '20 at 18:06
1

@maff for that there is a special method - addpostframecallback, it is fired right after the widget tree is built so you don't have to guess the delay in the initstate. – Zhangir Siranov Jun 10 '20 at 11:36
@maff agree with you, but you could have a check something like this ```if(_controller.hasClients){ }``` – Mahesh Jamdade Mar 22 '21 at 04:02
initialOffset will not animate to the position – Sisir Nov 25 '21 at 18:32
This actually works perfectly, you gotta calculate the offset and pass it as parameter. I tested it and works perfectly – carrasc0 Feb 11 '22 at 01:08

score 8 · Answer 3 · answered May 14 '20 at 07:32

8

The solution for me was:

SingleChildScrollView(
                reverse: true,
                child: Container(),
              ),

ListView has also reverse property.

answered May 14 '20 at 07:32

CarlosMacMar

258
3
14

3

Also you should reverse your array message. – Farhan Syedain Jan 15 '22 at 13:39

score 2 · Answer 4 · answered Jun 10 '20 at 11:42

I feel your pain as it is an essential requirement because there could be tens of thousands of messages in a single chat.

To tackle that you can use

SchedulerBinding.instance.addPostFrameCallback((_){});

This callback is fired right after the widget tree is built, so you can just

scrollController.jump(scrollController.position.maxScrollExtent);

That however won't work if you have messages appear asynchronously, that is, after the initstate with some function that pulls it off from firestore document for instance. In this case you will first need for them to load, and only then do the steps above. Hope this helps.

score 0 · Answer 5 · answered Sep 27 '21 at 06:04

0

There is something simple assume that you are getting a list from API in future builder and returning the listview.builder

snapshot.data.length-index-1

remove the reverse property from the listview.builder

answered Sep 27 '21 at 06:04

Osama Buzdar

1,115
10
20

F Perroch · Answer 6 · 2022-02-17T23:15:24.120

-2

You can also simply use the FixedExtentScrollController for same size items with the index of your initialItem :

controller: FixedExtentScrollController(initialItem: itemIndex);

The documentation : Creates a scroll controller for scrollables whose items have the same size.

edited Feb 17 '22 at 23:15

answered Feb 17 '22 at 23:01

F Perroch

1,988
2
11
23

1

At the moment "FixedExtentScrollController can only be used with ListWheelScrollViews". Ref: https://github.com/flutter/flutter/issues/28012 – David Miguel Jul 21 '22 at 08:59

Flutter - ListView.builder: Initial scroll position

6 Answers6

Linked