Flutter: Cant align row items correctly

Question

I have a row im trying to align correctly. It holds two cards id like to be spaced evenly, and an icon button aligned to the right side of the row.

With just the cards using the following code,

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Card(...),
    Card(...),
  ],
),

it looks like this:

But When i add an icon button with the following code

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Card(),
    Card(),
    Spacer(),
    IconButton(
      icon: Icon(Icons.close),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
),

it looks like this:

Any idea what I'm doing wrong? Thanks!

Answer 1

A note from Spacer

MainAxisAlignment.spaceBetween, or MainAxisAlignment.spaceEvenly will not have any visible effect: the Spacer has taken up all of the additional space, therefore there is none left to redistribute.

As for the you are trying to archive, I am using nested row for this

 Row(
  children: [
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Card(
            child: Text("A"),
          ),
          Card(
            child: Text("A"),
          ),
        ],
      ),
    ),
    IconButton(
      icon: Icon(Icons.close),
      onPressed: () {},
    ),
  ],
),