【Flutter】WidgetsBindingObserverを利用してライフサイクルを検知する

こんにちは、株式会社Pentagonでアプリ開発をしている石渡港です。
https://pentagon.tokyo
今日は、FlutterのWidgetsBindingObserverについて学んだので簡単にまとめたいと思います。

目次

■この記事を読むとできること

WidgetsBindingObserverについて少し知ることができます🙋

■WidgetsBindingObserverとは?

このクラスは、すべてのハンドラのデフォルトの動作を取得するために、直接拡張することができます。また、implements キーワードを使用して、すべてのハンドラを実装する必要があります (そして、アナライザは省略されたものをリストアップします)。
参考
与えられたオブジェクトをバインディングオブザーバーとして登録します。バインディングオブザーバーは、システムロケールの変更など、様々なアプリケーションイベントが発生した際に通知されます。通常,ウィジェットツリーの1つのウィジェットがバインディングオブザーバとして登録され,システムの状態を継承したウィジェットに変換します。

参考(addObserver)アプリのライフサイクルやシステムに関する通知をしてくれるようです。

■実装例

今回あるリポジトリでアプリの状態を検知したかったため下記のように実装してみました。
hoge_repository_provider.dart

final hogeRepositoryProvider = ChangeNotifierProvider((_) {
 return HogeRepositoryProvider();
});

class HogeRepositoryProvider extends ChangeNotifier with WidgetsBindingObserver {
 CurrentUserRepository() {
   WidgetsBinding.instance.addObserver(this);
 }

 @override
 Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
   switch (state) {
     case AppLifecycleState.resumed:
       // アプリがフォアグラウンドに来たときに取得する
       await fetchHoge();
       break;
     case AppLifecycleState.inactive:
     case AppLifecycleState.paused:
     case AppLifecycleState.detached:
       break;
   }
 }

 @override
 void dispose() {
   WidgetsBinding.instance.removeObserver(this);
   super.dispose();
 }

 Hoge _currentHoge;

 Hoge get currentHoge => _currentHoge;

 set currentHoge(Hoge value) {
   _currentHoge = value;
   notifyListeners();
 }

 Future<void> fetchHoge() async {
 await HogesService().getSelf().then(
     (value) {
       currentHoge = value;
     },
   );
 }
}

最初に呼び出されるWidgetなどで下記のように呼びます。

// あるコールバックで呼ぶ場合
context.read(hogeRepositoryProvider).fetchHoge();

これでアプリがフォアグラウンドになるたびに、fetchHogeが呼ばれます。

採用情報はこちら
目次