Search code examples
listviewflutterdartchatnative

Flutter - ListView.builder: Initial scroll position


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.


Solution

  • 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;
    }