【基本Widget】FlutterのStatelessWidgetとStatefulWidgetの使い方をご紹介！

今回はFlutterでは画面イメージの基本となる、
StatelessWidgetとStatefulWidgetについて、概要や使い方をご説明します。

StatelessWidgetとStatefulWidget

まず、StatelessWidgetやStatefulWidgetのWidget（ウィジェット）とは、
画面やボタン、テキストボックスなど画面上に表現するためクライアントのクラスのことです。

FlutterはWidgetを使ってアプリの機能やデザインを表現します。

Widgetのうち、
　値の状態を保持しないWidget → StatelessWidget、
　値の状態を保持するWidget　 → StatefulWidget
と分けられます。

アプリの中に、常に表示される情報が変化しない要素と、
ユーザーの操作により表示されるものが変化する要素が存在します。

常に表示される情報が変化しない要素
・タイトルバー
・アイコン
・編集不可のテキストフィールド、etc
→これらは１度描写されると変化されません

表示されるものが変化する要素
・カウンター表示
・ログイン状態
・編集可のテキストフィールド、etc
→これらは内容が変化した場合、再描写されます

以下はStatelessWidgeのコードです。
アプリの中心に指定のテキストフィールドを表示させる画面です。

中心のテキストフィールドは変更されることは無く、再描写されません。

以下はStatefulWidgetのコードです。
アプリの中心にカウンターがあり、アプリ画面上のボタンをクリックすると
カウンターが＋１されます。

このカウンターはボタンが押される度に内容が動的に変化します。
これが「値の状態を持っている」ということです。

また、Widgetの持っている値の状態のことを、Stateと言います。

上記のStatefulWidgetのコードを見るとMyAppクラスと_MyAppStateクラスで構成されています。

MyAppクラス
　このクラスはStatefulWidgetです。
　MyAppクラスは、_MyAppStateクラスを呼び出しています。

_MyAppStateクラス
　このクラスはMyAppクラスから呼び出されます。
　メインのカウンターの画面を設計しており、ここではカウンターのStateを管理しています。　

実際に再描写されるのは_MyAppStateクラス（State）だけで、
MyAppクラス（StatefulWidget）は１度定義されると変更されません。

MyAppクラスは静的な画面の設定や設計を行っており、
実際に動的に再描写を行う画面は_MyAppStateクラスです。

今回は、１つの状態の変化について説明していますが、実際にアプリを作成する際には、
様々な状態情報を複数の画面で表現させる必要があります。

しかし、StatefulWidgetでは、複数の画面で利用するグローバルな状態を管理することが
難しいという問題があります。

そこで、グローバルな状態管理も簡単に行える”Riverpod”がよく使われています！
Riverpodについては以下の記事をご参考ください。

アプリでは、ほぼ必ずと言っていい程、必要になってくる状態管理ですが、
クライアント部分の概念となるため、初めての方は少し理解が難しいと思います。

この記事が少しでも理解の助けになれば、幸いです。
最後までお読みいただきありがとうございました！！