Ad

RenderFlex Overflow Using Flutter GridView

- 1 answer

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 :

enter image description here

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.

Ad

Answer

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()
        )
      ],
    );
Ad
source: stackoverflow.com
Ad