Search code examples
flutterwidgetrow

The behavior when putting Row into ConstrainedBox with Flutter is strange


When I put a Row in the ConstrainedBox with Flutter, the display is out of the way. Is this a Flutter bug?

//Does not Stick out Pattern

ConstrainedBox(
  constraints: BoxConstraints(
  maxWidth: ScreenUtil.getFullWidth(context) * 0.8),
  child: Container(
    decoration: const BoxDecoration(color: Colors.red),
    width: 300,
    height: 100,
)),

//Stick out Pattern

ConstrainedBox(
  constraints: BoxConstraints(
  maxWidth: ScreenUtil.getFullWidth(context) * 0.8),
  child: Row(
    children: [
      Container(
        decoration: const BoxDecoration(color: Colors.green),
        width: 300,
        height: 100,
      )
    ])),

image


Solution

  • Adding an Expanded with a Center Widget remove the overflow

    ConstrainedBox(
              constraints:
                  BoxConstraints(maxWidth: ScreenUtil.getFullWidth(context) * 0.8),
              child: Row(children: [
                Expanded(
                    child: Center(
                        child: Container(
                  decoration: const BoxDecoration(color: Colors.green),
                  width: 300,
                  height: 100,
                )))
              ]))
    

    enter image description here