Focus the bottom of a ListView ? Flutter

Question

If I add items dynamically to a listView with a listView.builder, how do I keep the bottom of the list focus ? Like if the list is full, and I add an Item, how do I do to make the other go up and focus the last item without deleting anything ?

This could help you: https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview — Pablo Barrera, Oct 09 '19 at 13:06

score 4 · Accepted Answer · answered Oct 09 '19 at 13:28

4

Hi you can take help of ScrollController using method jumpTo() or animateTo() like bellow,

First create instance of

ScrollController controller = new ScrollController();

Then after registering it with your listview like bellow example

ListView.builder(
              itemBuilder: (context, index) => ListTile(
                title: Text("Item List"),
              ),
              controller: controller,
              itemCount: 50,
            ),

And finally call jumTo() or animateTo() method when new item added or whenever you want to go at bottom like bellow

controller.jumpTo(controller.position.maxScrollExtent);

answered Oct 09 '19 at 13:28

Dhaval Solanki

4,589
1
23
39

1

I noticed that it only shows not the last number but the one before the last (at least with the animate method) – Simon B Oct 09 '19 at 17:48
Yes as @SimonB stated this shows before last , not last – Bawantha Mar 25 '21 at 03:29
@Bawantha So how to fix it ? – Simon B Apr 02 '21 at 14:16

score 3 · Answer 2 · answered May 20 '21 at 12:14

The Accepted answer is correct but also this answer will be useful,

//Controller

ScrollController _scrollController = new ScrollController();

//Add this controller to list

ListView.builder(
      controller: _scrollController, //The Controller
      shrinkWrap: true,
      reverse: false,
      itemCount: snapshot.data.documents.length,
      itemBuilder: (context, index) {
      //Your Widgets
 })

// Add this to everytime you want to scroll to the bottm of list

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

score 0 · Answer 3 · answered Jul 19 '22 at 14:20

0

These answers don't make your list Focused at the bottom by default, I used this trick hope it helps : first reverse the list you gave to the ListView.builder an then add this property to your ListView : reverse: true

answered Jul 19 '22 at 14:20

ParSa

1,118
1
13
17

Anthony Aniobi · Answer 4 · 2022-09-28T17:25:06.957

Efficient Solution:

This solution keeps the ListView focused at the bottom by default, and does not require any scroll controller. So you don't have to worry about where to initialze your scroll controller .

int list_length; // length of your very long list
List long_list; // your long list of items

ListView.builder(
    reverse: true,
    shrinkWrap: true,
    itemCount: item_length,
    itemBuilder: (context, index)=>Text(
        '${long_list[list_length-index-1]}'
    ))
)

Happy Coding !!

Focus the bottom of a ListView ? Flutter

4 Answers4

Efficient Solution: