Why is this icon being clipped?

Question

As you can see, the face icon on the right is being clipped and I'm not sure why.

Here is my code:

new Container(
  padding: new EdgeInsets.fromLTRB(style.wideMargin, style.wideMargin * 2,
      style.wideMargin, style.wideMargin),
  decoration: new BoxDecoration(backgroundColor: Colors.white),
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      new Expanded(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            new PrecisionTextOverflow(
                'Name of a thing',
                lineWidth: style.longLineWrappingWidth,
                mainTextStyle: style.blackParagraphText),
            // Because PrecisionTextOverflow paints itself directly, the UI
            // doesn't know its size so we use a blank Text object to make the
            // column center itself correctly.
            new Text(' '),
          ],
        ),
      ),
      new Transform(
        transform:
            new Matrix4.translationValues(0.0, -style.defaultMargin, 0.0),
        child: new IconButton(
          padding: EdgeInsets.zero,
          icon: new Icon(Icons.face,
              size: style.headingText.fontSize,
              color: style.favoriteColor[isItemFavorite]),
          onPressed: favoritePressed,
        ),
      ),
    ],
  ),
)

That PrecisionTextOverflow is a class I made of a StatelessWidget that uses a CustomPainter to paint text on the screen. I don't imagine it's related to the issue at hand, but just FYI.

I've tried removing the padding from the outer container but it doesn't help. I've tried adjusting the transformation to shift the icon to the left but it just shifts it in its clipped form. What am I doing wrong? How can I correct this?

Edit: Okay, I did a render tree dump and it looks like the enclosing Row sets its height as 24.0, which passes on down to the IconButton which gives itself a size of (24.0, 24.0). Is there a way to increase the height of a Row? Or should I rethink my whole structure?

Solution 1

You're setting the size on the Icon, rather than the IconButton. If you move the size argument to IconButton it should work.

What's going on is that the IconButton is defaulting to 24.0, and since you have it in an unbounded space it's being size-limited to 24.0 via a LimitedBox. It then tries to pass that size down to the Icon via an IconTheme inherited widget, but the Icon has been told to ignore that and be size 30.0 regardless.

I'll improve the docs.

Solution 2

I had the same problem for a different reason

Wrapping the IconButton in a Container with a fixed height and width can cause it to clip like in the example.