Flutter build expanding and moving container animation using animation sequence

I'm trying to build exact same expanding animation like below

But I'm getting ended up with this

I wonder what kinda animations that i need to use to get exact same moving and Reveal animation,Here I'm using animated Align with an animated container joining with 2 motion tweens. But its not getting aligned centered first and then expanding.How can i solve this?

This is my code

class _Test1State extends State<Test1> with TickerProviderStateMixin {
  late bool isOpened = false;
  late bool isonTop = false;

  late Animation<double> _animateRadius;
  late Animation<AlignmentGeometry> _animateAlignment1;

  late AnimationController _animationController1;

  @override
  void initState() {
    _animationController1 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200))
      ..addListener(() {
        setState(() {});
      });

    _animateAlignment1 =
    Tween<Alignment>(begin: Alignment.bottomRight, end: Alignment.center)
        .animate(_animationController1);

    _animateRadius =
    Tween<double>(begin: 50.0, end: 10.0).animate(_animationController1);

    _animationController1.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
       isonTop = true;
      }
    });

    super.initState();
 }

  animate() {
    if (!isOpened) {
      _animationController1.forward();
    } else {
      _animationController1.reverse();
      print(":animation2");
    }
    isOpened = !isOpened;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Container(),
        ),
        AnimatedPadding(
         duration: Duration(milliseconds: 1000),
         padding: EdgeInsets.only(
         right: isOpened ? 0 : 20, bottom: isOpened ? 0 : 40),
         child: AnimatedAlign(
          duration: Duration(milliseconds: 1000),
          alignment:
              isOpened ? Alignment.bottomCenter : _animateAlignment1.value,
          child: GestureDetector(
              onTap: () {
                setState(() {
                  animate();
                });
              },
              child: AnimatedContainer(
                duration: Duration(milliseconds: 1000),
                height:
                    isOpened ? MediaQuery.of(context).size.height / 2 : 56,
                width: isOpened ? MediaQuery.of(context).size.width : 56,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(_animateRadius.value),
                  color: isOpened ? Colors.red : Colors.amberAccent,
                ),
              ))),
        )
      ],
    );
  }
}