【Flutter】Align|AlignmentでWidgetを好きな位置に配置

今回はAlign の使い方を紹介します。

AlignAlignment とセットで使用し、指定したWidgetを好きな位置に配置できます。

\ 世界最大級のオンライン学習サービス /

目次

Alignの使い方

Align(
  alignment: Alignment.topLeft,
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
  ),
),

指定した位置に配置したいWidgetをAlign でラップします。ラップしたWidgetの位置はalignment の引数にAlignment を渡して指定できます。

Alignmentの使い方

方法1:x軸とy軸を指定して配置

From Youtube|Align (Flutter Widget of the Week)
Align(
  alignment: Alignment(0.5, 0.5),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
  ),
),

Alignment の第一引数でx軸、第二引数でy軸の値を指定してWidgetを配置できます。

方法2:Alignmentの定数で配置

Alignment.bottomCenter中央下Alignment(0.0, 1.0)
Alignment.bottomLeft左下Alignment(-1.0, 1.0)
Alignment.bottomRight右下Alignment(1.0, 1.0)
Alignment.center中央Alignment(0.0, 0.0)
Alignment.centerLeft中央左Alignment(-1.0, 0.0)
Alignment.centerRight中央右Alignment(1.0, 0.0)
Alignment.topCenter中央上Alignment(0.0, -1.0)
Alignment.topLeft Ali左上Alignment(-1.0, -1.0)
Alignment.topRight右上Alignment(1.0, -1.0)
Align(
  alignment: Alignment.bottomRight,
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
  ),
),

Alignment の定数を使って配置することもできます。

参考

  • URLをコピーしました!
目次