😃

VisibilityDetectorの使い方

に公開
Flutter
Dart
ChatGPT
Claude
tech

VisibilityDetector を使用することで、ウィジェットが今画面に表示されているのか、表示されていないのかを検出できます。
もし表示されたらコールバックが発火し、表示情報（VisibilityInfo オブジェクト）が引数として渡されます。

これを利用することで、API 通信時に無駄な通信を避けることができます。
例えば、画面に見えているときだけ API を叩き、見えていないときは処理を止めるといった制御が可能です。

実装例

VisibilityDetector(
  key: Key('my-widget'),
  onVisibilityChanged: (info) {
    if (info.visibleFraction > 0) {
      print("Widget is visible");
      // API通信などの処理をここで行う
    } else {
      print("Widget is not visible");
      // 非表示になったら通信を止めるなどの制御
    }
  },
  child: MyWidget(),
)

Discussion