[Flutter]リストビュー(listview)で表示されているインデックスを取得するには？

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

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

方法

リストビューで表示されているインデックスを取得するには、「visibility_detector 」パッケージを使います。

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

dependencies:
  visibility_detector: ^0.2.2

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

import 'package:visibility_detector/visibility_detector.dart';

次に、リストビューで表示されているインデックスを格納するための変数を用意します。

var _showIndex = <int>{};

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

ListView.builder(
  itemBuilder: (context, index) {
    return VisibilityDetector(
      key: ValueKey(index), //このまま使えばOK
      onVisibilityChanged: (info) {},
      child: /*要素*/,
    );
  },
),

最後に、引数「onVisibilityChanged」に表示されているインデックスを取得する処理を追加します。

body: ListView.builder(
  itemBuilder: (context, index) {
    return VisibilityDetector(
      key: ValueKey(index),
      onVisibilityChanged: (info) {
        if (info.visibleFraction == 1) {
          setState(() {
            _showIndex.add(index); //表示されたインデックスの追加
          });
        } else if (info.visibleFraction == 0) {
          setState(() {
            _showIndex.remove(index); //非表示になったインデックスを削除
          });
        }
      },
      child: /*要素*/,
    );
  },
),

これで表示されているインデックスを取得できるようになります。

以下は、使用例です。

  var _showIndex = <int>{};

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

まとめ

リストビューで表示されているインデックスを取得するには、「visibility_detector 」パッケージを使います。