flutter/flutter-fix-layout-issues

flutter-fix-layout-issues は何をしますか？

Flutterのレイアウトエラー（オーバーフロー、無制約の制約）をDartとFlutter MCPツールを使って修正します。「RenderFlex overflowed」や「Vertical viewport was given unbounded height」などのレイアウト問題に対処する際に使用します。

概要

このスキルは、Flutterアプリケーションで発生する一般的なレイアウトエラーを自動的に検出し、修正するためのものです。Flutterのレイアウトシステムは強力ですが、複雑なため、RenderFlex overflowedやVertical viewport was given unbounded heightといったエラーが頻繁に発生します。このスキルを使うことで、開発者は手動でのデバッグ作業を減らし、迅速に問題を解決できます。

対応エラー

• RenderFlex overflowed - 子ウィジェットがFlexボックスの利用可能スペースを超えた場合
• Vertical viewport was given unbounded height - スクロール可能なビューポートが高さの制約を受けない場合
• その他、BoxConstraintsやRenderBoxに関連するレイアウトエラー

使用方法

1. エラーログを取得します（通常はFlutterアプリの実行中にコンソールに表示されます）。
2. このスキルを呼び出し、エラーメッセージを入力として提供します。
3. スキルはエラーを解析し、修正案を生成します。
4. 生成された修正をコードに適用します。

動作環境

• DartおよびFlutter SDKがインストールされていること
• Flutter MCPツールが利用可能であること
• Flutter開発環境（Android Studio、VS Code、IntelliJ IDEAなど）

例

エラーメッセージ:

RenderFlex overflowed: 200 pixels on the bottom.

修正案:

// 該当のRowまたはColumnをExpandedまたはFlexibleでラップする
Row(
  children: [
    Expanded(
      child: Container(
        // 元のウィジェット
      ),
    ),
  ],
)

注意事項

• このスキルはあくまで修正案を提供するものであり、すべてのケースで完璧な修正を保証するものではありません。
• 修正を適用する前に、必ず手動でコードを確認し、テストを行ってください。
• Flutterのバージョンによっては、エラーの解釈が異なる場合があります。