Flutter 裁剪 2 个旋转的图像

Question

我需要在 Flutter 中实现这个效果：

Example

关于如何做到这一点的任何想法？ 图像应该有自己独立的小部件以更加灵活。

非常感谢任何帮助。谢谢。

我的解决方案：

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

看起来像这样：

Solution

Answer 1

您可以使用此代码获得基本旋转位置，根据您的图像，您需要调整它们的大小并将它们定位在父窗口小部件上。

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