how can i solve the issue of right overflowed by 382 pixels

Question

Problem:

I have an overflow error when i use this widget (code below), How i solve the issue?

You can see the error in the image below.

enter image description here

Container(
  height: 150,
  decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(20),
  ),
  child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
            )
)...

You can check the complete here.

Answer 1

Try wrapping the widget with Flexible(). Read more here https://api.flutter.dev/flutter/widgets/Flexible-class.html

Answer 2

The child Container should have defined height, try giving it a given height,
and the height must not be greater than the parent height.

- Increase the height of the parent container and also give the child Container a height and width

.

    Container(
      height: 300,
      decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(20),
      ),
      child: Container(
               height:'your height',
              width:'your width',
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                )
    )...

Answer 3

your Row widget is too big for screen. you should change your layout or wrap you code in FittedBox wiget like this:

Container(
        height: 150,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
          ),
          child: FittedBox(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[...],
            ),
          ),
        ),
      )