🔀
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)