Как сделать так, чтобы повернутое изображение заполняло доступное пространство во Флаттере?

Question

Я пытаюсь отобразить изображение в виде округлого ромба. Я могу заставить повороты работать, и если я использую debugPaintSizeEnabled, он показывает форму ромба, но изображение не заполнит это пространство. Как я могу заставить его расширяться, чтобы заполнить алмаз?

Вот скриншот:

Это код, который создает алмазный виджет:

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,
            ),
          ),
        ),
      ),

Answer 1

1) Transform.rotate не влияет на размеры и расположение ребенка - оно меняет только способ рисования ребенка.

2) Поскольку на снимке экрана нет данных изображения в белых «треугольниках», чтобызаполните их изображением, мы должны увеличить изображение.Но тогда он будет перекрывать соседние виджеты, поэтому мы также будем уменьшать размер ромба.

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

Теперь масштабируем!

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,
          ),
        ),
      ),
    ),
  ),
);