[Flutter]ListView(リストビュー)のスクロール(scroll)の位置(position)を取得するには？

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

ListViewのスクロールの位置を取得する方法を紹介します。

方法

ListViewのスクロールの位置を取得するには、まず変数を用意します。

ScrollController _scrollController = ScrollController();

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

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

そして、ボタンなどに位置を取得する処理を追加します。

位置を取得は、ScrollControllerの「position」を使って行います。

setState(() {
  _scrollPosition = _scrollController.position.pixels;
});

positionは、そのまま使うと、エラーが出るので、「pixels」を後ろにつけます。

これでListViewのスクロールの位置を取得することが出来ます。

以下は、使用例です。

  ScrollController _scrollController = ScrollController();
  double _scrollPosition = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              height: 100,
              child: Center(
                child: Text('$_scrollPosition'),
              ),
            ),
            SizedBox(
              height: 500,
              child: 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: () {
        setState(() {
          _scrollPosition = _scrollController.position.pixels;
        });
      }),
    );
  }

位置を自動で取得したい場合は、ScrollControllerの「addListener」で取得する処理を設定します。

  @override
  void initState() {
    _scrollController.addListener(() {
      setState(() {
        _scrollPosition = _scrollController.position.pixels;
      });
    });
    super.initState();
  }