[Flutter]ExpandedとFlexibleの違いとは

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

blank

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

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

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

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

blank

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

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

という特徴があります。

blank

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

blank

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

blank

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

blank

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

TOP