Flutter center an Icon inside an ElevatedButton

Question

ANSWER: Adding padding: MaterialStateProperty.all(EdgeInsets.zero), to the ButtonStyle did the trick

So, the icons inside an ElevatedButton tend to move righter, but I need it dead centered.

Code for the button:

Widget build(BuildContext context) {
return Container(
  width: 50,
  height: 50,
  margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
  child: ElevatedButton(
    onPressed: pressHandler,
    child: icon,
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(color),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
        ),
      ),
    ),
  ),
);

Which results in: https://i.sstatic.net/8YyCs.jpg

Button needs to be a rounded rectangle, so a lot of solutions do not work.

I've tried IconButton, which requires text and I do not need it. Using Stack to put the icon with GestureDetector on top of button doesn't really work either, because it looses the CLICK of a button.

And so I'm wondering if there is a proper way to do it?

P.S. Stack approach (closest to visual as it needs to be)

Widget build(BuildContext context) {
return Container(
  width: 50,
  height: 50,
  margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
  child: Stack(children: [
    ElevatedButton(
      onPressed: pressHandler,
      child: Container(),
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(color),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(18.0),
            ),
          )),
    ),
    GestureDetector(child: Center(child: icon), onTap: pressHandler)
  ]),
);

}

Answer 1

Try setting a different width and height in sizedbox.

Also, if your'e using a column with crossAxisAlignment: CrossAxisAlignment.stretch, all the child widgets will take the screen width.

         SizedBox(
            width: 100,
            child: ElevatedButton(
              onPressed: () {},
              child: const Icon(Icons.add),
              style: ButtonStyle(
                padding: MaterialStateProperty.all(EdgeInsets.zero),
                backgroundColor:
                    MaterialStateProperty.all<Color>(Colors.green),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                ),
              ),
            ),
          )

If your'e using a custom icon, make sure it has no padding, otherwise will affect the UI.