[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),//ここはそのまま使えばOK
      onVisibilityChanged: (info) {},
      child: /*Item*/,
    );
  },
),

最後に、VisibilityDetectorの引数「onVisibilityChanged」に非表示になったインデックスを取得する処理を追加します。

ListView.builder(
  itemBuilder: (context, index) {
    return VisibilityDetector(
      key: ValueKey(index),
      onVisibilityChanged: (info) {
        if (info.visibleFraction == 0) {
          setState(() {
            _currentHiddenIndex = index; //非表示になったインデックスを取得
          });
        }
      },
      child: /*Item*/,
    );
  },),

「info.visibleFraction == 0」は、要素が非表示になったときに「true」となります。

そして、非表示になったインデックスが取得されます。

以下は、使用例です。

  var _currentHiddenIndex = 0;

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