8

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?

1 Answer 1

25

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: () {},
        ),
      ],
    );
8
  • I literally just found this out myself and came back to delete my question! Good work though anyway. I didn't expect this because every widget I came across so far has no default padding.
    – Hasen
    Jul 30, 2019 at 7:30
  • it's worth checking the constructors for these Widgets, lots of them have default values. Jul 30, 2019 at 7:44
  • 1
    If anyone stumbles on this question, here's the official documentation on Aligning Widgets - flutter.dev/docs/development/ui/layout#aligning-widgets Jul 30, 2019 at 7:50
  • @Sandeep Chayapathi Alignment is no use here, it was caused by padding. There was nothing wrong with the alignment.
    – Hasen
    Jul 31, 2019 at 5:44
  • 1
    Ha! Tricky detail! Just saved me quite some time, thank you!
    – Wolfone
    May 21, 2022 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.