Stack with custom shadow and positioned widget outside the bounderies - flutter

Question

I'm trying to achieve something like this in flutter:
This is my attempt to do that
class ContainerWidget extends StatelessWidget {
final Widget child;
final double width, height;
late List<Color>? gradiantColors;
ContainerWidget({
Key? key,
required this.child,
required this.height,
required this.width,
this.gradiantColors,
}) : super(key: key);
#override
Widget build(BuildContext context) {
var border = BorderRadius.only(
topRight: Radius.circular(70),
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8),
);
return Container(
decoration: BoxDecoration(
color: gradiantColors == null ? Colors.white : null,
borderRadius: border,
boxShadow: [
BoxShadow(
color: Colors.grey.shade300,
offset: Offset(0, 1),
blurRadius: 30,
spreadRadius: 5,
),
],
gradient: gradiantColors != null
? LinearGradient(
colors: gradiantColors!,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: null,
),
width: width,
height: height,
child: Stack(
children: [
Positioned(
top: -40,
left: -20,
child: Container(
decoration: BoxDecoration(
color: Colors.red.shade100.withOpacity(0.2),
shape: BoxShape.circle,
),
width: 100,
height: 100,
),
),
Positioned(
child: Icon(
Icons.abc_rounded,
size: 40,
),
),
child
],
),
);
}
}
this is the output
However, I've two problems:
The circle on top leak out over the rounded corner, I tried to solve that with the ClipRRect, but it clipped also the shadow of the container.
Icon (or the image) cannot be placed above the top portion of the container.
Any ideas ?

Answer 1

Like this (put this inside your widget class):
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(blurRadius: 20,
color: Colors.orange.withOpacity(0.5),
offset: const Offset(0.0, 8.0)
)
],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(100),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)
)
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(100),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)
),
child: Stack(
children: [
Container(
width: 200,
height: 300,
color: Colors.orange
),
Positioned(
top: -50,
left: -40,
child: ClipOval(
child: Container(
width: 150,
height: 150,
color: Colors.white.withOpacity(0.25)
)
)
)
]
)
)
),
Positioned(
top: -40,
left: 20,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(blurRadius: 10, color: Colors.black.withOpacity(0.2), offset: const Offset(0.0, 5.0))
]
)
)
)
]
)
)
);
}
which then ends up looking like this:
The top white Container is just a placeholder for what your image could look like. I'd suggest then using a PNG already with the shadow integrated if you'll be using pictures like that.
Let me know if that's what you're trying to accomplish and adjust to your needs.