[Flutter]Containerの配置(alignment)を変えるには？

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

Containerの配置を変える方法を紹介します。

方法

Containerの配置を変えるには、Alignウェジェットを使います。

まず、ContainerをAlignの「child」に指定します。

そして、Alignの引数「child」にContainerの配置を設定します。

配置の設定は、Alignmentクラスの次の値を使います。

Alignment.center : 中央
Alignment.centerLeft : 中央左
Alignment.centerRight : 中央右
Alignment.topCenter : 中央上
Alignment.bottomCenter : 中央下
Alignment.topLeft : 左上
Allignment.topRight : 右上
Alignment.bottomLeft : 左下
Alignment.bottomRight : 右下

これらの値のいずれかを指定することで、Containerの配置を変えることが出来ます。

Alignment(x , y)のように中心からの位置で配置を変えることもできます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.pink,
            ),
          ),
          Align(
            alignment: Alignment.topRight,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.yellow,
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Container(
              height: 100,
              width: 100,
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }