[Flutter]Column(カラム)のchildren(チルドレン)を中央寄せ(center alignment)にするには？

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

Columnのchildrenを中央寄せにする方法を紹介します。

方法
使用例

方法

Columnのchildrenを中央寄せにするには、引数「mainAxisAlignment」を使います。

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

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
  ・・・・
   ],
),

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 100,
            color: Colors.blue,
            margin: EdgeInsets.symmetric(vertical: 10),
          ),
          Container(
            height: 100,
            color: Colors.green,
            margin: EdgeInsets.symmetric(vertical: 10),
          ),
          Container(
            height: 100,
            color: Colors.yellow,
            margin: EdgeInsets.symmetric(vertical: 10),
          ),
        ],
      ),
    );
  }