[Flutter]ListViewを一番下まで自動でスクロールする方法

Flutter

2021.10.272021.10.29

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

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

方法
まとめ

方法

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

ScrollController _scrollController = ScrollController();

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

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

最後に、指定したScrollControllerで一番下までスクロールする処理を追加します。

一番下までスクロールするには、「animateTo」メソッドを使います。

_scrollController.animateTo(
    _scrollController.position.maxScrollExtent,//スクロールする位置を１番下に指定
    duration: /*スクロールする時間*/, 
    curve: /*スクロールの仕方*/,
);

一番最初の引数には、スクロールする位置を指定します。

１番下の場合は、「ScrollController.position.maxScrollExtent」を設定します。

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

Curvesについて分からないという方は、とりあえず「Curves.linear」を指定しておけば大丈夫です。

以下は、使用例になります。

  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          shrinkWrap: true,
          controller: _scrollController,
          children: [
            for (var i = 0; i < 50; i++)
              Card(
                child: Container(
                  height: 50,
                  child: Center(child: Text('$i')),
                ),
              )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _scrollController.animateTo(
            _scrollController.position.maxScrollExtent,
            duration: Duration(seconds: 1),
            curve: Curves.linear,
          );
        },
      ),
    );
  }