右侧 RenderFlex 溢出 99889 像素答案

【问题标题】：A RenderFlex overflowed by 99889 pixels on the right右侧 RenderFlex 溢出 99889 像素
【发布时间】：2020-06-15 16:31:44
【问题描述】：

我遇到了这样的错误

渲染库捕获的异常═════════════════════════════════ 右侧的 RenderFlex 溢出了 99889 像素。相关的导致错误的小部件是 GridTileBar

这是我的代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../screens/product_detail_screen.dart';
import '../providers/products.dart';
import '../providers/cart.dart';

class ProductItem extends StatelessWidget {
  // final String id;
  // final String title;
  // final String imageUrl;

  // ProductItem(this.id, this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);
    final cart = Provider.of<Cart>(context, listen: false);
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(
              ProductDetailScreen.routeName,
              arguments: product.id,
            );
          },
          child: Image.network(
            product.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          leading: Consumer<Product>(
            builder: (ctx, product, _) => IconButton(
              icon: Icon(
                product.isFavorite ? Icons.favorite : Icons.favorite_border,
              ),
              color: Theme.of(context).accentColor,
              onPressed: () {
                product.toggleFavoritestatus();
              },
            ),
          ),
          title: Text(
            product.title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: Icon(
              Icons.shopping_cart,
            ),
            onPressed: () {
              cart.addItem(
                product.id,
                product.title,
                product.price,
              );
              Scaffold.of(context).hideCurrentSnackBar();
              Scaffold.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    'Added item to cart!',
                  ),
                  duration: Duration(seconds: 2),
                  action: SnackBarAction(
                    label: 'UNDO',
                    onPressed: () {
                      cart.removeSingleItem(product.id);
                    },
                  ),
                ),
              );
            },
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }
}

请帮忙！

还有一个错误也是这样显示的

小部件库捕获的异常═══════════════════════════════════ 断言失败：布尔表达式不能为空相关的导致错误的小部件是消费者

【问题讨论】：

溢出错误可以通过在 SingleChildScrollView 中包装导致 Widget 树的溢出来轻松修复。
我也这样做了，但什么也没发生。仍然显示相同的错误。
请发布快照

标签： flutter dart

【解决方案1】：

查看sn-p代码，gridtilebar无法渲染小部件，因为下面写了一个条件逻辑。

请检查以下条件（product.isFavorite）是否返回 null 或具有有效的布尔值。

product.isFavorite ? Icons.favorite : Icons.favorite_border,

【讨论】：