RenderFlex overflow using Flutter GridView

Question

I used a GridView.count() to display dynamic data in my app, but each of my GridView elements doesn't fully display.

Here is what it looks like:

Here is my code:

Column(
      children: [
        buildSubheadingText('Mes projets'),
        buildVerticalSpace(5.0),
        GridView.count(
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          //physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          children: ContextManager.projects.map((value) {
              return ProjectCard(project: value);
            }).toList()
        )
      ],
    ); 

I have added the attributes shrinkWrap at true and physics at BouncingScrollPhysics or NeverScrollableScrollPhysics as advised in the answers of this topic but as you can see it doesn't work for me.

Also, I don't want to use a fixed height because data is dynamic here.

Thanks for helping.

Answer 1

You can set custom height for grid using childAspectRatio attribute

Example:-

Column(
      children: [
        buildSubheadingText('Mes projets'),
        buildVerticalSpace(5.0),
        GridView.count(
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          childAspectRatio: 2/3, //gives custom height to your grid element
          crossAxisCount: 2,
          children: ContextManager.projects.map((value) {
              return ProjectCard(project: value);
            }).toList()
        )
      ],
    );

Answer 2

GridView children's size depends on childAspectRatio , default it is 1.0 , you can increase height by changing default childAspectRatio . like

  child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1 / 1.2, //width /height

Answer 3

Please try using this library, staggered_grid_view