Flutter - ClipPath + AnimatedContainer - Path not animating properly - animation

Question

I am looking to animate both the AnimatedContainer and the ClipPath moving on the y-axis.
This is my current code:
class Clip extends StatelessWidget {
final double height;
Clip(this.height);
#override
Widget build(BuildContext context) {
return Scaffold(
body: ClipPath(
clipper: RoundedClipper(height),
child: AnimatedContainer(
duration: Duration(seconds: 5),
height: height,
color: Colors.amber,
),
),
);
}
}
class RoundedClipper extends CustomClipper<Path> {
final double height;
RoundedClipper(this.height);
#override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, height - 200);
path.quadraticBezierTo(
size.width / 2,
height,
size.width,
height - 200,
);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
based on the height I pass to this class the AnimatedContainer will transition between the two with an animation, while the clipper won't animate.
This is how it looks:
I tried wrapping the clipper with an AnimatedContainer and set the animation on that but it didn't work out.
How can I make it so that the clipped path animates vertically along with the AnimatedContainer?
Thanks to anyone who's gonna want to help

Answer 1

Animated container uses its own animation, so, I don't know if both clip path and animated container can work with same animation together. But I tried similar approach for what you need by using custom animation. Please, have a look and see if this is what you want.
I converted clip class to stateful for use of animation.
class Clip extends StatefulWidget {
final double height;
Clip(this.height);
#override
_ClipState createState() => _ClipState();
}
class _ClipState extends State<Clip> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> animation;
final double startingHeight =20.0;
#override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 5));
animation = Tween<double>(begin: startingHeight, end: widget.height).animate(_controller);
_controller.forward(from: 0.0);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedBuilder(
builder: (context, anim) {
return ClipPath(
clipper: RoundedClipper(animation.value),
child: Container(
height: animation.value,
color: Colors.amber,
),
);
},
animation: _controller,
),
);
}
}
here, you can control your animation using _controller.

Answer 2

This will not work properly, the easiest way is to create another widget (screen) and navigate to it, and add the target container (after the animation is done) and the encapsulate both containers in both screens with the (Hero) widget with the same tag key