【Flutter】非同期処理を呼び出す場所と書き方

Flutterでの非同期処理の呼び出し場所を整理しよう！

Flutterでは「非同期処理（async / await）」を使う機会がとても多いですよね。
しかし、どこで呼び出せば正しいのか？ 迷うことはありませんか？

この記事では、図でイメージしながら整理してみましょう！

---

図でざっくり理解！

async禁止！thenで呼ぶ
┌─────────────────────────────┐
│  Widgetのライフサイクル　　　　　│
│  ├─ initState()             │
│  ├─ build()                 │
│  └─ dispose()               │
└─────────────────────────────┘
        
 async / await OK！
┌─────────────────────────────┐
│  ユーザー操作（タップなど）　　　 │
└─────────────────────────────┘

🔹 ライフサイクル内では then
🔹 ユーザー操作では async / await

これだけ覚えておけばOKです！

---

ライフサイクルで非同期を使うとき

initState に直接 async は付けてはいけません。
代わりに then を使って非同期処理を呼び出します。

@override
void initState() {
  super.initState();
  fetchData().then((value) {
    setState(() => data = value);
  });
}

ポイント：
initState はウィジェットの初期化を同期的に完了させる必要があります。
ここに async を付けると、初期化の順序が崩れる可能性があります。

ライフサイクルメソッドにasyncをつけると実行時にエラーになります。

---

タップイベントなどでは async / await でOK！

ユーザー操作時のコールバック関数では、自由に async / await を使えます。

onPressed: () async {
  final result = await fetchData();
  setState(() => data = result);
}

👆 こちらは「イベント発火 → 処理 → 結果を反映」という流れが自然なので、
await を使ったほうが可読性が高くなります。

---

まとめ

シーン	非同期処理の書き方	理由
ライフサイクル（initStateなど）	.then()	同期処理が前提だから
ユーザー操作（ボタンなど）	async / await	可読性と自然な流れ

---

覚え方：

「ライフサイクルでは then、ユーザー操作では await」

これを意識しておくと、非同期処理でハマることがぐっと減ります！