aufa
aufa

Reputation: 295

Flutter container overflow

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:

enter image description here

Is there any solutions?

Upvotes: 3

Views: 6863

Answers (2)

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

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,

Upvotes: 6

kartoon
kartoon

Reputation: 1194

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
  1. 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
        ...

Upvotes: 0

Related Questions