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

Answer 3

An easy way is to use the Wrap component (below is your example).

return Container( // the one with overflow hidden -ish behavior
  height: 300.0,
  child: Wrap(
    children: [
      TheTransformingChild()
    ],
  )
)

It also replaces the Column component in most cases:

Using Column

Using Wrap