Home > Mobile >  How to solve the grid view problem in flutter app?
How to solve the grid view problem in flutter app?

Time:08-10

I have a problem of grid view. I add lists as described in 1st screenshot, then the same list will be updated on the another page (as per second screenshot). However, as you can see overflow error, that is happening and I can not solve that. So, can you guys explain how to increase it's height as I add element in the lists. Hope, it is clear.

1st image is here 2nd image is here

Here is a Code:

Consumer<HomeProvider>(
                  builder: (context, provider, child) => GridView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: provider.allData.length,
                      gridDelegate:
                          SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: provider.isPress ? 2 : 1,
                          childAspectRatio: 1.4
                        
                      ),
                      itemBuilder: ((context, index) {
                        return provider.allData[index];
                      }))

CodePudding user response:

GridView crossAxisCount is not having enough room on gridItem. You can change crossAxisCount by increasing height.

 childAspectRatio: width/height

Decrease childAspectRatio value like .6 or less

CodePudding user response:

   const SliverGridDelegateWithFixedCrossAxisCount(
                                        crossAxisCount: 2,
                                        crossAxisSpacing: 20,
                                        mainAxisSpacing: 10,
                                        mainAxisExtent:
                                            110,  
                                      )

Try setting mainAxisextent to something more and it will increase the hieght of that current grid element

  • Related