Обрезка флаттером 2 повернутых изображения - PullRequest
Новая
       62

Обрезка флаттером 2 повернутых изображения

1 голос
/ 11 июля 2020

Мне нужно добиться этого эффекта во Flutter:

Пример

Есть идеи, как это сделать? Для большей гибкости изображения должны иметь свои собственные отдельные виджеты.

Любая помощь приветствуется. Спасибо.

Решение для меня: 

return Center(
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    child: Container(
      color: Colors.blueGrey[900],
      child: SizedOverflowBox(
        size: Size(150, 150),
        child: Transform.rotate(
          angle: -math.pi / 4,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                kFlagPathUK,
                width: 220.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              Image.asset(
                kFlagPathUSA,
                width: 220.0,
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

Что выглядит так:

Решение

1 Ответ

0 голосов
/ 11 июля 2020

Вы можете получить базовое c вращение позиции с помощью этого кода, и в зависимости от ваших изображений вам нужно будет изменить их размер и расположить относительно родительского виджета. 

return ClipRRect(
  child: Container(
    height: 300,
    width: 300,
    color: Colors.grey,
    child: Stack(
      children: [
        Transform.translate(
          offset: Offset(-90, -100),
          child: Transform.rotate(
            angle: -math.pi / 4,
            child: Image.asset('flag1.png'),
          ),
        ),
        Transform.translate(
          offset: Offset(90, 100),
          child: Transform.rotate(
            angle: -math.pi / 4,
            child: Container(
              width: 500,
              child: Image.asset('flag2.png'),
            ),
          ),
        ),
      ],
    ),
  ),
);
...