[Flutter]Rowを等間隔配置にするには？

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

Rowを等間隔配置にする方法を紹介します。

方法

Rowを等間隔配置にするには、引数「mainAxisAlignment」を使います。

具体的には、Rowの引数「mainAxisAlingment」に次の３つの値のいずれかを指定します。

• MainAxisAlignment.spaceBetween：端に余白なしの等間隔配置
• MainAxisAlignment.spaceAround：端に半分の余白の等間隔配置
• MainAxisAlignment.spaceEvenly：端も含めた等間隔配置

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

Rowの引数「mainAxisAlignment」に上記のいずれかの値を指定することで、Rowを等間隔配置にできます。

使用例

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