Flutter container overflow

Question

I'm trying to display image inside a container with responsive width and height.

Here is my code:

 ...
 child: Column (
    mainAxisSize: MainAxisSize.min,
    children: [
       Row (
          children: [
             Padding (
                padding: EdgeInsets.all(20),
                child: Container(
                   height: MediaQuery.of(context).size.height *.3,
                   width: MediaQuery.of(context).size.width * 1,
                   padding: const EdgeInsets.all(15),
                   decoration: BoxDecoration(
                      image: DecorationImage(
                         image: AssetImage("assets/images/gunung.jpg"),
                         fit: BoxFit.cover,
                ...

here is the output:

Is there any solutions?

Answer 1

Just Change this to your code :

//Add Exapanded widget

---

 child: Column (
        mainAxisSize: MainAxisSize.min,
        children: [
           Row (
              children: [
    //Add Expanded Widget it will solve your issue 
    Expanded(
                 Padding (
                    padding: EdgeInsets.all(20),
                    child: Container(
                       height: MediaQuery.of(context).size.height *.3,
                       width: MediaQuery.of(context).size.width * 1,
                       padding: const EdgeInsets.all(15),
                       decoration: BoxDecoration(
                          image: DecorationImage(
                             image: AssetImage("assets/images/gunung.jpg"),
                             fit: BoxFit.cover,

Answer 2

Since you've set the width of your Container as

MediaQuery.of(context).size.width * 1

This means that it'll take up the width space of your device screen.

Not to mention, you've also set the Padding too. And that is taking up left, top, right and bottom spacing of 20.

padding: EdgeInsets.all(20)

This Padding is taking your Container ahead than it needs to go, hence the overflow.

There are many ways to fix this.

1. You could subtract the padding from the width that you've initialized for your container. 20 from the left and 20 from the right.

(MediaQuery.of(context).size.width * 1) - 20 - 20

2. You could set the padding within the container itself. You probably don't need Padding widget separately hanging around above Container.

    Padding(                                  // <---- remove
      padding: EdgeInsets.all(20),            // <---- remove
      child: Container(
        height: MediaQuery.of(context).size.height *.3,
        width: MediaQuery.of(context).size.width * 1,
        padding: const EdgeInsets.all(20),    // <---- use this
        ...