Flutterでのレイアウト制御: ExpandedとFlexibleの違いと使い方

はじめに

FlutterでUIレイアウトを構築する際、ExpandedとFlexibleはよく使われるウィジェットですが、その違いについて曖昧な理解であったため、簡単にまとめでみました。
この記事では、ExpandedとFlexibleの違いを簡潔に説明します。

Expandedの使い方

Expandedは、Flexウィジェット（RowやColumn）内で利用可能なすべてのスペースを均等に占有します。

コード例: Expanded

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

説明: 2つのContainerが垂直方向に均等にスペースを占有します。赤と緑のContainerが同じサイズで表示されます。

Flexibleの使い方

Flexibleは、flexプロパティを使って、子ウィジェットの占有するスペースの割合を指定できます。

コード例: Flexible

Column(
  children: [
    Flexible(flex: 1, child: Container(color: Colors.red)),
    Flexible(flex: 2, child: Container(color: Colors.green)),
  ],
)

説明: 2つのContainerが1:2の割合でスペースを占有します。緑のContainerは赤の2倍の高さになります。

まとめ

• Expandedは、利用可能なスペースをすべて均等に分けたいときに使用します。
• Flexibleは、ウィジェットのサイズを比率で指定したいときに使用します。

どちらもレイアウト制御に非常に役立つツールですので、適切に使い分けましょう。