CODEWITHSUNDEEP
flutterdart
noassl
noassl

Reputation: 89

Icon rendered with offset

When I tried to use IconButtons, I noticed that they were rendered incorrectly - the icon itself was offset to the right bottom, while the clicking animation was perfectly fine. Now my question is: Is this issue related to my code or is it Flutter's fault?

This is the build method of the StatelessWidget the IconButtons are located in:

return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            onPressed: () => {},
            icon: Icon(
              Icons.play_circle_outline,
              size: 50,
            ),
            color: Color(0xff3C6E71),
          ),
        ],
      ),
    );

This is how it looks when the button is clicked, the Icon itself is offset to the bottom right but the clicking animation is perfectly centered how it should be.

Visualization of the problem

Upvotes: 1

Views: 1076

Answers (1)

EdYuTo
EdYuTo

Reputation: 6874

Probably some issue with the widget padding, you can try adding a padding with the value zero:

return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            onPressed: () => {},
            padding: EdgeInsets.zero, // set padding to zero
            icon: Icon(
              Icons.play_circle_outline,
              size: 50,
            ),
            color: Color(0xff3C6E71),
          ),
        ],
      ),
    );

Upvotes: 3

Related Questions