GridView overflowing with multiple items added to the grid spot

Question

We have a grid view which is basically 3 columns with some additional in each of the columns but the last elements seem to be getting overflown

GridView.count(
                  crossAxisSpacing: 35,
                  shrinkWrap: true,
                  crossAxisCount: 3,
                  children: List.generate(3, (index) {
                    return Center(
                      child: Column(
                        children: [
                          const CircleAvatar(
                            minRadius: 30,
                          ),
                          const SizedBox(height: 20),
                          Text(
                            'Name',
                            style: Theme.of(context).textTheme.bodyMedium,
                          ),
                          const SizedBox(height: 10),
                          Text(
                            '$index',
                            style: Theme.of(context).textTheme.headline5,
                          ),
                        ],
                      ),
                    );
                  }),
                ),

You need to increase the height of your widget. [like this link](https://stackoverflow.com/questions/48405123/how-to-set-custom-height-for-widget-in-gridview-in-flutter) — aminjafari-dev, Oct 04 '22 at 09:38

mohamad kanina · Answer 1 · 2022-10-04T10:14:48.863

0

try to use .

   SizedBox(
height= // your option , 
child : // your Widegt,
)

edited Oct 04 '22 at 10:14

answered Oct 04 '22 at 08:39

mohamad kanina

41
4

that error is overflowed from the bottom not left or right. – aminjafari-dev Oct 04 '22 at 09:39

score 0 · Answer 2 · answered Oct 04 '22 at 08:40

0

Wrap the Column wih "SingleChildScrollView"

answered Oct 04 '22 at 08:40

Mohammed Abdallah

256
1
5

we dont want it to scroll – Boss Nass Oct 04 '22 at 08:41

score 0 · Answer 3 · answered Jan 02 '23 at 16:13

crossAxisSpacing: 35  This is the causing problem

Explanation:

Say if you have screen width of 300 and you have 3 columns of 80 width each.

This spacing would cause 80 + 35 + 80 + 35 + 80 = 310 which is 10px extra.

Solution:

Replace crossAxisSpacing by providing padding inside the grid items

GridView overflowing with multiple items added to the grid spot

3 Answers3

Explanation:

Solution:

Output after setting `crossAxisSpacing = 0` :

GridView overflowing with multiple items added to the grid spot

3 Answers3

Explanation:

Solution:

Output after setting crossAxisSpacing = 0 :

Output after setting `crossAxisSpacing = 0` :