How to avoid a stacked widget being clipped by an expanded widget? - flutter

Question

When a Stack widget is inside a Column and next to an Expanded widget, the Stack widget's overflowed items are clipped by the Expanded widget (see below). How can this be fixed? Why does the leading widget not have a higher Z-index value than the next widget?
Code:
final imageUrl =
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80';
final bgUrl = 'https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80';
return Scaffold(
body: Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 120,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black87.withOpacity(0.5), spreadRadius: 1, blurRadius: 4)
],
color: Colors.black87,
),
),
Positioned(
bottom: -60,
left: 0,
right: 0,
child: Center(
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
boxShadow: [
BoxShadow(
color: Colors.black87.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(0, 1))
],
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
),
),
)
],
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(bgUrl),
fit: BoxFit.cover
)
),
),
)
],
)
);
}

Answer 1

you need to rearrange your widgets a little bit, put Stack outside the column:
return Scaffold(
body: Stack(children:[
Column(
children: [
Container(
height: 120,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black87.withOpacity(0.5), spreadRadius: 1, blurRadius: 4)
],
color: Colors.black87,
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(bgUrl),
fit: BoxFit.cover
)
),
),
)
],
),
Positioned(
top: 60,
left: 0,
right: 0,
child: Center(
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
boxShadow: [
BoxShadow(
color: Colors.black87.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(0, 1))
],
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
),
),
),
],),
);
}