How can I get this type of transition in flutter?

Question

I want to get this type of transition animation .

But when I use

class CustomPageTransitionBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    double begin = 0;
    double end = 1.0;
    var curve = Curves.easeOut;

    final tween = Tween(
      begin: begin,
      end: end,
    ).chain(CurveTween(
     curve: curve,
   ));

    final scaleAnimation = animation.drive(tween);

   if (route.settings.name == '/') {
     return child;
   }

   return ScaleTransition(
     scale: scaleAnimation,
      child: child,
   );
 }
}

and in Main.dart:

MaterialApp(
    theme: ThemeData(
        pageTreansitionsTheme: PageTransitionsTheme( builders: {
               TargetPlatform.android: CustomPageTransitionBuilder()
         }
       )
    )

I get this type of animation:

Its somehow okay while navigating to the page . But when I go back I see weird animation effect.

Answer 1

Try this Code for Navigation

Navigator.push(
              context,
              PageRouteBuilder(
                  transitionDuration: const Duration(seconds: 1),
                  transitionsBuilder: (BuildContext context,
                      Animation<double> animation,
                      Animation<double> secAnimation,
                      Widget child) {
                    animation = CurvedAnimation(
                        parent: animation, curve: Curves.elasticOut);
                    return ScaleTransition(
                        scale: animation,
                        alignment: Alignment.center,
                        child: child);
                  },
                  pageBuilder: (BuildContext context,
                      Animation<double> animation,
                      Animation<double> secAnimation) {
                    return SecondScreen();
                  }));