[Flutter]Row内の２つのウェジェットを左右に配置するには？

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

Row内の２つのウェジェットを、それぞれ左右の端に配置する方法を紹介します。

方法

Row内の２つのウェジェットを左右に配置する方法は、２つあります。

mainAxisAlignment

１つは、引数「mainAxisAlignment」を使う方法です。

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

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

Spacer

もう１つは、Spacerを使う方法です。

具体的には、Rowの２つの要素の間に、Spacerウェジェットを配置します。

Row(
  children: [
    Widget1(),
    Spacer(),
    Widget2(),
  ],
),

まとめ

Row内の２つのウェジェットを左右に配置する方法は、次の２つです。

• Rowの引数「mainAxisAlignment」を使う方法
• Spacerを使う方法

[Flutter]Rowのchildrenを中央寄せにするには？

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

www.choge-blog.com

2021.12.30

404 NOT FOUND | ちょげぶろぐ

www.choge-blog.com

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

Rowの要素を上に寄せる方法を紹介します。

www.choge-blog.com

2021.12.30

[Flutter]Rowの高さを設定するには？

Rowの高さを設定する方法を紹介します。

www.choge-blog.com

2021.12.30