How to resolve A RenderFlex overflowed by 8.5 pixels on the bottom. in GridView

Question

I need help with a problem that's driving me crazy.

Basically, I would like to make a GridView.count that will display my different objects. So far it's all working perfectly except for one problem.

Indeed, I have the error A RenderFlex overflowed by 8.5 pixels on the bottom. in my GridView.count. I tried to add a childAspectRatio but it displays differently depending on the screen size. And I want the size of my GridView.count to stay the same on every screen.

Does anyone have a solution to this puzzle ??

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: PreferredSize(
        preferredSize: Size.fromHeight(120.0),
        child: GridView.count(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          children: List.generate(
            nearbySpaces.length,
            (index) {
              return Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(10),
                    height: 110,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(nearbySpaces[index]['coverImage']),
                        fit: BoxFit.cover,
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.0),
                      ),
                    ),
                    child: Stack(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Icon(
                              CupertinoIcons.heart_fill,
                              color: HexColor('#FF2D55'),
                            )
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Container(
                                  padding: EdgeInsets.only(
                                      left: 10, right: 10, top: 7, bottom: 7),
                                  decoration: BoxDecoration(
                                      color: Colors.black.withOpacity(0.7),
                                      borderRadius: BorderRadius.circular(5)),
                                  child: Text(
                                    '€ ' +
                                        nearbySpaces[index]['price'] +
                                        '/hr',
                                    style: TextStyle(
                                      fontWeight: FontWeight.w500,
                                      color: Colors.white,
                                      fontSize: 13,
                                    ),
                                  ),
                                ),
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        nearbySpaces[index]['name'],
                        style: TextStyle(
                            fontSize: 15, fontWeight: FontWeight.w600),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          SvgPicture.asset(
                            'assets/images/icons/map_marker.svg',
                            width: 12,
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Text(
                            nearbySpaces[index]['distance'] + ' km away',
                            style:
                                TextStyle(color: Colors.grey, fontSize: 13),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          SmoothStarRating(
                            rating:
                                double.parse(nearbySpaces[index]['average']),
                            isReadOnly: true,
                            size: 15,
                            filledIconData: Icons.star,
                            color: Colors.amber,
                            borderColor: Colors.grey,
                            halfFilledIconData: Icons.star_half,
                            defaultIconData: Icons.star_border,
                            starCount: 5,
                            allowHalfRating: false,
                            spacing: 1.0,
                            onRated: (value) {
                              print("rating value -> $value");
                              // print("rating value dd -> ${value.truncate()}");
                            },
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Text(
                            nearbySpaces[index]['average'].toString(),
                            style:
                                TextStyle(color: Colors.grey, fontSize: 13),
                          )
                        ],
                      )
                    ],
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ),

Answer 1

Warp the children's with a Flexible widget, check:https://www.youtube.com/watch?v=CI7x0mAZiY0.