A RenderFlex overflowed Flutter - flutter

Question

Trying use Positioned with Stack and Column, getting errors:
"A RenderFlex overflowed by 72 pixels on the bottom."
"A RenderFlex overflowed by 46 pixels on the bottom." etc...
Part of my block just disappears into the slider, i tried to use only Stacked and several Positioned pressed to the bottom of the picture, but then part of the picture is closed.
My dart:
final List<Widget> imageSliders = imgList.map((item) => Container(
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Image.asset('assets/psplus-1month.png', fit: BoxFit.cover, width: 1000.0),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(top: 20.0),
child: Text(
'Playstation Plus',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(bottom: 5.0, top:5.0),
child: Text(
'1 месяц',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFFA5ABC8),
fontSize: 12,
),
),
),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(bottom: 10.0),
child: Text(
'1 500 рублей',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF789EEB),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
)
],
),
),
Positioned(
bottom: 35.0,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black.withOpacity(0.10), spreadRadius: 5)],
),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 15,
child: Icon(Icons.add),
),
)
],
),
),
],
)
),
),
)).toList();
CarouselSlider(
options: CarouselOptions(
autoPlay: false,
aspectRatio: 2.0,
enlargeCenterPage: true,
viewportFraction: 0.6,
),
items: imageSliders,
)
Screenshot for visual example:

Answer 1

If I understood you clear, i'd suggest you to use LayoutBuilder widget to get constraints of parent widget which is CarouselSlider.
Output
Full code
class MyHomePage extends StatefulWidget {
final Function onItemPressed;
MyHomePage({
Key key,
this.onItemPressed,
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> imgList = [
'assets/veg.png',
'assets/veg.png',
'assets/veg.png',
'assets/veg.png',
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: Padding(
padding: const EdgeInsets.only(top: 50),
child: CarouselSlider(
options: CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
aspectRatio: 16 / 10,
viewportFraction: 0.6,
),
items: imgList
.map(
(item) => LayoutBuilder(
builder: (context, constraints) {
return ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'$item',
fit: BoxFit.cover,
width: constraints.maxWidth,
height: constraints.maxHeight / 2,
),
SizedBox(height: 23),
Text(
'Playstation Plus',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5),
Text(
'1 месяц',
style: TextStyle(
color: const Color(0xFFA5ABC8),
fontSize: 12,
),
),
SizedBox(height: 5),
Text(
'1 500 рублей',
style: TextStyle(
color: const Color(0xFF789EEB),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 5),
],
),
),
Positioned(
bottom: constraints.maxHeight / 2 - 18,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
blurRadius: 7,
color: Colors.black.withOpacity(0.10),
spreadRadius: 2)
],
),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 18,
child: Icon(Icons.add),
),
)
],
),
),
],
),
);
},
),
)
.toList(),
),
),
);
}
}