システム開発部のTです。今回、Flutterでアプリを開発するうえで、覚えておきたいライフサイクルについて書いていきたいと思います。個人的な所感としては、AndroidやiOSと比較してちょっと複雑かと思いました。それでは、以降見ていきましょう！ 概要 Flutterのライフサイクルは主に３つの種類があります。大まかに以下のようになるかと思います。 アプリケーションのライフサイクル StatefulWidget（画面）のライフサイクル 画面遷移時のライフサイクル 上記でも分かる通り、StatefulWidgetのライフサイクルだけだと、画面遷移時のハンドリングができないです。以降にて、上記のライフサイクルの詳細な動きを書いていきたいと思います。 アプリケーションのライフサイクル アプリケーションのライフサイクルの取得には、以下のようにMixinsのWidgetsBindingObserverを追加することでdidChangeAppLifecycleStateから取得可能です。あらかじめ、initState()でWidgetsBinding.instance.addObserver(this);、およびdispose()でWidgetsBinding.instance.removeObserver(this);を実装します。 PageA.dart 上記見てもらうとわかりますが、ライフサイクルのステータスとして、以下の４種類に分けられます。 状態 内容 備考 inactive 以下で説明するresumed、pausedの前に、この状態になる。 自分のAndroid環境では、resumedの前でinactiveにならなかった・・・。 resumed アプリがバックグラウンドからフォアグラウンドに切り替わるとき、Android、iOSともに、ホームボタン押下でホーム画面が呼び出されるタイミングでこの状態となる。 paused アプリがフォアグラウンドからバックグラウンドに切り替わるときに、Android、iOSともに、ホーム画面からアプリに復帰するときにこの状態となる。 detached アプリ終了時、Androidの戻るボタンでアプリを終了する場合、この状態となる。 iOSの場合、戻るボタンが存在しないため、この状態にはならない。 上記がアプリのライフサイクルになるが、アプリの起動をハンドリングすることはできない・・・。起動時に「insctive」「resumed」の状態になるかと思いきや・・・、didChangeAppLifecycleStateすらコールされないので、起動時をハンドリングするためには、以降のライフサイクルを利用するしかなさそうです。 以上がアプリケーションのライフサイクルとなります。 StatefulWidget（画面）のライフサイクル 先程はアプリケーションが管理するライフサイクルでしたが、次はStatefulWidgetのライフサイクルになります。StatefulWidgetで画面のレイアウトも生成することになるため、画面制御したい場合、本ライフサイクルを利用することになります。 まずは、ライフサイクルの実装内容を見ていきましょう。 PageA.dart 各状態によって、上記の種類のコールバックメソッドがコールされます。 コールバックメソッド 内容 備考 initState() 初回Widget生成時にコールされる。内部的には初期化前のため、BuildContextは利用不可。 初回のみコールされる　　 didChangeDependencies() initState()後、上記と同様初回のみコールされる。Widgetの初期化が終了しているため、BuildContextは利用可能。そのため、BuildContext利用時は、ここで初期設定をすること。 初回のみコールされる didUpdateWidget() 初回Widget生成時はコールされない。親のWidgetの内容が変更された場合、本メソッドがコールされる。 再構築時にコールされる build() 上記コールバック後にコールされる。 初回、再構築ともにコールされる dispose() Widget破棄時にコールされる。Android、iOSでは戻る操作で画面を終わらせるタイミングでコールされることになる。 終了時にコールされる 上記を見てもらうとわかりますが、初回構築時、再構築時、終了時にコールされることがわかるかと思います。ただ、これでも画面遷移を実装したときに、上記のみだと画面遷移のハンドリングはできません。 画面遷移で画面がコールされたときに、initState()〜build()がコールされます。次に別画面に遷移する場合、呼び出し元の画面はNavigator.push()だと画面破棄されることはないので、dispose()がコールされません。また、アプリケーションのライフサイクルでも、アプリ自体がバックグラウンドにならないため、ここまでのライフサイクルだけでは、画面遷移をすべてサポートできていないのです。 そのため、次に画面遷移時のコールバックメソッドを紹介します。 画面遷移時のライフサイクル 本件のライフサイクルを理解することで、やっと画面のライフサイクルを理解することになるかと思います。ここも複雑なので、サンプルアプリ作るなりして、理解を深めていただきたいです。 画面遷移のハンドリングとして、RouteObserverを利用する方法と、NavigatorObserverを利用する方法の2種類がありますが、本件では個人的に実装したRouteObserverを利用した方法を説明していきたいと思います。 […]

Read more of this post