[Flutter]Rowの要素(children)を下(bottom)に寄せる(align)には？

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

Rowの要素を下に寄せる方法を紹介します。

方法
使用例

方法

Rowの要素を下に寄せるには、引数「crossAxisAlignment」を使います。

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

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

引数「crossAxisAlignment」を使えば、Rowの要素を下に寄せることが出来ます。

crossAxisAlignmentにCrossAxisAlignment.endを指定しても下に寄らないことがあります。

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

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          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,
              ),
            ),
          ],
        ),
      ),
    );
  }