Flutter: How to fix “A RenderFlex overflowed by pixels ” error?

Question

I am using GridView in my Flutter app to display images and their titles. Please check the below code.

import \'package:flutter/mat         


        

Answer 1

Widget build(BuildContext context) {

    final _screenSize = MediaQuery.of(context).size;

    return Container(
      height: _screenSize.height * 0.2,);
}                                                                                     

MediaQuery.of(context) It worked for me to use!

Answer 2

try to use Expanded instead of Container in _buildImageBoxes() function

  Widget _buildImageBoxes() {
    return Column(
      children: <Widget>[
        Expanded(
          child: Image.network("https://picsum.photos/500/500/?random"),
        ),
        Container(
          padding: EdgeInsets.all(10),
          child: Text("Text"),
        )
      ],
    );
  }

Answer 3

Use fit property in your Image.network method to reduce the size of your image, since they are bigger and overflowing from your container, or you can enlarge your Containers by their height and width properties.