今回はFlutterでは基本となる、StatelessWidgetとStatefulWidgetについて説明します。
StatelessWidgetとStatefulWidget
まず、StatelessWidgetやStatefulWidgetのWidget（ウィジェット）とは、
アプリの画面やボタン、テキストボックスなどの要素を構成するクラスのことです。
FlutterはWidgetを使ってアプリの機能やデザインを表現します。
Widgetのうち、
値の状態を保持しないWidget → StatelessWidget、
値の状態を保持するWidget → StatefulWidget
と分けられます。
値の状態ほ保持するとはどういうことか？
アプリの中に、常に表示される情報が変化しない要素と、
ユーザーの操作により表示されるものが変化する要素が存在します。
常に表示される情報が変化しない要素
・タイトルバー
・アイコン
・編集不可のテキストフィールド、etc
→これらは１度描写されると変化されません。
表示されるものが変化する要素
・カウンター表示
・ログイン状態
・編集可のテキストフィールド、etc
→これらは内容が変化した場合、再描写されます。
StatelessWidgeのコード
以下はStatelessWidgeのコードです。
アプリの中心に指定のテキストフィールドを表示させる画面です。
中心のテキストフィールドは変更されることは無く、再描写されません。
StatefulWidgetのコード
以下はStatefulWidgetのコードです。
アプリの中心にカウンターがあり、アプリ画面上のボタンをクリックすると
カウンターが＋１されます。
このカウンターはボタンが押される度に内容が動的に変化します。
これが「値の状態を持っている」ということです。
また、Widgetの持っている値の状態のことを、Stateと言います。
StatefulWidgetについて
上記のStatefulWidgetのコードを見るとMyAppクラスと_MyAppStateクラスで
構成されています。
MyAppクラス
このクラスはStatefulWidgetです。
MyAppクラスは、_MyAppStateクラスを呼び出しています。
_MyAppStateクラス
このクラスはMyAppクラスから呼び出されます。
メインのカウンターの画面を設計しており、ここではカウンターのStateを管理しています。
実際に再描写されるのは_MyAppStateクラス（State）だけで、
MyAppクラス（StatefulWidget）は１度定義されると変更されません。
MyAppクラスは静的な画面の設定や設計を行っており、
実際に動的に再描写を行う画面は_MyAppStateクラスです。
状態管理について
今回は、１つの状態の変化について説明していますが、実際にアプリを作成する際には、
様々な状態情報を複数の画面で表現させる必要があります。
しかし、Flutterの標準的なWidgetではStatefulWidgetでは、
複数の画面で利用するグローバルな状態を管理することが難しいという問題があります。
そこで、グローバルな状態管理も簡単に行える”Riverpod”があります。
Riverpodについては以下の記事をご参考ください。
最後に
アプリでは、ほぼ必ずと言っていい程、必要になってくる状態管理ですが、
私はDBやファイルと言ったデータとは別の概念となるため、少しややこしく感じました。
この記事が少しでも理解の助けになれば、幸いです。
最後までお読みいただきありがとうございました！！