🥰

【Flutter】StatefulWidgetのライフサイクル

に公開
Flutter
Dart
state
StatefulWidget
状態
tech

はじめに

Flutterにおける StatefulWidget のライフサイクルについて解説します。
Flutterのライフサイクルは、

  • アプリ（AppLifecycleState）
  • 画面（StatefulWidget）

の２種類がありますが、今回はStatefulWidgetのライフサイクルについて解説します。

[参考記事]
https://qiita.com/kurun_pan/items/116288b8ab2c409d2ee5

StatefulWidgetのライフサイクル

ライフサイクルの状態遷移図は以下の通りです。
グレーの四角がStatefulWidgetの状態遷移時に呼ばれるメソッドです。
それ以外がStatefulWidgetの状態名です。
StatefulWidgetの状態は、created・initialized・ready・defunctの4種類となります。

created

StatefulWidgetのcreateStateメソッドによりcreated状態になります。
そして、created状態になった後に、initState()が呼び出されます。

initStateはWidgetの初期化時に一度だけ呼ばれるメソッドです。

@override
void initState() {
  super.initState();
  // todo: ここに処理を書きます
}

initialized

initState()の後、initialized状態に遷移します。
initialized状態になった後に、didChangeDependencies()を呼び出します。
didChangeDependencies()はStateオブジェクトの依存関係が変更されたときに呼び出されるメソッドです。

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // todo: ここに処理を書きます
}

ready

didChangeDependencies()完了後、ready状態に遷移します。
初回はbuild()がすぐに呼び出され、ウィジェットが構築されます。

setState()を行うことで、強制的にウィジェットの再構築を行われ、build()が再び呼び出されます。

また、親ウィジェットが再構築された場合、didUpdateWidget()が呼び出されます。
この後にウィジェットの再構築（build()）が行われます。
それ以外の更新処理については、didUpdateWidget()に処理を書きます。

@override
void didUpdateWidget(MyHomePage oldWidget) {
  super.didUpdateWidget(oldWidget);
  // todo: ここに処理を書きます
}

defunct

ウィジェットが完全に破棄された状態です。
この状態の前にdispose()が呼び出されます。
具体例として、dispose()にはサービスの終了に関する処理を記載したりします。

@override
void dispose() {
  // todo: ここに処理を書きます
  super.dispose();
}

まとめ

StatefulWidgetのライフサイクルの流れについて理解できたと思います。
（created → initialized → ready → defunct）
StatefulWidgetではinitState()やsetState()、dispose()を使用することが多いので、それ以外（didChangeDependenciesやdidUpdateWidget）についてはあまり意識しなくて良いと思います。

Discussion