Bottom overflowed by pixels flutter in Image.network

Question

I am doing some project with flutter and I had some problem with Image network, When I add an image I have got "Bottom overflowed by pixels flutter" error. Can you help me for sort his problem. I am new to flutter.

My code:

class Items extends StatelessWidget {
  List list;

  Items({this.list});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        padding: EdgeInsets.all(10.0),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: (1 / 1),
          crossAxisCount: 2,
        ),
        itemCount: list == null ? 0 : list.length,
        itemBuilder: (context, i) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new Text(list[i]['name']),
                Image.network(
                    "http://mobileapi.vps50663.mylogin.co/public/uploads/products/thumbnail/" +list[i]['thumbnail'],
                    fit: BoxFit.fill,
                    height: 100.0,
                    //width: 80.0,
                    alignment: Alignment.center,
                    filterQuality: FilterQuality.low,

                ),
                new Text(list[i]['slug']),
              ],
            ),
          );
        });
  }
}

I found similar type of error look at this solution. https://stackoverflow.com/questions/51972371/bottom-overflow-by-30px — Viren V Varasadiya, Mar 23 '19 at 20:20
Possible duplicate of [Flutter: How to fix "A RenderFlex overflowed by pixels " error?](https://stackoverflow.com/questions/55261399/flutter-how-to-fix-a-renderflex-overflowed-by-pixels-error), there are many renderflex questions on SO but this one has almost the same design. — mirkancal, Mar 23 '19 at 21:24

score 2 · Accepted Answer · answered Mar 24 '19 at 01:20

2

That means the size of your the parent Container widget for your image is less than the image size by 14.0 pixels. Try giving your Container a height of 120.0 (to allow for some extra space). That should fix it

answered Mar 24 '19 at 01:20

C-Spydo

789
8
8

2

what if i do not know the size of the image, i.e. it is coming form a server, is there a general solution for this case? or just i have to change the parent size? – AAEM Jul 25 '19 at 00:42
@AAEM you can pass width and height to Image.Network widget, ex:Image.network('https://i.picsum.photos/id/599/2200/2200.jpgg', width: double.infinity, height: 50, semanticLabel: "This is image",loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) { if (loadingProgress == null) return child; return Center(child: CircularProgressIndicator(value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes: null, ), );},) – Wajid khan Jan 15 '20 at 13:57

Bottom overflowed by pixels flutter in Image.network

1 Answers1