Scrolling to the end of a AnimatedList - dart

Question

I have a scrollable AnimatedList and I want whenever a new item is added to the end of the list, it would scroll to the end.
I try to apply this code form ListView but it doesn't work.
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget {
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
List<String> list = ["a", "a", "a", "a", "a", "a", "a"];
final ScrollController _listScrollController = new ScrollController();
final GlobalKey<AnimatedListState> _listKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: AnimatedList(
key: _listKey,
controller: _listScrollController,
initialItemCount: list.length,
itemBuilder: (BuildContext context, int index, Animation animation) {
return FadeTransition(
opacity: animation,
child: Container(
width: itemSize,
height: itemSize,
child: Text(list[index]),
),
);
},
),
),
floatingActionButton: FloatingActionButton(onPressed: _addNewItem),
);
}
_addNewItem() {
list.add(list.length.toString());
_listKey.currentState.insertItem(
list.length - 1,
duration: Duration(seconds: 1),
);
_listScrollController.animateTo(
_listScrollController.position.maxScrollExtent, // wrong value (this value is before add new item)
duration: const Duration(milliseconds: 250),
curve: Curves.ease,
);
}
}
So I need to change the scroll code a little bit.
const double itemSize = 40.0;
_listScrollController.animateTo(
_listScrollController.position.maxScrollExtent + itemSize,
duration: const Duration(milliseconds: 250),
curve: Curves.ease,
);
But it need itemSize to hardcode(itemSize) or use BuildLayout, RenderBox to determine new item size. Do you guys have any better solutions?

Answer 1

The issue is you were animating the stuff before adding the item. You were taking a duration of 1s to add item, use this timer that will run after 1s.
Timer(
Duration(milliseconds: 1100),
() {
_listScrollController.animateTo(
_listScrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 250),
curve: Curves.ease,
);
},
);
Replace yours with mine.
_addNewItem() {
list.add(list.length.toString());
_listKey.currentState.insertItem(
list.length - 1,
duration: Duration(milliseconds: 200),
);
Timer(
Duration(milliseconds: 220),
() {
_listScrollController.animateTo(
_listScrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
);
}
Output: