Control the scroll of Flutter ListView

Question

I would like to implement the auto-scroll function for the ListView but I don't know how to control it properly.

I have 2 buttons. One will make the ListView start scrolling to the bottom and one will make the ListView stop scrolling.

I know that I can use ScollController with animateTo to scroll to the bottom automatically but I don't know how to stop. Is this a proper way to implement the auto-scroll function? If yes then how can I stop the scrolling?

Answer 1

You can stop the scrolling by overriding the animateTo to the current position as the following

   _scrollController.animateTo(_scrollController.offset,
                    duration: Duration(milliseconds: 5000),
                    curve: Curves.fastOutSlowIn);

Check the below example

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> {
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 50,
        itemBuilder: (_, index) =>
            ListTile(title: Text('ListTile ' + index.toString())),
      ),
      bottomSheet: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RaisedButton(
            child: Text("Start Down"),
            onPressed: () {
              setState(() {
                _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    duration: Duration(milliseconds: 5000),
                    curve: Curves.fastOutSlowIn);
              });
            },
          ),
          RaisedButton(
            child: Text("Stop"),
            onPressed: () {
              setState(() {
                _scrollController.animateTo(_scrollController.offset,
                    duration: Duration(milliseconds: 5000),
                    curve: Curves.fastOutSlowIn);
              });
            },
          )
        ],
      ),
    );
  }
}

Answer 2

In your controller, you can define the animation including the number of pixels to scroll and the time it'll take to get from your current position to your destination in the list. For example:

_controller.animateTo(pixelsToMove,
 curve: Curves.linear, duration: Duration (milliseconds: 500));

If you want to use this controller function, you can add a ScrollNotification and keep calling it over and over again when the scroll ends, until the stop button is pressed.