Rolar programaticamente para o final de um ListView

Eu tenho um rolável ListViewonde o número de itens pode mudar dinamicamente. Sempre que um novo item é adicionado ao final da lista, gostaria de rolar programaticamente o ListViewaté o final. (por exemplo, algo como uma lista de mensagens de bate-papo onde novas mensagens podem ser adicionadas no final)

Meu palpite é que eu precisaria criar um ScrollControllerno meu Stateobjeto e passá-lo manualmente para o ListViewconstrutor, para que posteriormente eu pudesse chamar animateTo()/ jumpTo()método no controlador. No entanto, como não posso determinar facilmente o deslocamento máximo de rolagem, parece impossível simplesmente realizar um scrollToEnd()tipo de operação (ao passo que posso facilmente passar 0.0para fazê-lo rolar para a posição inicial).

Existe uma maneira fácil de conseguir isso?

Usar reverse: truenão é uma solução perfeita para mim, porque eu gostaria que os itens fossem alinhados na parte superior quando houver apenas um pequeno número de itens que cabem na ListViewjanela de visualização.

Se você usar uma embalagem termoencolhível ListViewcom reverse: true, rolar para 0,0 fará o que você quiser.

import 'dart:collection';

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Example',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _messages = <Widget>[new Text('hello'), new Text('world')];
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),
          width: 100.0,
          height: 100.0,
          child: new Column(
            children: [
              new Flexible(
                child: new ListView(
                  controller: _scrollController,
                  reverse: true,
                  shrinkWrap: true,
                  children: new UnmodifiableListView(_messages),
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: () {
          setState(() {
            _messages.insert(0, new Text("message ${_messages.length}"));
          });
          _scrollController.animateTo(
            0.0,
            curve: Curves.easeOut,
            duration: const Duration(milliseconds: 300),
          );
        }
      ),
    );
  }
}

Use ScrollController.jumpTo()ou ScrollController.animateTo()método para conseguir isso.

Exemplo:

final _controller = ScrollController();

@override
Widget build(BuildContext context) {
  
  // After 1 second, it takes you to the bottom of the ListView
  Timer(
    Duration(seconds: 1),
    () => _controller.jumpTo(_controller.position.maxScrollExtent),
  );

  return ListView.builder(
    controller: _controller,
    itemCount: 50,
    itemBuilder: (_, __) => ListTile(title: Text('ListTile')),
  );
}

Se você quiser uma rolagem suave, em vez de usar o jumpToacima, use

_controller.animateTo(
  _controller.position.maxScrollExtent,
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) é a maneira mais simples.

para obter os resultados perfeitos, combinei as respostas de Colin Jackson e CopsOnRoad da seguinte forma:

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

Tenho tantos problemas ao tentar usar o controlador de rolagem para ir para o final da lista que uso outra abordagem.

Em vez de criar um evento para enviar a lista para o final, mudo minha lógica para usar uma lista reversa.

Assim, cada vez que tenho um novo item, eu simplesmente, insiro no topo da lista.

// add new message at the begin of the list 
list.insert(0, message);
// ...

// pull items from the database
list = await bean.getAllReversed(); // basically a method that applies a descendent order

// I remove the scroll controller
new Flexible(
  child: new ListView.builder(
    reverse: true, 
    key: new Key(model.count().toString()),
    itemCount: model.count(),
    itemBuilder: (context, i) => ChatItem.displayMessage(model.getItem(i))
  ),
),

Não coloque widgetBinding no initstate; em vez disso, você precisa colocá-lo no método que busca seus dados no banco de dados. por exemplo, assim. Se colocado em initstate, o scrollcontrollernão será anexado a nenhum listview.

    Future<List<Message>> fetchMessage() async {

    var res = await Api().getData("message");
    var body = json.decode(res.body);
    if (res.statusCode == 200) {
      List<Message> messages = [];
      var count=0;
      for (var u in body) {
        count++;
        Message message = Message.fromJson(u);
        messages.add(message);
      }
      WidgetsBinding.instance
          .addPostFrameCallback((_){
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        }
      });
      return messages;
    } else {
      throw Exception('Failed to load album');
    }
   }

você pode usar isto onde 0.09*heighté a altura de uma linha na lista e _controlleré definido assim_controller = ScrollController();

(BuildContext context, int pos) {
    if(pos != 0) {
        _controller.animateTo(0.09 * height * (pos - 1), 
                              curve: Curves.easeInOut,
                              duration: Duration(milliseconds: 1400));
    }
}