[Flutter]ListView(リストビュー)を最初(first)の要素(index)までスクロール(scroll)させるには？

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

ListViewを最初の要素までスクロールさせる方法を紹介します。

方法
まとめ

方法

ListViewを最初の要素までスクロールさせるには、まず「ScrollController」の変数を用意します。

var _scrollController = ScrollController();

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

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

後は、ScrollControllerを使って、最初の要素までスクロールする処理を追加します。

最初の要素までスクロールする処理は、ScrollControllerの「animateToメソッド」で実装します。

_scrollController.animateTo(
  0, //最初の要素の指定
  duration: /*スクロールの時間*/,
  curve: /*スクロールの仕方*/,
);

引数「duration」でスクロールの時間、引数「curve」でスクロールの仕方をCurvesを使って指定します。

Cuvesについて分からないという人は、とりあえず「Curves.linear」を指定しましょう。

以下は、使用例です。

  var _scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        shrinkWrap: true,
        itemCount: 50,
        itemBuilder: (context, index) {
          return Card(
            child: SizedBox(
              height: 50,
              child: Text(
                '$index',
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _scrollController.animateTo(
            0,
            duration: Duration(seconds: 3),
            curve: Curves.linear,
          );
        },
      ),
    );
  }