如何修复右侧溢出 99889 像素的 RenderFlex？

Question

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

错误文本：

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

图像错误：

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

Answer 1

如果您进一步阅读您的错误，您很可能会看到一条注释，其中提到 'leading' 占用了最大值 space。将其更改为：

leading: SizedBox(width:MediaQuery.of(context).size.width *.020, 
          child: Consumer(
                builder: (ctx, product, _) => IconButton(
                  icon: Icon(product.isFavorite
                      ? Icons.favorite
                      : Icons.favorite_border),
                  color: Theme.of(context).accentColor,
                  onPressed: () {
                    product.toggleFavorite();
                  },
                ),
              ),
             ),

如何修复右侧溢出 99889 像素的 RenderFlex？

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

dart

dart-pub

flutter

flutter-layout