how to fix A RenderFlex overflowed by 99889 pixels on the right?

I tried to use the SingleChildScrollView as it was written in the flutter ducumentation and I can't make the error go away, I've tried everything and nothing happens, how could I solve this error?

error text:

A RenderFlex overflowed by 99889 pixels on the right. The relevant error-causing widget was GridTileBar

image error:

import 'package:flutter/material.dart';  import 'package:provider/provider.dart';  import 'package:shop/providers/cart.dart';  import '../providers/product.dart';  import 'package:shop/utils/app_routes.dart';    class ProductItem extends StatelessWidget {    @override    Widget build(BuildContext context) {      final Product product = Provider.of<Product>(context, listen: false);      final Cart cart = Provider.of<Cart>(context, listen: false);        return ClipRRect(        borderRadius: BorderRadius.circular(10),        child: GridTile(          child: GestureDetector(            onTap: () {              Navigator.of(context).pushNamed(                AppRoutes.PRODUCT_DETAIL,                arguments: product,              );            },            child: Image.network(              product.imageUrl,              fit: BoxFit.cover,            ),          ),          footer: SingleChildScrollView(            child: Flexible(              child: GridTileBar(                backgroundColor: Colors.black87,                leading: Consumer(                  builder: (ctx, product, _) => IconButton(                    icon: Icon(product.isFavorite                        ? Icons.favorite                        : Icons.favorite_border),                    color: Theme.of(context).accentColor,                    onPressed: () {                      product.toggleFavorite();                    },                  ),                ),                title: Text(                  product.title,                  textAlign: TextAlign.center,                ),                trailing: IconButton(                  icon: Icon(Icons.shopping_cart),                  color: Theme.of(context).accentColor,                  onPressed: () {                    cart.addItem(product);                    print(cart.itemCount);                  },                ),              ),            ),          ),        ),      );    }  }  

https://stackoverflow.com/questions/67341964/how-to-fix-a-renderflex-overflowed-by-99889-pixels-on-the-right May 01, 2021 at 08:47AM