A RenderFlex overflowed by 125 pixels on the bottom

Anesu Jambwa 0
Viewed 38

I am building a Flutter ecommerce app for delivery beverages. I am having an issue with my wishlist page. I am getting an error where it says "a Renderflex overflowed by 125 pixels at the bottom". The error is saying it is caused by the Column widget.I have tried different approaches including an Expanded widget as well as a Sizebox widget but with no luck. Please can anyone assist.

enter image description here

This shows that it is overflowed by 125 pixels at the bottom

enter image description here

Here's the code that's causing the error:

Container(
                height: 1500.0,
                width: double.infinity,
                child: Column(
                  children: [
                    const Text(
                      'My Favourites',
                      style: TextStyle(fontSize: 40.0),
                    ),
                    GridView.builder(
                      shrinkWrap: true,
                      itemCount: favItems.length,
                      itemBuilder: ((context, index) {
                        return ProductItem(
                            id: favItems[index].id,
                            bottleName: favItems[index].bottleName,
                            imgUrl: favItems[index].image,
                            price: favItems[index].price,
                            bottle: favItems[index]);
                      }),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: itemWidth / itemHeight,
                      ),
                    ),
                  ],
                ),
              ));
flutter-layout dart flutter
3 Answers

Wrap the GridView.builder with the Flexible widget. Column throws an exception because it doesn't know the height of the GridView

Container(
  height: 1500.0,
  width: double.infinity,
  child: Column(
    children: [
      const Text(
        'My Favourites',
        style: TextStyle(fontSize: 40.0),
      ),
      Flexible(child: 
        GridView.builder(
          shrinkWrap: true,
          itemCount: favItems.length,
          itemBuilder: ((context, index) {
            return ProductItem(
              id: favItems[index].id,
              bottleName: favItems[index].bottleName,
              imgUrl: favItems[index].image,
              price: favItems[index].price,
              bottle: favItems[index]);
          }),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: itemWidth / itemHeight,
          ),
        )),
    ],
  ),
));
Vitali0

Wrap the grid view builder with Expanded widget and it will work fine

tk_tanz0

Wrap your GridView.builder( with Expanded( it will work for you.

Container(
                  height: 1500.0,
                  width: double.infinity,
                  child: Column(
                    children: [
                      const Text(
                        'My Favourites',
                        style: TextStyle(fontSize: 40.0),
                      ),
                      Expanded(
                        child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: favItems.length,
                          itemBuilder: ((context, index) {
                            return ProductItem(
                                id: favItems[index].id,
                                bottleName: favItems[index].bottleName,
                                imgUrl: favItems[index].image,
                                price: favItems[index].price,
                                bottle: favItems[index]);
                          }),
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            childAspectRatio: itemWidth / itemHeight,
                          ),
                        ),
                      ),
                    ],
                  ),
                )
Ravin Laheri0
Related