Search code examples
flutterwidgetoverlap

Scaled Container Overlapping Parent-widget flutter


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:

enter image description here

Thx already

- Tobias


Solution

  • 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,
                ),
              ),
            ),
          ),
        ),
      ),