【お知らせ】みんプロ式Flutter講座は2026年4月末をもって新規販売を終了いたします。詳しくはこちら →
[Flutter]ExpandedとFlexibleの違いとは
このページには広告が含まれる場合があります。
Flutterで、同じ行（Row）、列（Column）内に並べられたWidgetの大きさを調整できる「Expanded」というWidgetがあります。
Expandedを使うと、それを包んでいる親のWidgetの大きさが変わっても、
・上の例では、画面の残り枠いっぱいにWidgetを拡げてくれるし、
・下の例では、「flex」属性を使うことによって、そのWidgetの大きさを絶対値ではなくて、画面幅に対する割合（比）で決めることができます。
API docs for the Expanded class from the widgets library, for the Dart programming language.
一方、同じような役割を持つWidgetに「Flexible」というのがあり、「flex」属性を使うことでExpandedと同じことをやってくれます。
では、ExpandedとFlexibleは全く同じなのかというとそうではなくて、
「Flexible」の方は、「Expanded」と違って、FlexibleでくるんだWidgetを画面の残り枠いっぱいに拡げることを強制しない
という特徴があります。
すなわち、Flexibleの方は「fit」属性を持っていて、これを「FlexFit.loose」にすることによって、画面の残り枠いっぱいに拡げることを強制しないようにできます。
API docs for the Flexible class from the widgets library, for the Dart programming language.
実は、Expandedは、Flexibleクラスを継承し、この「fit」属性が「FlexFit.tight」にしたクラスです。つまり、Flexibleの特別な形がExpandedというわけですね。
（詳しくは、以下の動画で解説していますので、よろしければご覧ください）
