How to solve the grid view problem in flutter app?

Question

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];
                      }))

Does this answer your question? [How to make slider like google map location info in flutter app?](https://stackoverflow.com/questions/73206414/how-to-make-slider-like-google-map-location-info-in-flutter-app) — ahuemmer, Aug 10 '22 at 06:46

Nikunj Donda · Accepted Answer · 2022-08-10T05:29:00.863

2

you can use flutter_staggered_grid_view # package

like this,

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

edited Aug 10 '22 at 05:29

answered Aug 10 '22 at 05:25

Nikunj Donda

61
3

score 1 · Answer 2 · answered Aug 09 '22 at 12:04

1

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

answered Aug 09 '22 at 12:04

Md. Yeasin Sheikh

54,221
7
29
56

If you are looking for 1st ss view, you dont need to use GridView , check [ReorderableListView](https://api.flutter.dev/flutter/material/ReorderableListView-class.html) – Md. Yeasin Sheikh Aug 09 '22 at 12:27

score 0 · Answer 3 · answered Aug 09 '22 at 13:38

   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

score 0 · Answer 4 · answered Aug 10 '22 at 11:07

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),
    ),
  ],
);

How to solve the grid view problem in flutter app?

4 Answers4