Scaled Container Overlapping Parent-widget flutter

Question

How do I make this blue-circle not overlap the green-box, but insted be confined to the inner bounderyes of the green-box?

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:

Thx already

- Tobias

score 2 · Accepted Answer · answered Sep 08 '20 at 20:09

I was able to do this using ClipRect widget with hardEdge on clipBehaviour property.

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 flutter

1 Answers1