🔀

StatefulWidget vs StatelessWidget

状態の有無によるウィジェット選択基準

StatelessWidgetは一度ビルドされると内部状態が変わらないウィジェットです。Text、Icon、Containerなどが代表的です。

StatefulWidgetはsetState()を呼び出してUIを更新できるウィジェットです。チェックボックス、スライダー、フォーム入力などユーザー操作があるUIに使用します。

モダンFlutterでは状態管理ライブラリ(Provider、Riverpod)を使ってStatefulWidgetの使用を最小化することが推奨されます。

実装ステップ

1

UIが外部入力に応じて変わるか判断 → StatelessまたはStatefulを決定

2

StatefulWidget使用時、StateクラスでsetState()呼び出し

3

initState()で初期化、dispose()でリソース解放

4

可能な限り状態管理ライブラリに置き換えてStatefulWidgetを削減

メリット

  • StatelessWidgetは軽量でテストしやすい
  • StatefulWidgetはローカル状態管理に直感的

デメリット

  • setState()は該当ウィジェット全体をrebuild → パフォーマンス注意
  • 複雑な状態をStatefulWidgetだけで管理するとコードが複雑に

ユースケース

カウンター、トグル、フォーム入力等のインタラクティブUI 情報表示専用カード、ラベル(StatelessWidget)