【Flutter】Column|垂直方向に複数のWidgetを配置する

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

Column を使えば複数のWidgetを垂直方向に配置できます。

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

目次

Columnの使い方

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

children の引数に<Widget>[] を渡して複数のWidgetを配置できます。

要素の並びを逆順にする

VerticalDirection.up

VerticalDirection.down

要素の並びを逆順にするにはverticalDirection の引数にVerticalDirection.up を渡します。

デフォルトはVerticalDirection.down です。

メイン軸(垂直方向)の要素の配置を指定

mainAxisAlignment の引数にMainAxisAlignment を渡してメイン軸の要素の配置を指定できます。

デフォルトはMainAxisAlignment.start です。

クロス軸(水平方向)の要素の配置を指定

crossAxisAlignment の引数にCrossAxisAlignment を渡してクロス軸の要素の配置を指定できます。

デフォルトはCrossAxisAlignment.center です。

メイン軸の余白を最小にする

MainAxisSize.min

MainAxisSize.max

mainAxisSizeの引数にMainAxisSize.min を渡すことで余白を最小にできます。

イメージ画像のグレー部分が余白です。

一緒に読みたい

参考

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