Fix RenderConstraintsTransformBox overflowed warning

Question

I have a widget that exceeds the size of the display and I would like to show different parts depending on user input.

When using this code:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      ...
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Transform.translate(
                offset: const Offset(-50, 0),  // offset hardcoded to -50
                child: Container(
                  width: 2000,
                  height: 100,
                  color: Colors.yellow,
                ),
            ...

The widget respects the constraints, so the container is fitted to the display. After the transform, you see the background instead of a continuation of the widget.

I could wrap the widget in an UnconstrainedBox:

UnconstrainedBox(
    alignment: Alignment.topLeft,
    child: Transform.translate(...)
)

This fixes the problem, but results in an error:

A RenderConstraintsTransformBox overflowed by 1500 pixels on the right.

I want it to overflow, I don't think this is an error! Any ideas on how I can fix this?

Note: I could use a SingleChildScrollView with NeverScrollableScrollPhysics() and use the controller to set position, but to me, this feels like overkill. Hope there is a simpler method. Thanks for the read :)

Solution

UnconstrainedBox is not the widget to use for getting rid of inner child overflow warnings. It's used to loosen the constraints.

You can use an OverflowBox in this case. Usage example:

SizedBox(
  width: 100,
  height: 100,
  child: OverflowBox(
    minWidth: 150,
    minHeight: 150,
    maxWidth: 150,
    maxHeight: 150,
    child: FlutterLogo(),
  ),
)

Comments

[Sverro2]

Thanks! I experimented with OverflowBox as well, but wrapping it in SizedBox seems to be mandatory for the OverflowBox to work (at least within a Column/Row) or ... Instead of SizedBox, LimitedBox() actually seems to be even nicer with a Row()/Column() parent