How to create stacked wave containers - flutter

Question

I want to implement this screen with this waves and with the same curves , I'm trying to put multi containers in stack to get this shape but I can't , the top part of screen will be slider of images
and this is my code which I used to draw this screen
Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.centerRight,
begin: Alignment.centerLeft,
colors: [
blueColor,
lightColor,
],
),
),
child: Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: MediaQuery.of(context).size.height * .5,
decoration: BoxDecoration(),
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(100),
),
image: DecorationImage(
image: AssetImage('assets/images/bg.png'),
fit: BoxFit.cover)),
),
Positioned(
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .08,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(150),
topLeft: Radius.circular(150),
),
gradient: LinearGradient(
end: Alignment.centerRight,
begin: Alignment.centerLeft,
colors: [
blueColor,
lightColor,
],
),
),
),
),
],
),
),
Positioned(
bottom: 0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.centerRight,
begin: Alignment.centerLeft,
colors: [
blueColor,
lightColor,
],
),
),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(120),
),
color: Colors.white),
),
),
),
],
),
),
);
but this is the result which I have and have no idea to complete it
So can anyone help me in my case please !

Answer 1

You can make this with a CustomPainter, here is how you could do it and how it looks.
class StackedWaves extends StatelessWidget {
const StackedWaves({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height),
painter: StackedWavesPainter(),
);
}
}
class StackedWavesPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..shader = LinearGradient(colors: [
Colors.green,
Colors.lightGreenAccent,
]).createShader(Offset.zero & size);
final double side = 80;
final double radius = 80;
final path = Path()
..moveTo(0, size.height / 2 + side)
..arcToPoint(Offset(side, size.height / 2),
radius: Radius.circular(radius))
..lineTo(size.width - side, size.height / 2)
..arcToPoint(Offset(size.width, size.height / 2 - side),
radius: Radius.circular(radius), clockwise: false)
..lineTo(size.width, size.height)
..lineTo(0, size.height)
..close();
canvas.save();
canvas.drawPath(path, paint);
canvas.restore();
canvas.save();
canvas.translate(0, 100);
canvas.drawPath(path, Paint()..color = Colors.white);
canvas.restore();
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
Of course you can play with the variables "side" and "radius" if you want, just make sure they do not have a difference greater than 20 or so, I've seen if you change it like that you might not get the result you want.