[Flutter]Containerの「child」の位置(position)を変えるには？

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

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

方法

Containerの「child」の位置を変えるには、引数「alignment」を使います。

引数「alignment」に「Alignment」クラスの値を指定することで位置を変えることが出来ます。

Alignmentの値には、次のようなものがあります。

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

これらの値を指定することで、Containerのchildの位置を変えることが出来ます。

例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              alignment: Alignment.center,
              height: 200,
              width: 200,
              color: Colors.pink,
              child: Text('Center'),
            ),
            Container(
              alignment: Alignment.bottomLeft,
              height: 200,
              width: 200,
              color: Colors.yellow,
              child: Text('bottomLeft'),
            ),
            Container(
              alignment: Alignment.topRight,
              height: 200,
              width: 200,
              color: Colors.green,
              child: Text('topRight'),
            ),
          ],
        ),
      ),
    );
  }