How to create a ListView scrolled to its top? - flutter

Question

I'm a very novice Flutter programmer. I meet the following problem: the code shown below when recreates the ListView after changing data in the stream remembers the previous scroll position whereas I would like to scroll the list to its top. How could I do that?
class HintViewState extends State<HintView> {
#override
Widget build(BuildContext context) {
return StreamBuilder<List<String>>(
stream: model.hintsStream.stream,
initialData: [],
builder: (
BuildContext context,
AsyncSnapshot<List<String>> snapshot,
) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.connectionState == ConnectionState.active ||
snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return const Text('Eraro dum prenado de sugestoj!');
} else if (snapshot.hasData) {
return Expanded(
child: ListView(
padding: const EdgeInsets.all(0.0),
scrollDirection: Axis.vertical,
children: snapshot.data!.map((word) => Padding(...)).toList(),
),
);
} else {
return const Text("Ne estas sugestoj!");
}
} else {
return Text('Stato: ${snapshot.connectionState}');
}
},
);
}
}

Answer 1

Create a scroll controller like as below
final ScrollController _scrollController = ScrollController();
Set it to the list view like as below
child: ListView.builder(
controller: _scrollController,
.....
When you want to scroll it to top, please add below code.
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn);
In your example, you can do like,
else if (snapshot.hasData) {
_scrolltoTop();
return Expanded(
child: ListView(
padding: const EdgeInsets.all(0.0),
scrollDirection: Axis.vertical,
children: snapshot.data!.map((word) => Padding(...)).toList(),
),
);
}
void _scrolltoTop(){
Future.delayed(const Duration(milliseconds: 1000), () {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn);
});
}

Answer 2

In a Flutter community, they explained the situation to me. And the answer is the following.
The key thing here is the parameter "key" of a widget (not a bad pun, yeah?). When during rebuilding at some place in the UI tree, a widget appears of the same type and with the same key as the previous one, then this widget is not recreated, but modified only. And in my case, evidently, modification of a ListView does not imply scrolling to a new position. "That's not a bug, that's a feature!".
One way to force complete recreation a widget when new data appear in the stream is to pass a new key. The best way to get a new key is to use the function ValueKey(...), which, evidently, computes some hash of the object passed to it and returns a key based on the hash. So, when the function is used with the data to be shown, a change of the data in the stream leads to a change of the key and, therefore, to a complete recreation of the widget, which in the case of a ListView assumes scrolling to the top.
So, the correction of the code is the following:
..............
return Expanded(
child: ListView(
key: ValueKey(snapshot.data),
padding: const EdgeInsets.all(0.0),
scrollDirection: Axis.vertical,
..............
But I'm not sure if in a general case, this widget only is recreated or its entire subtree. If the latter, then it might be costly.