【Flutter】Expandedの基本的な使い方

Expanded logo
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • Expanded Widgetの基本的な使い方が知りたい
Expanded (Flutter Widget of the Week)

Expandedを使えば、RowやColumnなどのメイン軸の余白を埋めることができます。

\ Widgetの扱い方が不安な方はこちら! /

スポンサーリンク

Expandedの基本となるプロパティ

  • child:Column、Rowなどのメイン軸の余白を埋めるWidgetを指定
  • flex:余白を埋める比率を指定

child

Column(
  children: [
    MyWidget(),
    Expanded(
      child: MyWidget(),
    ),
    MyWidget(),          
  ],
),

childプロパティでColumnやRowのmain axisの余白を埋めるWidgetを指定します。(Columnの場合はy軸、Rowの場合はx軸がメイン軸)

//上の画像のコード
Column(
  children: [
    Container(
      color: Colors.red,
      height: 200,
      width: 200,
    ),
    Expanded(
      child: Container(
        color: Colors.yellow,
        width: 200,
    ),
    Container(
      color: Colors.blue,
      height: 200,
      width: 200,
    ),          
  ],
),

このコードの場合、黄色と青色のContainerのメイン軸の余白となるスペースをExpandedでラップした黄色のContainerで埋めています。

flex

Column(
  children: [
    Expanded(
      child: MyWidget(),
      flex: 2,
    ),
    Expanded(
      child: MyWidget(),
      flex: 1,
    ),
)

複数のExpandedを同じColumnやRowで使う場合、flexプロパティを使ってメイン軸の余白を埋める比率を指定できます。

flex あり(2:1)
flex なし

左の画像では、Expandedを使用した赤色のContainerのflexを2、黄色のContainerのflexを1にしています。右の画像では、flexがないので余白が均等に分けられています。

一部のExpandedだけにflexがある場合

Column(
  children: [
    Expanded(
      child: MyWidget(),
      flex: 2,
    ),
    Expanded(
      child: MyWidget(),
    ),
)
オレンジはflex:2 緑はflexなし

複数のExpandedが存在しflexのあるExpandedとflexのないExpandedがあった場合、flexのないExpandedが余白を埋める比率は、flexのあるExpandedに対し、1となります。

タイトルとURLをコピーしました