[Flutter]Rowの配置を設定するには？

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

Rowの要素の配置を設定する方法を紹介します。

方法

Rowの要素の配置を設定をするには、引数「mainAxisAlignment」と引数「crossAxisAlignment」を使います。

• mainAxisAlignment：Rowの横方向の配置
• crossAxisAlignment：Rowの縦方向の配置

引数「mainAxisAlignment」にはMainAxisAlignmentの値、引数「crossAxisAlgnment」にはCrossAxisAlignmentの値を指定します。

Row(
  mainAxisAlignment: MainAxisAlignment.〇〇, //MainAxisAlignmentの値を指定
  crossAxisAlignment: CrossAxisAlignment.〇〇, //CrossAxisAlignmentの値を指定
  children: [
    ・・・
  ],
),

それぞれの引数に指定した値によって、Rowの要素の配置が決まります。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }