[Flutter/Dart] 画面の真ん中と右端に配置する

やりたいこと

タイトル通り。

• 2つのWidgetを画面上で1列に並べたい

• 1つは画面中央、もう1つは画面右端

RowのmainAxisAligmentでやろうとしたら地味に難しかった

解決策

以下のようにする

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Expanded(       
      child: SizedBox(),     
    ),
    WidgetA(),
    Expanded(
      child: Align(
        alignment: Alignment.centerRight,
        child: WidgetB(),
       ), 
    ), 
  ]
),

ミソは

• SizedBox()を入れて無理やり要素数を3つにする

• SizedBoxはExpandedで囲う

• RowのmainAxisAligmentはMainAxisAlignment.spaceBetween これでWidgetAが真ん中、WidgetBが右端に来る

• WidgetBを本当に右端にするために、追加でAlignで囲う