How to get full size of a ScrollController

Also, if you would like to immediately scroll to the bottom of the list on start (in the initState()), you can place the following code chunk from Collin's solution before the first time you call setState().

class ExampleState extends State<Example>{
    void initState(){
    super.initState();

    _scrollController = new ScrollController();

    void _getListItems() async{

        //get list items

        SchedulerBinding.instance.addPostFrameCallback((_) {
          _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 100),
        curve: Curves.ease,
         );
        });

      setState((){
      });
   }
 }
}

You can use _scrollController.position.maxScrollExtent to scroll to the end. Make sure to do this in a post-frame callback so that it will include the new item you just added.

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

before after

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,
            ),
          ),
        ],
      ),
    );
  }
}

Tags:

Flutter