[Flutter]ListViewの最後(last)の要素(index)までスクロール(scroll)する方法

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

ListViewの最後の要素までボタンなどでスクロールさせる方法を紹介します。

方法
まとめ

方法

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

var _scrollController = ScrollController();

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

ListView(
  controller: _scrollController,
  children : []
)

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

最後の要素までスクロールするには、ScrollControllerの「animateToメソッド」を使って行います。

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

「duration」はスクロールする時間、「curve」はスクロールの仕方をCurvesで指定します。

この処理を、ボタンなどに追加することでListViewの最後の要素までスクロールすることが出来ます。

以下は、使用例です。

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