[Flutter]Rowの要素(children)を縦方向(vertically)の真ん中(center)に寄せる(aligne)方法

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

Rowの要素を縦方向の真ん中に寄せる方法を紹介します。

方法
使用例

方法

Rowの要素を縦方向の真ん中に寄せるには、引数「crossAxisAlignment」を使います。

具体的には、Rowの引数「crossAxisAlignment」にCrossAxisAlignment.centerを指定します。

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    ・・・
  ],
),

引数「crossAxisAlignment」を使えば、Rowの要素を縦方向の真ん中に寄せることが出来ます。

crossAxisAlignmentにCrossAxisAlignment.centerを指定しても真ん中に寄らないことがあります。

この場合は、SizedBoxやContainerで高さを設定する必要があります。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                color: Colors.blue,
                height: 100,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                height: 100,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.pink,
                height: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }