【Flutter】Row|水平方向に複数のWidgetを配置する

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

Row を使えば複数のWidgetを水平方向に配置できます。

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

目次

Rowの使い方

Row(
  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を配置できます。

要素の並びを逆順にする

TextDirection.rtl

TextDirection.ltr

要素の並びを逆順にするにはtextDirection の引数にTextDirection.rtl を渡します。

デフォルトはTextDirection.ltr です。

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

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

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

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

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

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

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

MainAxisSize.min

MainAxisSize.max

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

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

一緒に読みたい

参考

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