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
)

user_16827280 · Answer

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

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

user_2927226 · Answer

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.

user_2419584 · Answer

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:

Flutter overflow: hidden analogue

3 Answers

Using Column

Using Wrap