[Flutter]Containerのchildの位置をオフセット(offset)っぽく指定するには？

Flutter

2021.10.31

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

Containerのchildの位置をオフセットっぽく指定する方法を紹介します。

方法

Containerのchildの位置をオフセットっぽく指定するには、Containerの引数「alignment」を使います。

具体的には、alignmentに「Alignment()」を指定します。

そして、Alignment()の第１引数に横方向、第２引数に縦方向の位置を指定します。

Container(
  alignment: Alignment(/*横方向の位置*/, /*縦方向の位置*/),
),

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              alignment: Alignment(-1.0, -1.0),
              height: 200,
              width: 200,
              child: Text(
                'Hello',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              alignment: Alignment(1.0, 0),
              height: 200,
              width: 200,
              child: Text(
                'Hello',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              alignment: Alignment(0, 1.0),
              height: 200,
              width: 200,
              child: Text(
                'Hello',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }