Scaled Container Overlapping Parent-widget 颤动

Question

如何让这个蓝圈不与绿框重叠，而是限制在绿框的内部边界内？

Code:

Container(
  width: 300,
  height: 100,
  color: Colors.green,
  child: Transform.scale(
     scale: 2,
     child: Container(
        decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue
        ),
     ),
  ),
),

Pictures tells the rest:

谢谢

-托比亚斯

Answer 1

我能够在 clipBehaviour 上使用带有 hardEdge 的 ClipRect 小部件来做到这一点属性。

Center(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.green,
      child: ClipRect(
        clipBehavior: Clip.hardEdge,
        child: Transform.scale(
          scale: 2,
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    ),
  ),

Scaled Container Overlapping Parent-widget 颤动

Scaled Container Overlapping Parent-widget flutter

widget

overlap

flutter