[Flutter]ListView.builderで特定のインデックスまで自動でスクロールするには？

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

ListView.builderで特定の要素までスクロールする方法を紹介します。

方法

ListView.builderで特定のインデックスまでスクロールするには、「scroll_to_index」を使います。

まず、「AutoScrollController」の変数を用意します。

var _controller = AutoScrollController();

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

ListView.builder(
  controller: _controller,
  itemCount: /*要素数*/,
  itemBuilder: (context, index) {
    ・・・
  },
)

次に、表示するリストの要素となるウェジェットを、「AutoScrollTag」の「child」に指定します。

また、AutoScrollTagの引数「key」、引数「index」、引数「controller」に値を設定します。

ListView.builder(
  controller: _controller,
  itemCount: 50,
  itemBuilder: (context, index) {
    return AutoScrollTag(
      key: ValueKey(index),
      controller: _controller,
      index: index,
      child: /*要素*/
    );
  },
)

keyの記述は、そのまま使ってもらえれば大丈夫です。

後は、AutoScrollControllerの「scrollToIndex」メソッドで、特定のインデックスにスクロールできるようにします。

_controller.scrollToIndex(/*インデックス*/);

以下は、実際の使用例です。

  var _controller = AutoScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          controller: _controller,
          itemCount: 50,
          itemBuilder: (context, index) {
            return AutoScrollTag(
              key: ValueKey(index),
              controller: _controller,
              index: index,
              child: ListTile(
                title: Text('$index'),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        _controller.scrollToIndex(25); //インデックス２５へ
      }),
    );
  }

var _controller = AutoScrollController(/*設定*/);