在flutter应用中，renderflex超出了右侧7px的渲染范围

Question

请在flutter应用中帮助我解决此错误。我不知道自己在做错什么，这是下面的代码：这是下面的代码。请帮助我

     import 'package:flutter/material.dart';

    class CartProducts  extends StatefulWidget {
      @override
      _CartProductsState createState() => _CartProductsState();
    }

    class _CartProductsState extends State<CartProducts> {

      var productsOnTheCart=[
        {
          "name":"Blazer",
          "picture":"images/products/blazer1.jpeg",
          "price":85,
          "size":"M",
          "color":"Black",
          "quantity":1,
        },
         {
          "name":"M Pant",
          "picture":"images/products/pants2.jpeg",
          "price": 80,
          "size":"8",
          "color":"Black",
          "quantity":1,
        },
        {
        "name":"Red Dress",
          "picture":"images/products/dress1.jpeg",
          "price":50,
          "size":"7",
          "color":"Red",
          "quantity":2,

        } 
        ];
      @override
      Widget build(BuildContext context) {
       return ListView.builder(
         itemCount: productsOnTheCart.length,

         itemBuilder: (context, index){
           return new SingleCartProduct(
             cartProdName:productsOnTheCart[index]['name'],
             cartProdColor:productsOnTheCart[index]['color'],
             cartProdQty:productsOnTheCart[index]['quantity'],
             cartProdSize:productsOnTheCart[index]['size'],
             cartProdPrice:productsOnTheCart[index]['price'],
             cartProdPicture:productsOnTheCart[index]['picture'],
           );
         }
       );  
         }
    }

    class SingleCartProduct extends StatelessWidget {

      final cartProdName;
      final cartProdPicture;
       final cartProdPrice;
       final cartProdSize;
       final cartProdColor;
       final cartProdQty;

      SingleCartProduct({
       this.cartProdName,
       this.cartProdPicture,
       this.cartProdPrice,
       this.cartProdSize,
       this.cartProdColor,
       this.cartProdQty});

      @override
      Widget build(BuildContext context) {
        return Card(
          child: ListTile(
            //leading section image section here
            leading: new Image.asset(cartProdPicture, height:80.0,width: 80.0,),
            //title section here
            title: new Text(cartProdName),
            //subtitle section
            subtitle: new Column(
              children: <Widget>[
                //Row Inside Column
                new Row(
                  children: <Widget>[
                    //this section is for the size of the products
                     new Padding(padding:const EdgeInsets.all(4.0),
                child:  new Text("Size:"),
                  ),
                    new Padding(padding: const EdgeInsets.all(4.0),
                child:  new Text(cartProdSize, style: TextStyle(color: Colors.red),),
                  ),
                  //This Section is for Prodcut  Color
                  new Padding(padding:const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                  child: new Text("Color:"),),
                    new Padding(padding:const EdgeInsets.all(4.0),
                child:  new Text(cartProdColor, style: TextStyle(color: Colors.red),),
                  ),
                  ],
                ),
              new Container(
                alignment: Alignment.topLeft,
                child: new Text("\$${cartProdPrice}",
                 style: TextStyle(
                   fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.red
                   ),
                 ),
              ) 
                //This Section is for the product price
              ],
            ),
           /* trailing:new Column(
              children: <Widget>[
              new   IconButton(
                icon: Icon(
                  Icons.arrow_drop_up,color: Colors.red),
                  iconSize: 38,onPressed: () {}),
                new IconButton(
                  icon: Icon(
                    Icons.arrow_drop_down,color: Colors.red,),
                    iconSize: 38, onPressed: () {}),

              ],
            )*/
            trailing: FittedBox(
              fit: BoxFit.fill,
              child: Column(
              children: <Widget>[
                new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: (){}),
                new Text("$cartProdQty", style: TextStyle(fontWeight: FontWeight.bold),),
                new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: (){}),
              ],
              ),
            ),

          ),
        );
      }

    }

Answer 1

[如果我没记错的话，请在shrinkWrap: true中应用ListView.Builder应该迫使视图适合其中。我的猜测是列表视图中的视图导致溢出。.

编辑：溢出可能是由于单个购物车小部件内的column widget引起的。也许将其切换为Listview.builder可能会有所帮助？

Answer 2

我猜测行小部件中发生了溢出。这是一个解决方法。根据需要使用Flexible widget或Expanded Widget

    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 22.0, vertical: 8.0),
      child: Row(
        children: <Widget>[
          Flexible(
            fit: FlexFit.loose, // It means that the child widget can expand to maximum size available thus taking up all space else it can shrink if there is no space available // Refer to the link for more info
            child: Text(
              'This is my first label:',
              style: Theme.of(context).textTheme.subtitle,
            ),
          ),
          SizedBox(width: 5,), // You can simply put some sized boxes like this to have some fixed space instead of wrapping every child in a padding widget
          Flexible(
            fit: FlexFit.loose,
            child: Text(
              'This is my first value',
              style: Theme.of(context).textTheme.body1,
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            child: Text(
              'This is my second label:',
              style: Theme.of(context).textTheme.subtitle,
            ),
          ),
          SizedBox(width: 5,),
          Flexible(
            fit: FlexFit.loose,
            child: Text(
              'This is my second value',
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),
    ),

好的，这是结果。
查看当没有足够的空间时文本如何占用多行。这样可以避免在较小的屏幕中溢出。
希望这可以解决您的问题：D