Flutterで3つの要素を持つRowの中央要素を中心に配置する方法

はじめに

Flutterで開発をしていて、要素が3個のRowの中央要素を画面の真ん中に配置したい場面がたまにある。RowにはmainAxisAlignmentという整列のためのプロパティがあるが、それだと真ん中の要素を中央に配置する、というのができない場合がある。

以下のようなそれぞれの要素のサイズが異なったRowを考える。

Row(
  mainAxisAlignment: MainAxisAlignment.xxx,
  children: [
    Container(
      width: 80,
      height: 50,
      color: Colors.blue,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 120,
      height: 50,
      color: Colors.green,
    ),
  ],
),

このRowのmainAxisAlignmentをspaceAround、spaceBetween、spaceEvenlyにして要素を並べてみる。しかし、要素の大きさがバラバラなので中央の要素が左にずれて配置されてしまっている。

たまに使うUI表現なので残しておく。

解決方法

これを解決する方法としては、左右の要素をExpandedで囲むことで両側から中央の要素を中心に追い込み、左右の要素はAlignを使うことでExpandedの中で好きな位置に整列させる。ちなみにAlignのalignmentプロパティのデフォルトはAlignment.centerとなる。

Row(
  children: [
    Expanded(
      child: Align(
        child: Container(
          width: 80,
          height: 50,
          color: Colors.blue,
        ),
      ),
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Expanded(
      child: Align(
        alignment: Alignment.centerRight,
        child: Container(
          width: 120,
          height: 50,
          color: Colors.green,
        ),
      ),
    ),
  ],
),

これを適用させた結果が以下となる。確かに中央要素を画面中心に配置することができている。

また、両側の要素を左右に寄せて配置するのであれば、Alignを使わずにExpandedとSpacerを使って以下のように書くこともできる。

Row(
  children: [
    Expanded(
      child: Container(
        width: 80,
        height: 50,
        color: Colors.blue,
      ),
    ),
    const Spacer(),
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    const Spacer(),
    Expanded(
      child: Container(
        width: 120,
        height: 50,
        color: Colors.green,
      ),
    ),
  ],
),

Alignがなくなった分スッキリ書くことができる。

おわり

まだまだ自分が知らないWidgetやプロパティはたくさんあるため、もしかしたらこの方法以外にもっとスマートで簡単な方法があるのかもしれない。もし知っている方がいらっしゃればコメントでこっそり教えてほしい。