【Flutter】Rowで片方だけを真ん中にする

はじめに

FlutterのRowを使って、左側のWidgetだけとか、右側のWidgetだけを真ん中に配置するという方法に意外に苦戦したので、実装方法を記事にしたいと思います。
デザインとしては下記のように、Centerというテキストが真ん中に配置されて、その右にlableというテキストが配置されるというデザインです。

配置方法

下記のような形で、両側に同じ幅の領域を取り、真ん中の部分に真ん中へ配置したいWidgetを並べます。

コードにすると下記のようになります。

Row(
  children: [
    Expanded(
      child: SizedBox()
    ),
    Center(
      child: Text(
        "Center",
      ),
    ),
    Expanded(
      child: Padding(
        padding: EdgeInsets.only(left: 8.0),
        child: Text("Right"),
      ),
    ),
  ],
),

注意点

冒頭で見せたデザインを実装したい場合は、ExpandedではなくFlexibleを使いましょう。
下記のようにExpandedを使うと、横幅いっぱいに広がってしまいます。

Row(
  children: [
    Expanded(
      child: SizedBox()
    ),
    Center(
      child: Text(
        "Center",
      ),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 8.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16),
          ),
          // heightとwidthはExpanded内だと効かない
          height: 32,
          width: 80,
          child: const Center(child: Text("Right")),
        ),
      ),
    ),
  ],
),

下記のようにFlexibleを使えば解決します。

Row(
  children: [
    Expanded(
      child: SizedBox()
    ),
    Center(
      child: Text(
        "Center",
      ),
    ),
    Flexible(
      child: Padding(
        padding: const EdgeInsets.only(left: 8.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16),
          ),
          // heightとwidthはExpanded内だと効かない
          height: 32,
          width: 80,
          child: const Center(child: Text("Right")),
        ),
      ),
    ),
  ],
),