renderflex over flow by 7px on the right in flutter app - flutter

Question

Please help me with this error in the flutter app. I did not know what i am during wrong this is my code below: This is the code below.Pls help me
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

If I remember currectly, applying shrinkWrap: true in the ListView.Builder
is supposed to force the views to fit inside it.
My guess is that the views inside the listview cause the overflow..
Edit:
The overflow could be caused by the column widget inside the single cart widget.
Maybe switching it to a Listview.builder instead may help?

Answer 2

I am guessing overflow is happening in the row widget.
Here is a fix. Use Flexible widget or Expanded Widget based on the requirement
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,
),
),
],
),
),
Okay so here is the result.
See how texts take multiple lines when enough space is not available. You can avoid overflow in smaller screens this way.
Hope this solves your problem :D