Flutter overflow: hidden analogue

Question

Is there any flutter widget that prevents the children to paint outside a Container by any mean?

I have this container with a child that may get some transformations (such as scale and rotate) and therefore can be painted outside

I want to limit the children's painting to only inside the parent Container, just like a div with CSS overflow:hidden; would behave.

A sample:

return Container( // the one with overflow hidden -ish behavior
   height: 300.0,
   child: TheTransformingChild() // the one that can get bigger that container
)

Answer 1

There is - what you're looking for is a combination of OverflowBox or SizedOverflowBox and ClipRect, or ClipOval, or ClipPath, or ClipRRect etc.

I'd recommend looking through the painting and layout sections of the flutter widget catalog (and the rest of it as well) as it generally does a pretty good job of showcasing the widgets you need.

Answer 2

I think it's easier to use clipBehavior: property in container

Container(
clipBehavior: Clip.hardEdge,
height: 400,
width: 400,
child :TheTransformingChild(),)