Fix RenderConstraintsTransformBox overflowed warning

user_2898058 0
Viewed 124

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.

enter image description here

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.

container that's drawn entirely

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 :)

flutter-layout flutter
1 Answers

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