Как заставить повернутое изображение заполнить доступное пространство во Flutter?
Я пытаюсь отобразить изображение в виде закругленного ромба. Я могу заставить работать повороты, и если я использую 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,
),
),
),
),
У того была такая же проблема. Решение Павла сработало, хотя
Ответы 2
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,
),
),
),
),
),
);
Если вам нужно повернуть виджет изображения только на четверть, вы можете использовать RotatedBox, который выполняет автоматическое изменение размера за вас: https://api.flutter.dev/flutter/widgets/RotatedBox-class.html
попробуй ротедбокс.