'Flutter overflow: hidden analogue

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
)


Solution 1:[1]

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

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

Solution 2:[2]

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

enter image description here

Using Wrap

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shakthi Hettiarachchi
Solution 2 Ben Winding