How to solve the grid view problem in flutter app?

user_19645273 0
Viewed 148

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];
                      }))
flutter-gridview flutter-test flutter gridview
4 Answers

you can use flutter_staggered_grid_view # package

like this,

StaggeredGrid.count(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 12,
                children: [ 'your data'  ]
     );
user_197258420

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

user_101571270 
   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

user_197272330

Just use flutter_staggered_grid_view: ^0.6.2

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);
user_51977120
Related