Expanded：とは何か、Flutterでの動作原理

Expandedとは

Expandedは、子を受け取り、Flexコンテナ（Row、Column、Flex）内の利用可能なスペースを埋めるように強制するラッパーウィジェットです。Expandedには独自の視覚的表現はありません—子要素に渡される制約（constraints）のみを管理します。

Expandedの核心は、Flutterフレームワークが提供するFlexメカニズムです。RowやColumnが子のサイズを計算するとき、最初に非フレキシブル要素（固定サイズの通常ウィジェット）にスペースを割り当て、残りのスペースをExpandedとFlexibleの子の間にそれらのflex係数に比例して分配します。

ExpandedはFlexible.fit = FlexFit.tightを使用します。これは、Expandedの子が、自身のサイズが小さくても、割り当てられたすべてのスペースを占有しなければならないことを意味します。子が割り当てられた領域より小さくてもよいFit.looseのFlexibleとは異なり、Expandedはコンテンツを強制的に拡張します。

まとめ：Expandedは、Flutterで比例レイアウトを作成するための主要なツールです。要素が利用可能なすべての幅または高さを確実に埋める必要がある場合に使用します。

Expanded vs Flexible：主な違い

ExpandedとFlexibleはどちらもFlexコンテナ内でスペースを分配しますが、根本的に異なる動作をします。違いはfitプロパティにあり、子が利用可能なスペースより小さくなれるかどうかを決定します。

Expandedは厳格な動作モデルを持っています：そのfitはFlexFit.tightです。これは、子ウィジェットが利用可能なスペースと等しい制約を受け取ることを意味します—それ以上でもそれ以下でもありません。子が小さければ拡張され、大きければ縮小されます。FlexibleはFlexFit.looseを使用し、子要素が割り当てられたスペース内で任意のサイズになることを許可します。

実際には：Row内にflex=1のExpandedが2つある場合、それぞれが正確に半分の幅を占有します。それらをfit.looseのFlexibleに置き換えると、各子は自身のサイズが小さければ半分より小さくなる可能性があり、残りのスペースは空のままになります。

まとめ：厳格な比例レイアウトにはExpandedを使用し、子が利用可能なスペースより小さくてもよい場合はFlexibleを使用します。不明な場合はExpandedから始めてください。より予測可能な動作を提供します。

Flex係数：スペースの分配方法

Flex係数（flexパラメータ）は、Expandedが受け取る利用可能なスペースの割合を決定する数値です。デフォルトではflex=1で、すべてのExpandedの子間で均等に分配されます。

分配アルゴリズムは3つのステップで動作します。第一に：Flutterはすべての非フレキシブル子の内在サイズを計算します。第二に：残りのスペースをすべてのflex係数の合計で割ります。第三に：各Expandedは、自身のflex係数に1つのflex単位のサイズを掛けた値に等しいシェアを受け取ります。

例えば、幅300pxのRowに2つのExpandedが含まれている場合：最初がflex=2、2番目がflex=1です。空きスペース（300pxから非フレキシブル子を引いたもの）は3つの部分に分割されます。最初が2/3を受け取り、2番目が1/3を受け取ります。非フレキシブル子がない場合、最初は200px、2番目は100pxを受け取ります。

Flex係数は任意の正の整数にできます。値0は特別なケースです：flex=0のExpandedは通常の非フレキシブルウィジェットのように動作し、子のサイズに従って最小限のスペースを占有します。この動作はExpandedがない場合と同等です。

まとめ：flex係数は、柔軟なレイアウトを構築するための鍵です。等しいカラムには1:1、メインエリアとサイドバーエリアのあるパネルには2:1、狭いナビゲーションのインターフェースには3:1の比率を使用します。

Expandedを使用したコード例

例1は、3つの等しいカラムを作成するためのRowでのExpandedの基本的な使用法を示しています。

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

この例では、3つのExpanded（デフォルトでflex=1）がRowの幅を均等に分割しています。コンテナはRowによって設定された全高に拡張され、等しいシェアを占有します。このアプローチは、比例配分によるカラムベースのレイアウトを作成するのに便利です。

例2は、サイドバーとメインコンテンツを持つレイアウトを作成するために異なるflex係数を使用する方法を示しています。

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('サイドバー'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('コンテンツエリア'),
        ),
      ),
    ),
  ],
)

2番目の例は、サイドバー（25%）とメインコンテンツエリア（75%）を持つ典型的なレイアウトを作成します。flex=1とflex=3は1:3の比率を与えます。画面幅が変わると、比率は自動的に保持されます—これがレスポンシブインターフェースの基盤です。

まとめ：異なるflex係数を持つExpandedは、レスポンシブレイアウトを構築するための標準ツールです。ColumnでExpandedを組み合わせることで、水平と垂直の両方の比例配置を作成できます。

Expanded使用時の一般的な間違い

間違い1：Row、Column、Flexの外でExpandedを使用する。ExpandedをStack、ListView、または他の非Flexコンテナに直接配置すると、Flutterは「Expanded widgets must be placed inside Flex widgets」というメッセージのLayoutExceptionをスローします。解決策：親ウィジェットを確認します—Row、Column、Flexのみです。

間違い2：shrinkWrapを指定せずにListView内にExpandedを配置する。ListViewはデフォルトでスクロール方向に無限の高さを持ち、Expandedは自分のシェアを計算できません。解決策：shrinkWrap: trueを使用するか、ListViewを固定高さのSizedBoxでラップします。

間違い3：合計flexが利用可能なスペースを超える複数のExpanded。制限された幅のRowにExpandedと大きな内在サイズのウィジェットが含まれている場合、オーバーフローが発生する可能性があります。解決策：非フレキシブル子の最小サイズを確認し、必要に応じてFittedBoxまたはFlex fitを使用します。

間違い4：Row内のColumnにネストされたExpanded。Column内のExpandedがRow内に別のExpandedを含む場合、制約の競合が発生する可能性があります。解決策：ネストの深さを制限するか、中間レベルで明示的に寸法を設定するためにConstrainedBoxを使用します。

まとめ：Expandedには正しい親コンテキストが必要です。Expandedが直接Row、Column、Flexに配置されていることを常に確認し、明示的な寸法なしのネストを避けてください。