How to make a rotated image fill available space in Flutter?

Question

I'm trying to display an image as a rounded diamond shape. I can get the rotations to work and if I use debugPaintSizeEnabled it shows the diamond shape, but the image won't fill that space. How can I get it to expand to fill the diamond?

Here's a screenshot:

This is the code that creates the diamond widget:

Transform.rotate(
        angle: math.pi / 4,
        child: ClipRRect(
          borderRadius: new BorderRadius.circular(24.0),
          child: Transform.rotate(
            angle: - math.pi / 4,
            child: Image(
              image: AssetImage("img/kitten_200_1.jpeg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),

Solution

1) Transform.rotate doesn't affect child's sizing and positioning — it changes how the child is painted only.

2) Because there is no image data in white "triangles" at your screenshot, to fill them with image we should scale the image up. But then it will overlap neighbor widgets, so we will also scale the diamond down.

double L = 100; // image side length
double R = 24; // rounding radius
double k = sqrt(2) - R / L * 2 * (sqrt(2) - 1); // a little bit of geometry

Now scale!

Transform.rotate(
  angle: pi / 4,
  child: Transform.scale(
    scale: 1 / k,
    child: ClipRRect(
      borderRadius: new BorderRadius.circular(R),
      child: Transform.rotate(
        angle: - pi / 4,
        child: Transform.scale(
          scale: k,
          child: Image(
            image: ...,
            width: L,
            height: L,
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
  ),
);

Comments

[Murat Aslan]

try rotatedbox.

[Reagankm]

That had the same problem. Pavel's solution worked, though