[Flutter]リストビュー(ListView)の直近で表示されたインデックスを取得するには？

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

リストビューの直近で表示されたインデックスを取得する方法を紹介します。

方法

リストビューの直近でされた要素のインデックスを取得するには、visibility_detectorパッケージを使います。

まず、パッケージを「pubspec.yaml」ファイルで追加します。

dependencies:
  visibility_detector: ^0.2.2

そして、該当ファイルでインポートします。

import 'package:visibility_detector/visibility_detector.dart';

次に、リストビューの要素を「VisibilityDetector」の「child」に指定します。

ListView.builder(
  itemBuilder: (context, index) {
    return VisibilityDetector(
      key: ValueKey(index),
      child: /*要素*/,
    );
  },
),

最後に、VisibilityDetectorの引数「onVisibilityChanged」に直近で表示された要素のインデックスの要素を取得する処理を追加します。

body: ListView.builder(
  itemBuilder: (context, index) {
    return VisibilityDetector(
      key: ValueKey(index),
      onVisibilityChanged: (info) {
        if (info.visibleFraction == 1) {
          setState(() {
            _currentIndex = index;
          });
        }
      },
      child: /*要素*/,
    );
  },
),

if(info.visibleFraction == 1)は、要素が表示された時に呼び出されます。

これで直近で表示された要素のインデックスを取得することが出来ます。

以下は、使用例です。

  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$_currentIndex'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return VisibilityDetector(
            key: ValueKey(index),
            onVisibilityChanged: (info) {
              if (info.visibleFraction == 1) {
                setState(() {
                  _currentIndex = index;
                });
              }
            },
            child: Card(
              color: Colors.green,
              child: Text("$index"),
            ),
          );
        },
        itemCount: 50,
        itemExtent: 100,
      ),
    );
  }

まとめ

直近で表示された要素のインデックスを取得するには、visibility_detectorパッケージを使います。