Flutter center an Icon inside an ElevatedButton-CodePudding

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:

CodePudding user response：

You can set min size to your elevated button then remove container. It works. You can check dartpad link.
dartpad

  ElevatedButton(
        onPressed: (){},
        child: Icon(Icons.exit_to_app),
        style: ButtonStyle(
          minimumSize: MaterialStateProperty.all<Size>(Size(50,50)), //////// HERE
          backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(18.0),
          ),
        ),
      ),
    ),