[Flutter/Dart] Place widgets in the middle and right edge of the screen

What want to do

As the title suggests.

• Place two widgets in one line on the screen

• One in the center of the screen and the other on the right edge of the screen

When I tried to do it with Row's mainAxisAligment, it was a bit difficult.

Solution

Do as below

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

The point is

• Insert SizedBox() to force the number of elements to 3

• Enclose SizedBox with Expanded

• Row's mainAxisAligment is MainAxisAlignment.spaceBetween Now WidgetA is in the middle and WidgetB is on the right edge

• Additionally surround WidgetB with Align to make it truly right edge