【Flutter】Expanded|Columnの余白いっぱいに要素を広げる

今回はExpanded の基本的な使い方を紹介します。

Expanded を使えばColumnRow で指定した要素を余白いっぱいに広げられます。

\ 世界最大級のオンライン学習サービス /

目次

Expandedの使い方

Column(
  children: [
    Container(
      height: 200,
      width: 100,
      color: Colors.red,
    ),
    Expanded(
      child: Container(
        height: 200,
        width: 100,
        color: Colors.blue,
      ),
    ),
    Container(
      height: 200,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),

Expanded でラップしたWidgetが余白いっぱいに広がります。

複数ある場合は「flex」で範囲調整

Column(
  children: [
    Container(
      height: 200,
      width: 100,
      color: Colors.red,
    ),
    Expanded(
      flex: 3,
      child: Container(
        height: 200,
        width: 100,
        color: Colors.blue,
      ),
    ),
    Expanded(
      child: Container(
        height: 200,
        width: 100,
        color: Colors.yellow,
      ),
    ),
  ],
),

複数のExpandedColumnRow の要素として存在している場合、flex で広がる範囲の割合を指定できます。

デフォルトではflex: 1 です。

一緒に読みたい

参考

  • URLをコピーしました!
目次