Bottom Overflowed by 17 pixels [Flutter] - flutter

Question

Hi i am following an online tutorial building an app but am getting overflow pixels at the bottom of my card. I am unable to find the difference between my code from the video and the source code is not provided by the author. From my understanding i am having a
Column(children:[ClipRRect,Row]) <- in general but i cannot see the Row it is behind the ClipRRect, shouldn't it be below?
final String imagePath, cityName, monthYear, discount;
final int oldPrice, newPrice;
CityCard(this.imagePath, this.cityName, this.monthYear, this.discount,
this.oldPrice, this.newPrice);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
child: Stack(
children: <Widget>[
Container(
height: 210,
width: 160,
child: Image.asset(
imagePath,
fit: BoxFit.cover,
),
),
Positioned(
left: 0.0,
bottom: 0.0,
height: 60,
width: 160,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.black,
Colors.black.withOpacity(0.1)
]),
),
),
),
Positioned(
left: 10,
bottom: 10,
right: 10,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
cityName,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
Text(
monthYear,
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.white,
fontSize: 14),
)
],
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 6.0, vertical: 2.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: Text(
"$discount%",
style: TextStyle(fontSize: 14, color: Colors.black),
),
),
],
),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(width: 5.0),
Text(
'${formatCurrency.format(newPrice)}',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5.0),
Text(
"(${formatCurrency.format(oldPrice)})",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.normal,
fontSize: 13),
),
],
),
],
),
);
}
}```
I am suppose to have a row that shows the new price and the old price below each card. I am able to reveal them if i reduce the height of the Card container but i have no idea why it is overlapping since i am having a Column(children:(ClipRRect,Row)) <- can't see the Row

Answer 1

Try to add your Column inside a SingleChildScrollView
Probably this didn't happen to your instructor because of the size of his device.

Answer 2

For the bottom overflow pixels, place the Column in SingleChildScrollView for instance:
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SingleChildScrollView(
child: Column(
**your code**)));}