セクション7まとめ

2024/04/30に公開

今回はStatefullWidgetについての解説。

StatefullWidgetとStatelessWidgetの違い

今までにもこの二つがよく出てきていたがだったらどう違うのか。

・StatefullWidgetは状態をもつWidgetのこと、チェックボックスの中にチェックを入れたらチェックの記載が入ったりストップウォッチのタイマーを開始させたらカウントが動くように画面の中で動けることを状態を持っているという。
・反してStatelessWidgetは状態を持たないWidgetのこと。テキストやアイコンなど画面の中で動かない状態を指す。

画面描画タイミングについって

画面描画タイミングってなんですか。ってなる時に先ほどの説明を思い出せば、状態がなければ要素は画面に映るだけでいいが状態を持つとなると、ボタンを押したり何かを動かした際に要素が変わるタイミングがあるということになる。だからStatefullWidgetは画面描画タイミングが複数存在することになる。
じゃあどこになるのか?StatefullWidgetのタイミングは3つ

初回画面構築時 〜 初めてその画面が映し出される。StatelessWidgetはこの時のみ。
親ウィジェット更新時 〜 didUpdateWidgetにて親Widgetが変更され、再描画する。
状態更新時 〜 setStateにて状態が変わったことが通知され、再描画する。

ただ、まだ親ウィジェットと子ウィジェットについて理解し切れていないので学習を進めながら調べていく。

StatefullWidgetの流れ方

簡単に言えば画面がない状態から画面を構築し、画面が描画されて状態が変わったら再描画し、終了されたら画面が破棄される。という形になる。先ほどの3つの画面描画タイミングを合わせて考えれば、
初回画面構築時にStatefullWidgetの状態を管理する新しいstateobjectを作成。画面が作られ、
親ウィジェットの更新時や状態更新時にユーザ操作に基づいて再描画されて、ウィジェットが画面から完全に削除されたらdefunctによって破棄される。といった内容になります。

実際のコードは定義されたものが目まぐるしく巡回していて理解するのに一苦労、慣れるように頑張ります。

次回はAPI通信について見ていきます。

Discussion