[Flutter]Column(カラム)自体を下に寄せる(align bottom)には？

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

Column自体を下に寄せる方法を紹介します。

方法
使用例
1. 関連

方法

Column自体を下に寄せるには、Alignウェジェットを使います。

まず、ColumnをAlignでラップします。

そして、Alignの引数「alignment」にAlignment.bottomCenterを指定します。

Align(
  alignment: Alignment.bottomCenter
  child: Column(
    children: [
      ・・・
    ],
  ),
),

これでColumn自体を下に寄せることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.green,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
  }