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