[Flutter]Iconウェジェットの位置(position)を変える(align)には？

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

Iconウェジェットの位置を変える方法を紹介します。

方法

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

まず、IconウェジェットをAlignのchildに指定します。

そして、Alignの引数「alignment」に次のような値を指定します。

Alignment(x, y) : 中央を中心とした座標で位置を指定
Alignment.center : 中央
Alignment.centerRight : 中央右
Alignment.centerLeft : 中央左
Alignment.topCenter : 中央上
Alignment.bottomCenter : 中央下
Alignment.topLeft : 左上
Alignment.topRight : 右上
Alignment.bottomLeft : 左下
Alignment.bottomRight : 右下

これらの値を指定することで、Iconウェジェットの位置を指定することが出来ます。

Align(
  alignment: /*位置*/,
  child: Icon(/*アイコン*/),
),

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment(-1, -1),
            child: Icon(
              Icons.flutter_dash,
              color: Colors.pink,
              size: 200,
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Icon(
              Icons.flutter_dash,
              color: Colors.blue,
              size: 200,
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Icon(
              Icons.flutter_dash,
              color: Colors.yellow,
              size: 200,
            ),
          ),
        ],
      ),
    );
  }