setStateは、StatefulWidgetの中で値が変わったことをFlutterに伝えるためのメソッドです。初心者がFlutterの状態管理を理解する最初の一歩になります。
この記事の結論
setStateは「値を変える処理」と「画面を更新してほしい」という通知をまとめるために使います。小さな画面内の状態ならsetStateで十分です。
setStateの基本形
setState(() {
count++;
});ボタンで表示を更新する
class LikeButton extends StatefulWidget {
const LikeButton({super.key});
@override
State<LikeButton> createState() => _LikeButtonState();
}
class _LikeButtonState extends State<LikeButton> {
bool liked = false;
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(liked ? Icons.favorite : Icons.favorite_border),
onPressed: () {
setState(() {
liked = !liked;
});
},
);
}
}非同期処理のあとに使う
API取得など非同期処理の後にsetStateする場合、Widgetがまだ画面にあるかを確認します。処理中に画面を閉じると、破棄後にsetStateしてエラーになることがあります。
Future<void> load() async {
final result = await Future.delayed(
const Duration(seconds: 1),
() => "完了",
);
if (!mounted) return;
setState(() {
message = result;
});
}setStateで管理しすぎない
画面内だけで完結する小さな状態はsetStateで十分です。複数画面で共有する状態、APIキャッシュ、認証状態などはProviderやRiverpodへ分けると管理しやすくなります。
実装後に確認すること
- setStateの中で状態を変更しているか
- 非同期処理後にmountedを確認しているか
- build内でsetStateを呼んでいないか
- 共有状態までsetStateに詰め込んでいないか
よくあるつまずき
- 値だけ変更してsetStateを忘れる
- build中にsetStateして無限ループにする
- 非同期処理後に破棄済みWidgetへsetStateする
- 状態が増えすぎても1つのStateに置き続ける
次に読む記事
- Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。
- Dart async awaitの使い方｜Futureを順番に待つ基本を初心者向けに解説 — Dartのasync/awaitを初心者向けに解説します。Futureとthenの関係、awaitで待つ書き方、try-catch、Future.wait、Flutterでローディング表示につなげる考え方を整理します。
- Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
まとめ
setStateはFlutterの画面更新を理解する基本です。小さな状態から始め、非同期処理や共有状態が増えたら状態管理ライブラリへ進みましょう。