このサイトはアドセンスやアフィリエイト広告を利用しています

Flutter&Dart

🧠 Flutter入門：なんで setState を使うときは @override を3回も書くの？

Flutterでアプリを作っていると、「カウントを増やす」「チェックをつける」など、中身が変わる処理をしたくなりますよね？

そのとき出てくるのが……
そう！　setState()！

でも、「これを使うには**@override を3回も書かないといけない**」って思ったこと、ありませんか？
今回は、その理由を 小学生でもわかるように やさしく説明します！

🧩 setState() はなにをしてるの？

dartコピーする編集するsetState(() {
  // なにかの状態を変える（例：count += 1）
});

これは、

「今の状態が変わったから、画面も新しく描き直してね！」
というお願いをFlutterにしているものです。

👫 でも、Flutterでは“状態”と“画面”は別の場所にある

Flutterは、

  • 見た目を描く人（Widget）
  • 中身（状態）を覚えてる人（State）

を分けて作るんです。

これが、StatefulWidget（設計図）と State（実体）という2つのクラスに分かれている理由！

✨ 3つの @override の正体

では、実際に setState() を使いたいとき、よく出てくる @override を見てみましょう👇

① createState()：このウィジェットにどんな状態があるか教える

dartコピーする編集する@override
State<MyWidget> createState() => _MyWidgetState();

📦 設計図（StatefulWidget）が「このキッチン（State）を使ってね！」と伝えるところ。

② initState()：初めて画面ができるときに1回だけ呼ばれる

dartコピーする編集する@override
void initState() {
  super.initState();
  // 最初の準備（変数の初期化など）をする場所
}

🎬 「これからお仕事始めます！」の準備タイム。

③ build()：今の状態に合わせて、画面を描く

dartコピーする編集する@override
Widget build(BuildContext context) {
  return Text('こんにちは');
}

🖼️ お客さんに見せるメニューを描くところ。setState() のたびにここが呼ばれる！

🎯 まとめ：なんで setState に3回 @override が出てくるの？

@override の場所なにをしてる？
createState()どの「状態クラス（キッチン）」を使うか教える
initState()最初の準備をする
build()状態に合わせて画面を描く（何度も呼ばれる）

💡 ポイント

  • setState() は State クラスの中でしか使えない！
  • だから、StatefulWidget と State に分けて書く必要がある！
  • その結果、@override を 3回書くのがふつうになる！

-Flutter&Dart