[Flutter]Column(カラム)の要素(children)を上と下(top and bottom)に表示するには？

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

Columnの要素を上と下に表示する方法を紹介します。

方法
使用例

方法

Columnの要素を上と下に表示するには、Spacerを使います。

具体的には、Columnの要素の上と下の境目にSpacerウェジェットを配置します。

Column(
  children: [
    TopWidget(),
    Spacer(),
    BottomWidget(),
  ],
),

Spacerを使うことで、Columnの要素を上と下に表示することが出来ます。

Columnの要素が２つだけの場合は、引数「mainAxisAlignment」を使うことでも上と下に表示することが出来ます。

具体的にいうと、引数「mainAxisAlignment」にMainAxisAlignment.spaceBetweenを指定します。

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

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.blue,
          ),
          Container(
            height: 100,
            color: Colors.green,
          ),
          Spacer(),
          Container(
            height: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 100,
            color: Colors.pink,
          ),
        ],
      ),
    );
  }