Zenn
🙌

[Flutter]StatefulWidgetのライフサイクルの個人的まとめ

2022/07/12に公開
Flutter
Dart
tech

StatefulWidgetのライフサイクル

この記事は
StatefulWidgetのライフサイクル⓵
と、
StatefulWidgetのライフサイクル⓶
の解説をもとに自分用(より初学者用)に噛み砕いた感じです

ライフサイクルとは

そもそもライフサイクルとは、
画面構築(Create/Start)→再描画(Rebuild/Pause)→メモリなどの廃棄(Stop/Destroy)
みたいな感じで
アクティビティを作成、停止、再開、破棄などの処理を行うシステムのこと

オススメライフサイクル記事

簡単なライフサイクル概要図

ある画面(Statefulwidget)が呼ばれると、画面を作るために、メモリ上に必要なWidgetや変数が集められます。
その後、Widgetの親子関係に従って、Widgetのツリーが構築され、画面に描画(レンダリング)されていきます。
StatefulWidgetは状態によって画面が変化するため、ユーザ操作やイベントを契機に画面の再描画が行われます。
そして、使い終わったStatefulWidgetは、メモリを開放するために破棄されます。

ライフサイクル概要図(実際に呼び出されるメソッドたち)

実際に呼び出されるメソッドたちが追加されたが、大枠のサイクルは上と全く一緒。

ライフサイクルメソッドの役割

画面構築→再描画→画面破棄 の順番

画面構築

  • createState()メソッド
    • statefulWidgetを構築するとすぐに呼ばれる
    • Widgetツリーに状態を作るために呼ばれる
  • initState()メソッド
    • Widgetツリーの初期化(リセット)を行う
    • その初期化時に1度だけ呼ばれる
    • ここではBuildContextの情報は構築されておらず、利用不可
  • didChangeDependencies()メソッド
    • stateオブジェクトの依存関係が変更されたときに呼び出される
    • initStateの後に呼ばれるが、それ以外にも呼ばれることはある
    • この時点でBuildContextが利用できるようになる (引数で)
    • 初回構築時には下記build()がすぐにコールされる

再描画

  • build()メソッド
    • Widgetで作られるUIを構築する
    • 様々な場所から繰り返し呼び出される
    • 変更がある部分ツリーを検知して置き換える(上書きするイメージ)
  • didUpdateWidget(Widget oldWidget)
    • ウィジェットの構成が変更されるたびに呼び出される
    • 親Widgetが変更され、再描画する必要があるときに呼び出される
    • oldWidgetパラメータを取得して比較する
  • setState()メソッド
    • 状態が変わったことをフレームワークに通知する
    • また、親ウィジェットが再構築された時には、didUpdateWidget()がコールされる。このコールの後、再構築 (build) が行われるので、setState()はいらん。それ以外の更新処理が何かあれば、setState()メソッドを使う。

画面破棄

  • deactivate()メソッド
    • stateオブジェクトがツリーから削除するたびに呼び出される
  • initState()メソッド
    • オブジェクトがツリーから完全に削除され、2度とビルドされなくなったら呼ばれる

再描画のところの

  • setState()メソッドで変更を検知→build()メソッドで変更をUIに反映

と

  • ライフサイクルの概要を頭に入れつつサイクル図

の流れがポイント

以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

参考記事

GitHubで編集を提案

Discussion