Flutter carousel slider image over image partially - flutter

Question

i wanted to create a carousel slider with an image over an image. I have achieved to overlay a second image over the first with a stack, but also with positioned widget, but the problem is the overflow is not visible but i want to see it. As you can see on the image below the rounded circle overflows but the overflow is not visible.
img1
class _HelpPageState extends State<HelpPage> {
final List<Color> colorList = [
Colors.blue,
Colors.red,
Colors.green,
Colors.deepPurple,
Colors.yellow,
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(children: [
ListView(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
CarouselSlider(
options: CarouselOptions(
//height: 270,
autoPlay: true,
enlargeCenterPage: true,
viewportFraction: 1.0,
aspectRatio: 16 / 9,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.linearToEaseOut),
items: colorList
.map((color) => Container(
height: 230,
width: 500,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60),
),
color: color
),
child: Stack(
fit: StackFit.expand,
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: [
new Positioned(
bottom: -20,
child: Container(
constraints: new BoxConstraints(
maxHeight: 50.0, maxWidth: 50.0),
decoration: new BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0xFFdedede),
offset: Offset(2, 2)),
],
color: Colors.white,
shape: BoxShape.circle,
),
child: GestureDetector(
onTap: () => print("ha"),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset("icons/360.png",
scale: 0.5),
),
),
),
),
],
),
))
.toList(),
)
])
])),
);
/*return MaterialApp(
title: 'Help Page',
theme: new ThemeData(primarySwatch: Colors.red),
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Help'),
),
// ignore: unnecessary_new
body: Container(
height: 250,
width: 500,
decoration: BoxDecoration(
color: Colors.lightGreen,
boxShadow: [
BoxShadow(
color: Colors.green.withOpacity(0.2),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60),
),
image: DecorationImage(
image: AssetImage("images/cityliner2.jpg"),
fit: BoxFit.fitWidth,
),
),
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: [
new Positioned(
bottom: -30,
child: Container(
constraints:
new BoxConstraints(maxHeight: 50.0, maxWidth: 50.0),
decoration: new BoxDecoration(
boxShadow: [
BoxShadow(color: Color(0xFFdedede), offset: Offset(2, 2)),
],
color: Colors.white,
shape: BoxShape.circle,
),
child: GestureDetector(
onTap: () => print("ha"),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset("icons/360.png", scale: 0.5),
),
),
),
),
],
),
),
drawer: MainDrawer(),
),
);*/
}
}
The code which is commented will result in the right behaviour but without carousel. As soon i try it with a listview following a carouselslider i get the overflow issue as above. I also tried adding "overflow: overflow.visible" but as it is depreciated there is no effect visible.
Anyone out there who can help me please.
img2

Answer 1

use clipbehaviour instead
clipBehaviour=Clip.none