Flutter 裁剪 2 张旋转图像

Question

我需要在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,
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

看起来像这样：

解决方案

Answer 1

您可以使用此代码获得 position 的基本旋转，并且根据您的图像，您需要调整它们的大小和 position 它们关于父小部件。

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