[Flutter]ExpandedとFlexibleの違いとは

このページには広告が含まれる場合があります。

 

Flutterで、同じ行(Row)、列(Column)内に並べられたWidgetの大きさを調整できる「Expanded」というWidgetがあります。

Expandedを使うと、それを包んでいる親のWidgetの大きさが変わっても、

・上の例では、画面の残り枠いっぱいにWidgetを拡げてくれるし、

・下の例では、「flex」属性を使うことによって、そのWidgetの大きさを絶対値ではなくて、画面幅に対する割合(比)で決めることができます。

一方、同じような役割を持つWidgetに「Flexible」というのがあり、「flex」属性を使うことでExpandedと同じことをやってくれます。

では、ExpandedとFlexibleは全く同じなのかというとそうではなくて、

「Flexible」の方は、「Expanded」と違って、FlexibleでくるんだWidgetを画面の残り枠いっぱいに拡げることを強制しない

という特徴があります。

すなわち、Flexibleの方は「fit」属性を持っていて、これを「FlexFit.loose」にすることによって、画面の残り枠いっぱいに拡げることを強制しないようにできます。

実は、Expandedは、Flexibleクラスを継承し、この「fit」属性が「FlexFit.tight」にしたクラスです。つまり、Flexibleの特別な形がExpandedというわけですね。

(詳しくは、以下の動画で解説していますので、よろしければご覧ください)

こんな記事も読まれています

イチオシ

40代から感じるモヤモヤを解消できる 無料動画セミナー

あすコロ式・40代からの人生アップデート【新】戦略

アラフォーでキャリアを失ったバリバリ左脳人間・スピリチュアル耐性ゼロの元金融マンが、人生どん底から立ち上がる過程でたどり着いた「人生再構築メソッド」。40代・50代を過ぎて多くの人が感じる「このままでいいんかな?」「この先どうしたらいいかわからない」というモヤモヤを解消し、人生後半戦をアップデートさせる【新】戦略。

今すぐ無料で動画セミナー(80分)を見る ▶

TOP