How to get full size ScrollController

Question

I connected ScrollController to CustomScrollView from [SliverAppBar, SliverList]

In the default case, I would use reverse: true and animateTo (0.0) to move the scroll to the last item added, but in this case, using reverse will also change the order of SliverAppBar / SliverList!

So, I would like to use animateTo (sizeOfScrollableAfterElementAdded), but I can not find this value.

Thanks!

Answer 1

You can use _scrollController.position.maxScrollExtent to scroll to the end. Be sure to do this in the callback after the frame so that it includes the new item you just added.

Here is an example of a list of tapes that scrolls to the end as more elements are added.

 import 'package:flutter/scheduler.dart'; import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { State createState() => new MyHomePageState(); } class MyHomePageState extends State<MyHomePage> { ScrollController _scrollController = new ScrollController(); List<Widget> _items = new List.generate(40, (index) { return new Text("item $index"); }); @override Widget build(BuildContext context) { return new Scaffold( floatingActionButton: new FloatingActionButton( child: new Icon(Icons.arrow_downward), onPressed: () { setState(() { _items.add(new Text("item ${_items.length}")); }); SchedulerBinding.instance.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 300), curve: Curves.easeOut, ); }); }, ), body: new CustomScrollView( controller: _scrollController, slivers: [ new SliverAppBar( title: new Text('Sliver App Bar'), ), new SliverList( delegate: new SliverChildBuilderDelegate( (context, index) => _items[index], childCount: _items.length, ), ), ], ), ); } }