flutter-use-column-row-first

まず Flutter では Column と Row を使う

制約システムを起点に、レスポンシブな Flutter レイアウトを構築します。シンプルなフレックス構成を優先し、固定サイズやオーバーレイは、具体的な目的のためにデザイン上必要な場合にのみ導入します。

レイアウトの手順

1. 各グループが主に垂直、水平、重なり、スクロール、折り返しのどれに当たるかを判断します。
2. 垂直方向のグループには Column、水平方向のグループには Row から使い始めます。
3. build メソッドを深くネストするのではなく、小さく名前を付けたウィジェットをネストします。
4. 制約された空きスペースを配分するには、Expanded、Flexible、Spacer を使います。
5. パディング、配置、アスペクト比、制約は意図を持って追加します。
6. 狭い制約と広い制約、テキストの拡大、キーボードの表示、長いコンテンツやローカライズされたコンテンツでテストします。

ルール

• 垂直方向の流れには Column、水平方向の流れには Row を優先します。
• mainAxisAlignment、crossAxisAlignment、mainAxisSize で配置を調整します。
• 子ウィジェットが主軸上の残りのスペースの割り当て分を使い切る必要がある場合は、Expanded を使います。
• 子ウィジェットが割り当て分より少ないスペースを使ってもよい場合は、Flexible を使います。
• flex は比例配分を表す場合にのみ使います。flex: 2 の子ウィジェットは、flex: 1 の兄弟ウィジェットの 2 倍の空きスペースを受け取ります。
• 兄弟ウィジェットの間に柔軟な間隔を設ける場合は Spacer を使います。意図的に固定間隔を設ける場合は SizedBox を使います。
• Row 内で、可変幅のコンテンツが兄弟ウィジェットにスペースを譲る必要がある場合は、Expanded または Flexible で囲みます。
• 垂直方向のコンテンツがビューポートを超える可能性がある場合は、ListView または別のスクロール可能なウィジェットを使います。Column はスクロールしません。
• 水平方向の子ウィジェットを縮小したりオーバーフローさせたりせず、次の行に折り返す場合は Wrap を使います。
• 使用可能なスペースに応じて構成自体を変更する必要がある場合は、LayoutBuilder、ブレークポイント、またはアダプティブウィジェットを使います。
• コンテンツをシステム領域と重ならないようにする必要がある場合は、SafeArea を使います。

硬直したレイアウトを避ける

デフォルトのレイアウト手段として、次のものを避けます。

• ハードコードした Positioned 座標を使う Stack
• 画面サイズを想定した幅や高さをハードコードした Container、SizedBox、または ConstrainedBox
• 通常のドキュメントフローを模擬するために使うオフセット、変換、マージン
• モックアップからコピーした画面サイズ

次のような具体的な目的がある場合は使います。

• 実際に視覚的な重なりが必要な場合、バッジ、フローティングコントロール、固定する装飾
• タッチターゲットの最小サイズ、アイコンサイズ、サムネイル、サイズ制限のあるメディア
• 意図的に設定する読みやすさのための最大幅
• アスペクト比の要件
• プラットフォームまたはデザインシステムの定数

目的が明らかでない場合は、コードの構造や簡潔なコメントで目的を示します。

制約の安全性

• Expanded と Flexible は、Row、Column、または Flex の配下でのみ使います。
• 非制限の主軸にゼロ以外の flex を使わないでください。垂直方向のスクロール可能なウィジェットでは、垂直方向の Expanded または Flexible を削除するか、意味のある有限の制約を設定します。
• 外側の Column の残りの高さを使う必要があるネストされた Column は、内側の Column を Expanded で囲んで修正します。
• オーバーフローが発生した場合は、クリッピングや小さな固定サイズを追加する前に、制約と可変コンテンツを調べて原因を特定します。
• 正当に使用可能なスペースを超えるコンテンツには、スクロールを優先します。

推奨パターン

Padding(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      const Header(),
      const SizedBox(height: 16),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Flexible(flex: 2, child: PrimaryContent()),
            const SizedBox(width: 16),
            const Flexible(child: SecondaryContent()),
          ],
        ),
      ),
      const SizedBox(height: 16),
      const Actions(),
    ],
  ),
)

狭い画面で水平方向のコンテンツを使いやすい状態に保てない場合は、ブレークポイントでこの構成を変更します。単に押し縮めるだけにしないでください。

ビジュアルリファレンス

モックアップをネストされたフレックスレイアウトに分解する際は、次の図を確認してください。

• Pavlova の Row と Column のレイアウト は、垂直方向のコンテンツ用 Column と画像を含む、全体を構成する水平方向の Row を示しています。
• ネストされた Row と Column の図 は、評価とアイコンの小さなグループを、ネストされた Row および Column ウィジェットに分解する方法を示しています。

図は構造上の参考として使い、固定ピクセルのテンプレートとして使わないでください。

検証

• サポート対象のビューポートサイズで RenderFlex のオーバーフローが発生しないことを確認します。
• テキストが意図どおりに折り返される、または切り詰められることを確認します。
• 柔軟な子ウィジェットが境界のある制約を受け取ることを確認します。
• スクロール可能なコンテンツに引き続きアクセスできることを確認します。
• 固定サイズや Stack または Positioned の使用に、明確な設計上の理由があることを確認します。

参考資料

• Flutter レイアウトガイド
• Column API
• Expanded API
• Flexible.flex API