この章では、StatefulWidgetが画面の状態をどのように保持し、変更内容を画面へ反映するのかを整理します。

第8章ですでにModelViewerScreenをStatefulWidgetへ変更しましたが、現時点では3Dコントローラーを保持する目的が中心でした。今後は、モデルの読み込み中、表示完了、エラー発生といった状態も管理します。

10.1 StatelessWidgetとの違い

StatelessWidgetは、表示中に変化する値を内部へ保持しないWidgetです。タイトルや固定された説明文など、同じ内容を表示し続ける部品に適しています。

一方、StatefulWidgetは、操作や処理の結果によって画面が変わる場合に使用します。

今回のアプリでは、次のような変化を扱います。

• モデルの読み込みが完了する
• 読み込み中の案内を消す
• エラーメッセージを表示する
• 再読み込みによって状態を初期化する
• モデル表示後にリセットボタンを有効にする

これらは実行中に変化するため、StatefulWidgetが必要です。

10.2 StatefulWidgetとStateの関係

StatefulWidgetは、Widgetの設定を表します。実際に変化する値は、対応するStateクラスへ保持します。

class ModelViewerScreen extends StatefulWidget {
  const ModelViewerScreen({super.key});

  @override
  State<ModelViewerScreen> createState() {
    return _ModelViewerScreenState();
  }
}

createState()は、Widgetに対応する状態オブジェクトを生成します。

class _ModelViewerScreenState extends State<ModelViewerScreen> {
  final Flutter3DController _controller = Flutter3DController();

  @override
  Widget build(BuildContext context) {
    // 画面を構築する
  }
}

ModelViewerScreen自体の設定は変更せず、コントローラーや読み込み状態などは_ModelViewerScreenStateへ置きます。

10.3 状態を保持する変数

状態として管理する値は、Stateクラスのフィールドとして定義します。