CODEWITHSUNDEEP
flutterflutter-layout
Sverro2
Sverro2

Reputation: 163

Fix RenderConstraintsTransformBox overflowed warning

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

Upvotes: 1

Views: 575

Answers (1)

WSBT
WSBT

Reputation: 36333

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

Upvotes: 2

Related Questions