[Flutter]Rowの要素を右寄せにするには？

どうも、ちょげ(@chogetarou)です。

Row内のウェジェットを右に寄せて配置する方法を紹介します。

方法

Rowの要素を右寄せにするには、引数「mainAxisAlignment」を使います。

具体的には、Rowの引数「mainAxisAlignment」に「MainAxisAlignment.end」を指定します。

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    ・・・
  ],
),

引数「mainAxisAlignment」を使うことで、Rowの要素を右に寄せて配置することが出来ます。

使用例

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
    ),
  ],
),

[Flutter]Rowに区切り線を表示するには？

Rowに区切り線を表示する方法を紹介します。

www.choge-blog.com

2021.12.02

[Flutter]TextFormFieldをRowウェジェットで使うには？

TextFormFieldをRowウェジェットで使う方法を紹介します。

www.choge-blog.com

2021.12.10

[Flutter]Rowの要素を均等配置にするには？

Rowの要素を均等に配置する方法を紹介します。

www.choge-blog.com

2021.12.02

[Flutter]Rowの背景色を設定するには？

Rowの背景色を設定する方法を紹介します。

www.choge-blog.com

2021.12.01