flutter-errors

Flutter エラーのスキル

このスキルでは、Flutter のよくある実行時エラーとレイアウトエラーの解決策を紹介します。

---

RenderFlex のオーバーフロー

エラー： A RenderFlex overflowed by X pixels on the right/bottom.

原因： Row または Column に、利用可能な領域よりも幅が広い、または高さが高い子ウィジェットが含まれています。

修正方法： オーバーフローしている子ウィジェットを Flexible または Expanded でラップするか、サイズを制限します。

Row(
  children: [
    Expanded(child: Text('Long text that might overflow')),
    Icon(Icons.info),
  ],
)

---

Vertical Viewport に無制限の高さが指定されている

エラー： Vertical viewport was given unbounded height.

原因： ListView（またはその他のスクロール可能なウィジェット）が、制約された高さのない Column 内に配置されています。

修正方法： ListView を Expanded でラップするか、SizedBox で固定の高さを指定します。

Column(
  children: [
    Text('Header'),
    Expanded(
      child: ListView(children: [...]),
    ),
  ],
)

---

InputDecorator に無制限の幅は指定できない

エラー： An InputDecorator...cannot have an unbounded width.

原因： TextField または類似のウィジェットが、幅の制約がないコンテキストに配置されています。

修正方法： Expanded、SizedBox、または幅の制約を与える親ウィジェットでラップします。

Row(
  children: [
    Expanded(child: TextField()),
  ],
)

---

ビルド中に setState が呼び出された

エラー： setState() or markNeedsBuild() called during build.

原因： build メソッド内で setState または showDialog が直接呼び出されています。

修正方法： ユーザー操作への応答として状態を変更するか、addPostFrameCallback を使ってフレームの描画後に処理を実行します。

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // Safe to call setState or showDialog here
  });
}

---

ScrollController が複数のスクロールビューにアタッチされている

エラー： The ScrollController is attached to multiple scroll views.

原因： 1 つの ScrollController インスタンスが、複数のスクロール可能なウィジェットで同時に共有されています。

修正方法： スクロール可能な各ウィジェットに、それぞれ専用の ScrollController インスタンスを割り当ててください。

---

レイアウトの問題をデバッグする

• DevTools の Flutter Inspector を使って、ウィジェットの制約を視覚的に確認します。
• 「Show guidelines」 を有効にして、レイアウトの境界を確認します。
• main() に一時的に debugPaintSizeEnabled = true; を追加し、レイアウトの境界を描画します。
• 制約の伝播について詳しくは、Flutter の制約に関するドキュメントを参照してください。

参考資料

• Flutter ウェブサイトの GitHub リポジトリ