Flutter ROW containers-CodePudding

I have many containers in the Row and I have to push this blue one as far to the right as possible. Can u Help me? Here is a code and pick underneath.

Row(
children: [
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.red,
  ),
  SizedBox(width: 50),
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.blue,
  ),
],
),

CodePudding user response：

you can use Spacer() in between your widgets

 Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
  Spacer(),  // add this
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.blue,
  )

CodePudding user response：

You can use mainAxisAlignment: MainAxisAlignment.spaceBetween, on Row.

 body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [

CodePudding user response：

Use Expanded with flex property

Expanded(
   flex:1,//use how much flex you want
   child:,//use your container
),