[Flutter]Columnの要素の配置を設定するには？

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

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

方法

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

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

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

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

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

使用例

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