Flutter: Padding on a scaled Image

13.6k views Asked by At

I'm new to flutter, but I thought I was on the right track here.

I've tried using the padding attribute on a Container, as well as wrapping the element (or parent elements) inside of a new Padding(). The below is only a portion of the layout, but the offending part.

new Column(
      mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            padding: new EdgeInsets.all(8.0),
              child: new Image.network(_choiceOne,
                height: 200.0,
                  fit: BoxFit.cover
          )
        )
      ],
    )

I've also tried using a Decoration on parent elements to produce the desired "padding", but I still end up with the renderer flipping out. I think it has something to do with the scaling of the random image's I'm retrieving, but am not sure.

The start of the error is: A horizontal RenderFlex overflowed by 11 pixels.

With the error tree being listed as Row ← Column ← Container ← Chooser ← ConstrainedBox ← Container ← Center ← MediaQuery ←

The offending issue

3

There are 3 answers

0
harizh On

Instead of giving height in child widget Image.network, give minHeight, maxheight, minWidth, and maxWidth in parent widget and set fit: BoxFit.fitWidth in child widget.

3
jesses.co.tt On

you can also do

Container(
  constraints: BoxConstraints.expand(
    height: 200.0
  ),
  child: Image.network(_choiceOne),
)
2
Arnold Parge On

Try using margin instead of padding.