[Flutter]Rowのchildrenを等間隔かつ両端に配置するには？

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

Rowの要素を等間隔かつ最初と最後を両端に配置する方法を紹介します。

方法

Rowのchildrenを等間隔かつ両端に配置するには、引数「mainAxisAlignment」を使います。

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

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

Rowの引数「mainAxisAlignment」に「MainAxisAlignment.end」を指定することで、Rowの要素を右端に配置できます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            for (var i = 0; i < 5; i++)
              Container(
                height: 50,
                width: 50,
                color: i.isEven ? Colors.blue : Colors.pink,
              )
          ],
        ),
      ),
    );
  }