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!

Md. Yeasin Sheikh · Accepted Answer · 2022-08-24 06:48:48Z

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: () {}, ), ], ),

BLKKKBVSIK · Accepted Answer · 2022-08-23 22:31:53Z

It is caused by the Spacer widget.
The Spacer widget will use all the space available by default.

You can remove the Spacer widget so all your child will be evenly-spaced.

mateendev3 · Accepted Answer · 2022-08-23 23:34:00Z

It is because of the spacer widget, Spacer widget by default took the whole width. give it a specific width, instead use sizedBox and give it a width for horizontal space.

Collectives™ on Stack Overflow

Flutter: Cant align row items correctly

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related