A RenderFlex overflowed by 40 pixels on the bottom. Flutter - flutter

Question

Widget build(BuildContext context) {
return Card(
child: ListTile(
title: new Text(prod_name),
leading: Image.asset(prod_img, width: 50.0, height: 50.0,),
subtitle: new Column(
children: <Widget>[
new Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0.0),
child: new Text("ice-cream: "),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: new Text(prod_ice_cream, style: TextStyle(color: Colors.red),),
),
),
new Container(
alignment: Alignment.topLeft,
child: new Text("\Rs${prod_price}", style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),),
),
trailing: new Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: (){}),
new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: (){})
],
),
),
);
I am getting "A RenderFlex overflowed by 40 pixels on the bottom" after adding those two icons
I have tried stackoverflow solution gave but after that I am getting "A RenderFlex overflowed by 21 pixels on the bottom". Here are some screenshots screenshot1 screenshot2 screenshot3. Here is my full code code

Answer 1

If Text widget is throwing overflow error then just set set the overflow property to a Text widget.
Example:
Flexible(
child: new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Your Text Value Here',
overflow: TextOverflow.ellipsis,
),
),
),
Here is the solution using Container instead of ListTile:
class Single_cart_prod extends StatelessWidget {
final prod_name;
final prod_img;
final prod_price;
final prod_ice_cream;
final prod_sugar;
Single_cart_prod(
{this.prod_name,
this.prod_img,
this.prod_price,
this.prod_ice_cream,
this.prod_sugar});
#override
Widget build(BuildContext context) {
return Card(
child: Container(
width: double.infinity,
height: 80,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 2,
child: Image.asset(prod_img, width: 50.0, height: 50.0),
),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
prod_name,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
Text(
"Rs:" + prod_price.toString(),
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black38),
),
],
),
),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Ice Cream",
),
Text(
prod_ice_cream,
style: TextStyle(color: Colors.red),
),
],
),
),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Sugar",
),
Text(
prod_sugar,
style: TextStyle(color: Colors.red),
),
],
),
),
Expanded(
flex: 1,
child: Column(
children: <Widget>[
Expanded(
child: IconButton(
icon: Icon(Icons.arrow_drop_up), onPressed: () {})),
Expanded(
child: IconButton(
icon: Icon(Icons.arrow_drop_down),
onPressed: () {}))
],
),
)
]),
),
);
}
}
Output:

Answer 2

check out this example
import 'package:flutter/material.dart';
void main() => runApp(Cartproduct());
class Cartproduct extends StatefulWidget {
#override
_CartproductState createState() => _CartproductState();
}
class _CartproductState extends State<Cartproduct> {
var cart_list = [
{
"name": "Avocado",
"img": "images/avocado.jpg",
"price": 180,
"ice-cream": "2 scoops",
"sugar": "3 cube"
},
{
"name": "Mango",
"img": "images/mango.jpg",
"price": 180,
"ice-cream": "1 scoops",
"sugar": "2 cube"
},
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: new ListView.builder(
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index) {
return new Single_cart_prod(
prod_name: cart_list[index]['name'],
prod_img: cart_list[index]['img'],
prod_price: cart_list[index]['price'],
prod_ice_cream: cart_list[index]['ice-cream'],
prod_sugar: cart_list[index]['sugar'],
);
},
),
),
);
}
}
class Single_cart_prod extends StatelessWidget {
final prod_name;
final prod_img;
final prod_price;
final prod_ice_cream;
final prod_sugar;
Single_cart_prod(
{this.prod_name,
this.prod_img,
this.prod_price,
this.prod_ice_cream,
this.prod_sugar});
#override
Widget build(BuildContext context) {
return Card(
child: ListTile(
title: new Text(prod_name),
leading: Image.asset(
prod_img,
width: 50.0,
height: 50.0,
),
subtitle: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
new Text("Ice-cream: "),
new Text(
prod_ice_cream,
style: TextStyle(color: Colors.red),
),
],
),
Row(
children: <Widget>[
new Text(" Sugar: "),
new Text(
prod_sugar,
style: TextStyle(color: Colors.red),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: new Container(
alignment: Alignment.topLeft,
child: new Text(
"\Rs${prod_price}",
style: TextStyle(
fontSize: 16.0, fontWeight: FontWeight.bold),
),
),
),
],
),
new Column(
children: <Widget>[
GestureDetector(
onTap: () {}, child: new Icon(Icons.arrow_drop_up)),
GestureDetector(
onTap: () {}, child: new Icon(Icons.arrow_drop_down)),
],
),
],
),
],
),
),
);
}
}
Let me know if it works

Answer 3

use SingleChildScrollView widget like this:
SingleChildScrollView(
child: your_main_Widget()
)