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.'),
    ),
  ],
)