[Flutter]ListView（リストビュー）を１番上(top)までスクロール(scroll)するには？

どうも、ちょげ(@chogetarou)です。

ListViewを１番上までスクロールする方法を紹介します。

方法
まとめ

方法

ListViewを１番上までスクロールするには、ScrollControllerを使います。

まず、ScrollControllerの変数を用意します。

ScrollController _controller = ScrollController();

次に、使用するListViewもしくはListView.builderの引数「controller」に用意した変数を指定します。

ListView(
  controller: _controller,
  children : []
),

最後に、ボタンなどでScrollControllerのanimateToメソッドを呼び出します。

onPressed: () {
  _controller.animateTo(
    0,//スクロールする位置を１番上に設定
    duration: /*スクロールする時間*/,
    curve: /*スクロールの仕方*/,
  );
}

指定する引数は３つあります。

offset : スクロールする位置を指定。１番上にする場合は「０」を設定する
duration : スクロールの時間を指定。指定にはDurationを使う
curve : スクロールの仕方をCurvesで指定。基本的には「Curves.linear」

これらの引数を設定した「animateTo」を呼び出せば、ListViewを１番下までスクロールすることが出来ます。

以下は、使用例です。

  ScrollController _controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          controller: _controller,
          itemCount: 50,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(1.0),
              child: Container(
                color: Colors.lightGreen,
                child: Text(
                  '$index',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            );
          },
          itemExtent: 50,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.animateTo(
            0,
            duration: Duration(seconds: 1),
            curve: Curves.linear,
          );
        },
      ),
    );
  }