About

StatefulWidgetとStatelessWidgetの違いと使い分け

UIが変わるかどうかで決める

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)
← ウィジェットツリーとは?FlutterのUIを作る3つのツリー Flutterレイアウトの仕組み — 制約は下へ、サイズは上へ →