Repository: flutter
Issue: A convenient way to clip children to their parent's content without pixel overflow errors.
Labels: framework,c: proposal,P3,team-framework,triaged-framework

## Use case

Animations are key to fluid UI, and flutter heavily endorses that. However, when it comes to revealing and hiding elements, pixel overflow often comes in the way.

The current method of ignoring pixel overflow is to wrap your widget in a Wrap or an Expanded widget. Both of those are far less than ideal for many cases. 

This pixel overflow widget would simply resize itself to its children's size and would clip inside its parent's constraint box but ignore pixel overflow warnings. Alternatively, it could be a Container feature where it ignores its children's sizes and just clips them.

Now you might argue that this is exactly what ClipRect is for, but that takes a CustomClipper which is VERY unnecessary when you just want your child to clip inside its parent. This also brings the argument of the developer being lazy, but the whole purpose of Flutter is convenience, hence why we have a ton of intrinsicly animating widgets and even a widget that lets you animate any value without an external Animator (TweenAnimationBuilder). 
This, in fact, could be a general feature for a lot of widgets like Container, SizedBox, BoxFit, etc...

EDIT: Furthermore, what I could dig up on ClipRect means that: no, ClipRect does NOT solve this. ClipRect clips widgets that are translated or offet using widgets like Transform.translate and such. This is not the solution for this. This clips all out of bounds widgets with respect to their parents. (specifically if you dont provide a custom clipper)

Here is a gif of a container clipping its children properly. 
This is the code for the play and edit button that slide up without triggering any pixel overflow warnings even though they are outside the Container's constraints:
```dart
                                                  Expanded(
                                                    child: Wrap(
                                                      children: <Widget>[
                                                        Column(
                                                          mainAxisAlignment: MainAxisAlignment.end,
                                                          crossAxisAlignment: CrossAxisAlignment.start,
                                                          children: <Widget>[
                                                            if (widget.slideUpWidgets != null)
                                                              AnimatedPadding(
                                                                duration: const Duration(milliseconds: 400),
                                                                curve: Curves.easeOutQuart,
                                                                padding: EdgeInsets.only(bottom: expanded ? 20 : 300),
                                                              ),
                                                            if (widget.slideUpWidgets != null) widget.slideUpWidgets(context),
                                                          ],
                                                        ),
                                                      ],
                                                    ),
                                                  )
```
![2020-01-19_01-12-55](https://user-images.githubusercontent.com/7407478/72671854-ccc22f80-3a59-11ea-91ba-226ae6dd0c5f.gif)
In the above gif, you are looking at an AnimatedPadding that shoves the play and edit button downwards (the padding is above them) and hides them by having the Container clip them away (supported by Expanded and Wrap). When the tile is tapped on and it expands the container, the Padding's EdgeInset goes to 0, allowing the buttons to animate upwards.

And here is a gif of a Playlist tile with pixel overflow that I could NOT get to work with neither Wrap nor Expanded (expanded specifically clips the Column of tracks properly but because the big bottom play button and edit button are both wrapped in an Expanded stack like the above code, the Expandeds fight for flex behavior. Any other combination of widgets like Wrap alone or Container or Column alone cause a pixel overflow error).

(furthermore, you can see my ditch effort to set a fixed height with a Container here, no dice.)
```dart
                                                    Expanded(
                                                      child: Container(
                                                          height: tracks.length * 32.0, child: Column(children: tracks)),
                                                    ),
```
![2020-01-19_01-19-13](https://user-images.githubusercontent.com/7407478/72671855-cfbd2000-3a59-11ea-920a-36cf9d51efd1.gif)

Screenshot when I wrap that Container in a Wrap (with the Expanded above it)

![image](https://user-images.githubusercontent.com/7407478/72671986-bc12b900-3a5b-11ea-97af-18f4ac07a690.png)


## Proposal

Either a seperate Widget that is essentially a CustomClipper that clips its children to its size and shape (borderRadius included) or an augment to Container and other-such widgets that simply IGNORES pixel overflow and directly clips their children inside of them. or a flag to enable in those widgets which enables a built-in Clipper that clips its children (borderRadius & boxShape supported and all, (so BoxDecoration support I assume)).

This, in my opinion, is a crucial feature Flutter is missing that animators require for basic dynamic fluid control.
My UI is currently an absolute mess of Wraps and Expandeds which I believe is unacceptable.

EDIT: I would like to add the following information:
- ListView with NeverScrollable physics and SingleChildScrollView are not good solutions, they're work-arounds just like Wrap.
- I got my playlist tile to work like I wanted it to work after a ton of tinkering, trying, and failing. It no longer overflows and works properly but using the work-arounds mentioned in this issue: https://gist.github.com/5bec2fefa10e383dd2ab38200afe24a6
- I'm not sure if this is a bug or not, but I'm including it here because it is somewhat relevant, TextFields always overflow when they are out of bounds from the screen view. So you can't hide it outside the field of view of the screen. It throws a renderflex overflowed by x pixels error.