【Flutter入門】StatefulWidgetで使われるStateのライフサイクルを徹底解説！

本記事は、マルチプラットフォーム開発のSDK【Flutter】を用いたモバイルアプリ開発入門の為の記事です。

ダーフク

StatefulWidgetのStateは、初期化されてから破棄されるまで複数回のステップを踏みます。どのようなステップで行われているのか、深く理解することは開発を効率的に行うために不可欠です。本記事ではこのライフサイクルを解説していきます。

StatefulWidgetに関しては、以下の記事を参考にして頂ければと思います。

あわせて読みたい

【Flutter入門】StatefulWidgetはなぜ２つに分かれているのかについて解説するよ。本記事は、マルチプラットフォーム開発のSDK【Flutter】を用いたモバイルアプリ開発入門の為の記事です。【StatefulWidgetについて復習】はじめに、StatefulWidgetで特…

あわせて読みたい

【Flutter入門】StatelessWidgetとStatefulWidgetの違い本記事は、マルチプラットフォーム開発のSDK【Flutter】を用いたモバイルアプリ開発入門の為の記事です。【StatelessWidget】StatelessWidgetとは、State（状態）を持た…

ライフサイクルの全体像

Stateのライフサイクルは大まかに10ステップに分かれています。

➀createState（Stateを作成する）

まず、FlutterのSDKはStatefulWidgetのcreateStateを呼び出し、Stateを作成します。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() = _MyHomePageState();
}

class _MyHomePageState extends State MyHomePage {
  .....
}

➁mounted is true（Stateをマウントする）

➀にて作成されたStateはBuildContextに紐づけられます。

BuildContextとは端的に言うと、各WidgetのWidget Tree上の位置（そのWidgetがどこにあるのか）を制御するためのクラスです。

このタイミングで、Stateオブジェクトはマウントされたと認識されます。

➂initState（Stateを初期化する）

クラスのコンストラクターが呼び出されたあと、すぐにこのinitStateが呼ばれます。

最初に一度だけ実行されます。

オーバーライドできますが、その際は必ず親クラスのinitStateも呼び出す必要があります。

// これを記述することでオーバーライドと認識される
@override
initState() {
  // 必ず、super.initState()を呼ぶこと
  super.initState();
  // Streamをlistenしてデータを連続したデータを受け取れるようにする
  cartItemStream.listen((data) {
    _updateWidget(data);
  });
}

④didChangeDependencies

initStateを呼び出した後にはdidChangeDependenciesが呼び出されます。

didChangeDependenciesは、InheritedWidgetのBuildContext.inheritFromWidgetOfExactTypeが実行された場合に呼び出されます。

InheritedWidgetとは、Treeの下位のWidgetから直接参照できるWidgetのことです（詳細は別記事にて解説します）。

アクセス方法は、ConfigInheritedWidget.of(context).hogeUrlのような形で情報を取得します。

ただその場合contextにアクセスしたいのですが、initState内ではまだcontextにアクセスすることができません。

そこで、didChangeDependencies内でこれを実行し、InheritedWidgetからデータを取得するようにします。

➅build

build関数は確実に使われます。描画したいWidgetを記述するのに用います。

@override
Widget build(BuildContext context) {
  return Widget();
}

➆didUpdateWidget(Widget oldWidget)

親Widgetが変更されて（親Widgetから渡されるパラメーターの値が代わり）、再ビルドされる必要がある場合にこのdidUpdateWidgetが呼ばれます。

FlutterではStateは使い回しますが、initStateで初期化をしたデータは再び初期化しなければならない場合があります。

これが呼ばれたのちにbuild関数も呼び出されるため、setStateをこの関数内に記述する必要はありません。

➆setState

State内の変数の値を変更したい場合に呼び出されます。これが呼ばれた後、build関数が再実行されます。

この関数は、同期的なコールバックを持ちます。これは、再描画が安価であるため、必要に応じて頻繁に呼び出すことができるためです。

void updateProfile(String name) {
  setState(() => this.name = name);
}

➇deactivate

これはほとんどの場合、使われません。Stateがツリーから削除される場合に呼び出されます。

➈dispose

Stateオブジェクトが削除されるとdisposeが呼び出されます。これは永続的なものです。

このメソッドでは、以下のようなものを取り消す場合に用いられます。

➉mounted is false

disposeが呼び出されると、Stateオブジェクトは再マウントされません。

ここでsetState関数を呼び出した場合、エラーとなります。

まとめ

本記事では、Stateのライフサイクルについて解説しました。まとめると、以下のような手順になります。

あまり使わないため、意識しないステップもありますが、根本を理解しておくとエラーを見つける役に立つ場合もあります。

しっかりと理解をしておきましょう。

参考