CODEWITHSUNDEEP
flutterdartalignment
Hasen
Hasen

Reputation: 12304

Flutter icons not centred in Iconbutton and alignment does nothing

The icons need to be centred within the Icon buttons otherwise when the two are centred together in the middle of the row, they appear slightly off centre to the right.

Row(
  children: <Widget>[
    IconButton(
      alignment: Alignment.center,
      icon: Icon(Icons.arrow_left,
          color: Color(0xFFF89CC0), size: 42),
      onPressed: () {},
    ),
    IconButton(
      alignment: Alignment.topLeft,
      icon: Icon(Icons.arrow_right,
          color: Color(0xFFF89CC0), size: 42),
      onPressed: () {},
      },
    ),
  ],
),

I have alignment parameters set which as you can see in the screenshot are completely ignored:

enter image description here

How can I get them to be in the centre of their button?

Upvotes: 8

Views: 7147

Answers (1)

Julien Lachal
Julien Lachal

Reputation: 1141

The problem is that IconButtons have a default padding, so do it like this:

return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        IconButton(
          padding: EdgeInsets.all(0),
          icon: Icon(Icons.arrow_left, color: Color(0xFFF89CC0), size: 42),
          onPressed: () => {},
        ),
        IconButton(
          padding: EdgeInsets.all(0),
          icon: Icon(Icons.arrow_right, color: Color(0xFFF89CC0), size: 42),
          onPressed: () {},
        ),
      ],
    );

Upvotes: 27

Related Questions