[Flutter]Row自体を左に寄せる(align left)には？

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

Row自体を左に寄せる方法を紹介します。

方法
使用例

方法

Row自体を左に寄せるには、Alignウェジェットを使います。

まず、RowをAlignでラップします。

そして、Alignの引数「alignment」に次のいずれかの値を指定します。

Alignment.centerLeft : 中央左
Alignment.bottomLeft：左下
Alignment.topLeft : 左上

Align(
  alignment: Alignment.centerLeft, //Alignemnt.bottomLeft, Alignment.topLeft
  child: Column(
    children: [
      ・・・
    ],
  ),
),

Alignを使えば、Row自体を左に寄せることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.centerLeft,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.pink,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }