[Flutter]FlexibleとExpandedの違いについて個人的まとめ

FlexibleとExpandedの違いとは

Flexible と Expanded はどちらも子要素を拡張するWidgetではあるが

FlexibleとExpandedの違いとはズバリ、

• Flexible:子要素のサイズが親の描画領域より小さければ変化しない

• Expanded:子要素のサイズが親の描画領域より小さければ最大まで引き伸ばされる

例

• まず横幅 300, 縦幅 300 の Container(親要素)を用意する。

• ここに Row(Columnでも同意) の中に Expanded で囲んだ横幅 100, 縦幅 100 の ColoredBox(子要素) を入れる

Expanded の場合

以下のようにExpandedの場合は子要素の横幅は 100 だが、親要素の描画領域の最大である 300 まで引き伸ばされる。

Flexible の場合

以下のようにFlexibleの場合は子要素のサイズが親の描画領域より小さければ変化しない。

最大描画領域よりも子要素が大きい場合

子要素が親の描画領域を超えていた場合は

その最大サイズ(親要素の最大サイズ)に収まるようになる。

---

[まとめ]

• 子要素範囲が親要素の範囲以下の場合は

  • Flexible:子要素のサイズが親の描画領域より小さければ変化しない

  • Expanded:子要素のサイズが親の描画領域より小さければ最大まで引き伸ばされる

• 子要素範囲が親の描画領域を超えていた場合は

  • その最大サイズ(親要素の最大サイズ)に収まるようになる。

---

以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

参考記事