Create curved card with shadow - flutter

Question

I really need you because I don't have even start idea how to implement these, and also I am not sure how it is called.
Actually, I want to implement something similar like on image (this little circle in each of cards - that is like chain between two cards).
With help of key I have made image from up with this code:
class InfoPage extends StatefulWidget {
InfoPage();
#override
_InfoPageState createState() => _InfoPageState();
}
class _InfoPageState extends State<InfoPage> {
InfoItemModel infoData = dataSourceInfoUser;
double basicSize = 70;
#override
initState() {
super.initState();
}
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Container(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
_buildCardWithCircle(
bgCircleX: 0.78,
bgCirceY: -2.0,
innerContainerX: 0.756,
innerContainerY: -1.78,
colorInner: Colors.orange
),
],
),
),
),
);
_buildCardWithCircle({double bgCircleX, double bgCirceY, double innerContainerX, double innerContainerY, Color colorInner}) => Container(
width: double.infinity,
height: 150,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
Align(
alignment: Alignment(bgCircleX, bgCirceY),
child: Container(
height: basicSize,
width: basicSize,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50.0),
),
),
),
Align(
alignment: Alignment(innerContainerX, innerContainerY),
child: Container(
height: basicSize - 10,
width: basicSize - 10,
decoration: BoxDecoration(
color: colorInner,
borderRadius: BorderRadius.circular(50.0),
),
child: Icon(Icons.vertical_align_center),
),
),
],
),
);
}
class AppCardField extends StatelessWidget {
final Widget child;
final double height;
final double paddingVertical, paddingHorizontal;
final double paddingVerticalChild, paddingHorizontalChild;
AppCardField({
this.child,
this.height,
this.paddingVertical = 8,
this.paddingHorizontal = 16,
this.paddingVerticalChild = 8,
this.paddingHorizontalChild = 16,
Key key})
: super(key: key);
#override
Widget build(BuildContext context) => Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVertical, horizontal: paddingHorizontal),
child: Container(
height: height,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 15.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVerticalChild,
horizontal: paddingHorizontalChild),
child: child,
),
));
}
But here, I have problem with shadow of the card and strongly white background of circle, OFC I need this shadow to be also in this white space, question is how to solve this?

Answer 1

Something like this
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Some Stuff"),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
SizedBox(height: 10.0,),
Container(
width: double.infinity,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
Align(
alignment: Alignment(0.9,-1.5),
child: Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.88,-1.35),
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.85, -1.2),
child: Icon(Icons.access_alarms, color: Colors.white,)
),
],
),
),
],
),
),
);
then you just reaped the card for the other once with different alignment values.