flutter-fix-layout-issues

Flutter レイアウトエラーの解決

目次

• 制約違反の診断
• レイアウトエラーの解決ワークフロー
• 例

制約違反の診断

Flutter のレイアウトは、厳格なルールに基づいて動作します。制約は下方向に伝わり、サイズは上方向に伝わります。位置は親が設定します。 この調整がうまくいかない場合、通常は制約が無限であるか、子に制約がないため、レイアウトエラーが発生します。

次のエラーの特徴を使って、レイアウトの失敗を診断してください。

• "Vertical viewport was given unbounded height"：スクロール可能なウィジェット（ListView、GridView）を、制約のない垂直方向の親（Column）の中に配置すると発生します。親が無限の高さを与え、子が無限に広がろうとします。
• "An InputDecorator...cannot have an unbounded width"：TextField または TextFormField を、制約のない水平方向の親（Row）の中に配置すると発生します。テキストフィールドが、利用可能な幅を無限として自身の幅を決めようとします。
• "RenderFlex overflowed"：Row または Column の子が、親に割り当てられた制約を超えるサイズを要求すると発生します。黄色と黒の警告ストライプで視覚的に示されます。
• "Incorrect use of ParentData widget"：ParentDataWidget が、必要な祖先ウィジェットの直接の子孫ではない場合に発生します（例：Flex の外側にある Expanded、Stack の外側にある Positioned）。
• "RenderBox was not laid out"：連鎖的に発生する副次的なエラーです。このエラーは無視し、スタックトレースを上にたどって、根本的な制約違反（通常は高さまたは幅が無限であることを示すエラー）を確認してください。

レイアウトエラーの解決ワークフロー

このチェックリストをコピーして使用し、レイアウト制約違反を体系的に解決してください。

タスクの進捗状況

• アプリケーションをデバッグモードで実行し、コンソールに表示される正確なレイアウト例外を記録します。
• 主なエラーメッセージを特定します（連鎖的に発生する「RenderBox was not laid out」エラーは無視します）。
• 特定したエラーの種類に応じて、以下の修正を適用します。
  • "Vertical viewport was given unbounded height" の場合：スクロール可能な子（ListView、GridView）を Expanded ウィジェットで囲んで残りの領域を使うか、SizedBox で囲んで絶対的な高さの制約を設定します。
  • "An InputDecorator...cannot have an unbounded width" の場合：TextField または TextFormField を Expanded または Flexible ウィジェットで囲みます。
  • "RenderFlex overflowed" の場合：あふれている子を Expanded ウィジェットで囲んで収まるようにするか、Flexible ウィジェットで囲んで割り当てられた領域より小さくできるようにします。
  • "Incorrect use of ParentData widget" の場合：ParentDataWidget を、必要な親の直接の子に移動します。Expanded／Flexible が Row／Column／Flex の直接の子であることを確認します。Positioned が Stack の直接の子であることを確認します。
• Flutter のホットリロードを実行します。
• バリデーターを実行 → エラーを確認 → 修正：UI を確認し、赤／灰色のエラー画面や黄色／黒のオーバーフローストライプが解消されたことを確かめます。新たなレイアウトエラーが発生した場合は、ワークフローを繰り返します。

例

無限の高さを修正する（Column 内の ListView）

入力（エラー状態）：

// Throws "Vertical viewport was given unbounded height"
Column(
  children: <Widget>[
    const Text('Header'),
    ListView(
      children: const <Widget>[
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ],
    ),
  ],
)

出力（解決後の状態）：

// Wrap ListView in Expanded to constrain its height to the remaining Column space
Column(
  children: <Widget>[
    const Text('Header'),
    Expanded(
      child: ListView(
        children: const <Widget>[
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
        ],
      ),
    ),
  ],
)

無限の幅を修正する（Row 内の TextField）

入力（エラー状態）：

// Throws "An InputDecorator...cannot have an unbounded width"
Row(
  children: [
    const Icon(Icons.search),
    TextField(), 
  ],
)

出力（解決後の状態）：

// Wrap TextField in Expanded to constrain its width to the remaining Row space
Row(
  children: [
    const Icon(Icons.search),
    Expanded(
      child: TextField(),
    ),
  ],
)

RenderFlex のオーバーフローを修正する

入力（エラー状態）：

// Throws "A RenderFlex overflowed by X pixels on the right"
Row(
  children: [
    const Icon(Icons.info),
    const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
  ],
)

出力（解決後の状態）：

// Wrap the Text widget in Expanded to force it to wrap within the available constraints
Row(
  children: [
    const Icon(Icons.info),
    Expanded(
      child: const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
    ),
  ],
)