Flutter開発中に「setState() or markNeedsBuild() called during build」というエラーに遭遇したことはありませんか？このエラーは、ウィジェットのビルド中に状態を変更しようとした際に発生します。本記事では、このエラーの原因と効果的な解決方法について詳しく解説します。

エラーの原因

このエラーは主に以下の状況で発生します：

1. `build`メソッド内で直接`setState()`を呼び出している

2. `build`メソッド内で非同期処理を行い、その結果を元に状態を更新しようとしている

3. 親ウィジェットの再構築中に子ウィジェットの状態を変更しようとしている

解決方法

1. `build`メソッド外で状態更新を行う

`build`メソッド内で直接状態を更新するのではなく、`initState()`や`didChangeDependencies()`などのライフサイクルメソッドを使用しましょう。

@override
void initState() {
  super.initState();
  // ここで状態を初期化する
}

2. `Future.microtask`を使用する

非同期処理の結果を元に状態を更新する必要がある場合は、`Future.microtask`を使用して次のフレームで更新を行います。

@override
void initState() {
  super.initState();
  Future.microtask(() {
    setState(() {
      // 状態を更新する
    });
  });
}

3. `WidgetsBinding.instance.addPostFrameCallback`を使用する

ウィジェットツリーの構築が完了した後に処理を実行したい場合は、`WidgetsBinding.instance.addPostFrameCallback`を使用します。

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      // 状態を更新する
    });
  });
}

4. 条件付きウィジェットの使用

状態に基づいて異なるウィジェットを表示したい場合は、条件付きウィジェットを使用します。

@override
Widget build(BuildContext context) {
  return _isLoading 
    ? CircularProgressIndicator() 
    : YourWidget();
}

5. `StatefulBuilder`の活用

ダイアログやボトムシートなど、局所的な状態管理が必要な場合は`StatefulBuilder`を使用します。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        return AlertDialog(
          // ダイアログの内容
        );
      },
    );
  },
);

まとめ

「setState() or markNeedsBuild() called during build」エラーは、Flutterアプリケーションの状態管理において頻繁に遭遇する問題です。適切なライフサイクルメソッドの使用、非同期処理の適切な扱い、そして条件付きウィジェットの活用により、このエラーを効果的に回避することができます。

これらの解決策を実践することで、より安定したFlutterアプリケーションの開発が可能になります。エラーの根本的な原因を理解し、適切な対処法を選択することが、スムーズな開発プロセスの鍵となります。